expression() > onload 時に expression() を停止する

本文

前書き

前回と同様、expression() の停止の仕方。

今回は、外部CSSを使い、さらに HTC というアイテムを使って、やってみます。

最初 expression_on.css に onloadイベントを書いていたのですが、うまく動かないときが多々あるので、HTCを使いました。
ビヘイビアというやつの機能です。これもIEの独自拡張です。

どうせHTCを使うなら～、ってことで、 普通のCSSと、 expression()を使う専用のCSSと分けることにしました。

簡単にそのストップされるまでの順番を書くと下記のようになります。
expression() を使うCSSファイルを expression_on.css,
その expression() を停止するさせるCSSファイルを expression_off.css, とします。

ページと expression_onoff.htc が読み込まれる
HTC内のスクリプトによって expression_on.css が読み込まれる
expression() が働く
ページが読み終わる
HTC内のスクリプトによって expression_off.css が読み込まれる
expression() がストップ
ウマー

・・・それでは、実際に、 expression_on.css と expression_off.cssと expression_onoff.htc のソースのサンプルを紹介。
expression()でのq要素へのアクセスが、ページをロードし終わったら止まります。

サンプル

「onload 時に expression() を停止する」のサンプル

ソースコード

HTCを呼び出す、普通のCSSのソース

/* call htc */
body {
    behavior: url('http://～/expression_onoff.htc');
}

HTCファイルのアドレスは適当に書き換えてください。

expression_on.cssのソース

/* quotation on */
q {
    zoom: expression(
        this.style.zoom || (
            this.innerHTML = ' &quot; ' + this.innerHTML + ' &quot; ', 1
        )
    );
    white-space:normal;
}

expression_off.cssのソース

/* quotation off */
q {
    zoom: 1;
}
/* behavior off */
body {
    behavior: none;
}

expression_onoff.htcのソース

<public:component lightweight="true" xmlns:public="http://www.w3.org/TR/NOTE-HTMLComponents">
<public:attach event="ondocumentready" handler="expression_off" />
<script type="text/javascript">
//    -    -    -    -    -    -    -    -    -    -    -    -    -    -    -    -    -    setting
// Style-Sheet-file-path (absolute-path or route-path)
// for expression-On
var expression_on_css = 'http://～/expression_on.css';

// for expression-Off
var expression_off_css = 'http://～/expression_off.css';


//    -    -    -    -    -    -    -    -    -    -    -    -    -    -    -    -    -    script
// add on-StyleSheet
function expression_on() {
    if (!expression_on_css) return;
    var d = element.document;
    // head
    var head = d.getElementsByTagName('HEAD')[0];
    if (!head) return;
    // create link-element for StyleSheet
    var link = d.createElement('LINK');
    link.setAttribute('type', 'text/css');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('media', 'screen,tv');
    link.setAttribute('href', expression_on_css);    
    // add into head
    head.appendChild(link);
}
// add off-StyleSheet
function expression_off() {
    setTimeout(expression_off_2, 100);
}
function expression_off_2() {
    if (!expression_off_css) return;
    var d = element.document;
    // body
    var body = d.getElementsByTagName('BODY')[0];
    if (!body) return;
    // create link-element for StyleSheet
    var link = d.createElement('LINK');
    link.setAttribute('type', 'text/css');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('media', 'screen,tv');
    link.setAttribute('href', expression_off_css);    
    // add into body
    body.appendChild(link);
}
// start
expression_on();
</script>
</public:component>

CSSファイルのアドレスを書き換える必要があります。

備考

var expression_on_css = 'http://～/expression_on.css'; のとこの、http://～/expression_off.cssは、なるべく絶対パスで書くようにしたほうがいいかも。
これパスは、expression_on.cssからの相対アドレスではなく、そのページからの相対アドレスになるので、絶対パスやルートパスのがアドレス変わらないので、よいです。
(検索エンジンのキャッシュのことを考えると、ルートパスより絶対パスのがいいかもです。)

プロパティを上書きして expression() を停止させても、 expression() で出された結果は残ります。
CSS切り替えとかして、expression_on.css を alternate stylesheet にしたり、<LINK>要素を削除しても、残ります。
逆に言うと、それがまた結構問題点だったりします。

Snow-Materia > onload 時に expression() を停止する

前書き