Question

以下是一些HTML（Fiddle）：

<!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中，您将看到一条错误消息{"error": "Please use POST request"}如果您创建一个HTML文件它将更好地工作，您将看到单击“Test Hash Now”后再次出现“Click to write new page”按钮（或者应该是）错误的。

为什么会这样？

我的用例很简单 - 我有一个引导页面，其中包含一个使用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() - 但同样的问题也会发生。

Answer 1

尝试使用此代码来推送哈希状态：

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

但我自己没有测试过。

已添加：尝试命名函数test1（）和test2（）。这不会解决它，但它可能有助于调试/发现正在发生的事情。

Firefox失败 - 使用document.write并更新到location.hash后会导致页面刷新

1 个答案: