3

el.innerText||el.textContentを使用すると信頼性の低いクロスブラウザーの結果が得られる可能性があると聞いたので、DOM ツリーをたどってテキストノードを再帰的に収集し、それらを HTML 本文のタグに書き込みます。

このスクリプトが行うことは、 window.location からハッシュ部分文字列 valus を読み取り、それらを HTML に書き込むことです。

このスクリプトは、Chrome と Firefox では機能しますが、IE では窒息します。

次のような URL 構文でページを呼び出します。

http://example.com/pagename.html#dyntext=FOO&dynterm=BAR&dynimage=FRED

更新 更新 更新

解決：

スクリプトを以前</body>(あるべき場所) に移動してから削除console.log(sPageURL);したところ、Chrome、Firefox、IE8、および IE9 で動作するようになりました。

これは、テキストを取得するのではなくテキストを配置するだけの場合の、innerText と textContent のクロスブラウザーの問題に対する私の回避策です。この場合、window.location からハッシュ部分文字列値を取得し、それらをページに書き込みます。

<html>
<body>

<span id="dyntext-span" style="font-weight: bold;"></span><br />
<span id="dynterm-span" style="font-style: italic;"></span><br />
<span id="dynimage-span" style="text-decoration: underline;"></span><br />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
$(document).ready(function() {
        var tags = ["dyntext", "dynterm", "dynimage"];
        for (var i = 0; i < tags.length; ++i) {
            var param = GetURLParameter(tags[i]);
            if (param) {
                var dyntext = GetURLParameter('dyntext');
                var dynterm = GetURLParameter('dynterm');
                var dynimage = GetURLParameter('dynimage');
            }
        }

        var elem = document.getElementById("dyntext-span");
        var text = document.createTextNode(dyntext);
        elem.appendChild(text);
        var elem = document.getElementById("dynterm-span");
        var text = document.createTextNode(dynterm);
        elem.appendChild(text);
        var elem = document.getElementById("dynimage-span");
        var text = document.createTextNode(dynimage);
        elem.appendChild(text);     
});

function GetURLParameter(sParam) {
    var sPageURL = window.location.hash.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
}

</script>

</body>
</html>

最終更新

ハッシュ部分文字列の値にスペースが必要な場合(たとえば、3 つの単語を含む言語フレーズなど)、URI 内の文字で単語を区切り、次のように、各テキスト ノードを作成するときに+Unicode 文字をスペースに置き換えます。\u002B

var elem = document.getElementById("dyntext-span");
var text = document.createTextNode(dyntext.replace(/\u002B/g, " "));
elem.appendChild(text);
var elem = document.getElementById("dynterm-span");
var text = document.createTextNode(dynterm.replace(/\u002B/g, " "));
elem.appendChild(text);
var elem = document.getElementById("dynimage-span");
var text = document.createTextNode(dynimage.replace(/\u002B/g, " "));
elem.appendChild(text);

URI を次のように作成します。

http://example.com/pagename.html#dyntext=FOO+MAN+CHU&dynterm=BAR+HOPPING&dynimage=FRED+IS+DEAD
4

1 に答える 1

0

コードに含めるときconsole.log()は、IE で Dev Tools を開いておく必要があります。headまた、要素が欠落していると、いくつかの問題が発生する可能性があります。それとも、この投稿だけに欠けていますか？

于 2012-09-01T15:37:44.827 に答える