3

我听说使用el.innerText||el.textContent会产生不可靠的跨浏览器结果，所以我正在遍历 DOM 树以递归方式收集文本节点，并将它们写入 HTML 正文中的标签。

该脚本所做的是从 window.location 读取哈希子字符串值并将它们写入 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>

最后更新

如果您的哈希子字符串值需要空格（例如包含三个单词的语言短语），则将单词与 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 中打开开发工具。缺少head元素也可能导致一些问题。还是仅在此帖子中丢失？

于 2012-09-01T15:37:44.827 回答