0

这是一些 HTML（小提琴）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test Write</title>
<script>
    function test() {
        if (window.location.hash == '#test') {
            alert('The hash is already set!');
        } else {
            document.open();
            document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\
<html>\
<head>\
<title>Hello There!</title>\
<script>\
    function test() {\
        window.location.hash="test";\
    }\
</'+'script>\
</head>\
<body>\
    <button onclick="test()">Test Hash Now</button>\
</body>\
</html>');
            document.close();
        }
    }
</script>
</head>
<body>
    <button onclick="test()">Click to write new page</button>
</body>
</html>

如果你运行它——然后单击“单击以编写新页面”——它将在文档中写入一个新的 HTML 片段。这次有一个“立即测试哈希”按钮 - 当您单击它所做的一切就是更新 window.location.hash。

在 FireFox 中，页面尝试意外重新加载。在所有其他浏览器中它工作正常。在 Fiddle 中，如果您创建一个 HTML 文件，它会更好地工作，您将看到一条错误消息{"error": "Please use POST request"}，您将在单击“立即测试哈希”后再次出现“单击以编写新页面”按钮，这是（或应该是）错误的。

为什么会这样？

我的用例很简单——我有一个引导页面，其中包含一个使用 AJAX 获取一堆数据的 javascript。然后它会生成一个大的 HTML 字符串（包括 doctype/head/body/etc），然后它只需要渲染那个 HTML 字符串。

在这种情况下，我使用内联 HTML 作为常量 - 但在实际情况下，它使用一些逻辑生成它。我正在尝试模拟服务器将响应的内容并消除客户端的任何服务器端要求。

我只需将一堆 HTML 和 JS 文件压缩到一个文件中，我可以将其提供给任何人（无论是否为开发人员）运行，而无需任何服务器或数据库。然后他们可以看到该页面，就好像它是真正的交易一样。这就是我的目标。如果我只是将 HTML 放入页面上的现有元素中（例如仅操作当前页面的正文） - 它的行为与生成整个文档的行为完全不同。另外，我希望引导 HTML 文件非常小（顶部只有一个 javascript 包含）。

一切似乎都正常——除了 Firefox 是唯一失败的。除非页面内引用了需要向 window.location.hash 写入内容的脚本，否则一切正常 - 然后它会尝试重新加载整个页面...... Uggg......

有没有更好的方法来实现这一点？

我试图创建一个 iframe 并使用相同的document.open();document.write(html);document.close()- 但同样的问题发生了。

4

1 回答 1

1

试试这个代码来推送哈希状态：

if (history.pushState) {
    history.pushState(null, null, '#test');
}
else {
    location.hash = '#test';
}

但我自己没有测试过。

补充：尝试命名你的函数 test1() 和 test2()。这不一定能解决它，但它可能有助于调试/发现正在发生的事情。

于 2013-06-04T00:54:24.803 回答