expression() > 失敗ノート

q:before, q:after { content:'"' }

<q>のクオーテーション付けのときの失敗例・ブラウザクラッシュ例。

結果的な半角羅列


q {
    behavior: expression(
        this.innerHTML = '"' + this.innerHTML + '"'
    );
}
test

最初やったバカ。
延々と """test""" とクオーテーションが増えて行き、ブラウザ窓の横幅でスクロールバーと対立してクラッシュ。
クオーテーションの両端にスペースが入ってたりすると自動改行されるのでやや安全。

自己無限？


q {
    behavior: expression(
        document.getElementById('test').innerHTML += ' , ' + this.style.behavior + ' , '
    );
}
test

this.style.behaviorを参考しようとしたらクラッシュ。

ノンストップ


q {
    behavior: expression(
        document.all('test').innerHTML += this.style.behavior.length + ' - ',
        this.style.behavior = 'none',
        this.innerHTML = ' " ' + this.innerHTML + ' " '
    );
}

expression() の中身は関数だと思っていたときのもの。これだと無限にクオーテーションが増えて止まりません。
やればわかるのですが、this.style.behavior.length の値が増えていきます。 expression() の中身も動的に変わっていっているらしいです。

1回なのに2個


q {
    behavior: expression(
        this.innerHTML = ' " ' + this.innerHTML + ' " ',
        this.style.behavior = 0
    );
}

ループは終わるんだけど、 2回アクセスされるし、this.style.behavior = 0 とやるのは変な気分かも。

2回なのは、 IEがページをプレロードするときと、本ロードするときで、2回実行するからっぽい。

behaviorにするべきなのかと


q {
    behavior: expression(
        this.style.behavior || (
            this.innerHTML = ' " ' + this.innerHTML + ' " ',
            this.style.behavior = 1
        )
    );
}

ループは1回で終わっていいんだけど、 this.style.behavior = 1 は変かも。つーか他に behavior 属性使えないし。

自己上書き


q {
    zoom: expression(
        this.style.zoom || (
            this.innerHTML = ' " ' + this.innerHTML + ' " ',
            this.style.zoom = 'normal'
        )
    );
}

zoom: expression(); となってるのを、内部で zoom: 1; としたら、1回だけでループ終わって expression() も消えてウマー？ …って夢みてたんだけど、ブラウザクラッシュで打ち砕かれました。

marquee無効化

<marquee>無効化するときの失敗例。

中身放出


marquee {
    behavior: expression(
        this.outerHTML = this.innerHTML
    );
}

<p><marquee> テキスト <marquee></p> ならこれでいいんだけど、 <p><marquee> <div>なんとかかんとか</div> <marquee></p> だとJSエラーになります。クラッシュはしませんが。

replace


marquee {
    behavior: expression(
        this.outerHTML = this.innerHTML.replace(/<[^>]*>/g, ' ')
    );
}

どうやらreplace関数は効かないようです。この文、エラーにもならないんだけど、実行もされません。 split関数は効きました。ナズェダ。

・・・って、いまやったらできたｗなんだったのかなあ・・・。
splitのコードも書いておく。


marquee {
    behavior: expression(
        this.outerHTML = this.innerHTML.split(/<[^>]*>/).join(' ')
    );
}

#fixed { position:fixed; }

position:fixed;したときの失敗例。

this.style.left = '1px', this.style.left = '0'

/* position-fixed */
#fixed {
    position:fixed;
    position: expression('absolute');
    left:0;
    top:0;
    top:expression(
        this.style.left = '1px',
        this.style.left = ((document.body ? document.body.scrollLeft : 0) + 0) + 'px',
        ((document.body ? document.body.scrollTop : 0) + 0) + 'px'
    );
}

this.style.left を仮に 1px にして、それからスクロール幅の値を足せばいいな、と思って、上記のようなことをして横着してたんだけど、 何故かブラウザクラッシュ。＿|￣|○ 理由わからん…。 this.style.right ならこれでもできるのになあ。

そんなわけで、関係あるけどそんな滅多に使わなくて割と値はどうでもいい zIndex を使うことにした。

したときの失敗例。

onload したら expression() 無効

onload したら expression() を上書きして無効化しよう、としたときの失敗例。

window.onload = function () { }

/* onload */
body {
    zoom: expression(
        this.style.zoom || (
            window.onload = function () {
                /* この辺にスクリプト */
            },
            1
        )
    );
}

これはできないみたいです。(実行されない)
ただ、 document.body.onload = function () { } とか、 this.onclick = function () { } また、 window.attachEvent('onload', function () { }) などはできるみたいです。

しかし、 this.onclick = function () { } みたいな真似ができるのはいいですなー。 li:hover { なんとか～ } みたいなのが IEでも簡単にできますね。あとで書こう。

・・・とかなんとか言っておきながらなんなのですが、
どうやら上記の方法ではonloadイベントが発生しないときがある模様。
仕様ようわからんｗ
また、HTCファイルに記述したり、setTimeout関数を混ぜたりすると、まだ動くときがある模様。
仕様ようわからんｗ

Snow-Materia > 失敗ノート