Firefox失败 - 在使用document.write并更新到location.hash之后会导致页面刷新 [英] Firefox Fail - After using document.write and update to location.hash causes page refresh
问题描述
以下是一些HTML（小提琴）：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd>
< html>
< head>
< title>测试写入< / title>
< script>
function test（）{
if（window.location.hash =='#test'）{
alert（'has has been set！'）;
} else {
document.open（）;
document.write（'<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict .dtd> \
< html> \
< head> \
< title> Hello There！< / title> \
< ;脚本> \
function test（）{\
window.location.hash =test; \
} \
< /'+'script> ; \
< / head> \
< body> \
< button onclick =test（）>立即测试哈希< / button> \
< / body> \
< / html>'）;
document.close（）;
}
}
< / script>
< / head>
< body>
< button onclick =test（）>点击写入新页面< / button>
< / body>
< / html>
如果你运行这个 - 然后点击Click to write new page - 它会写一个新的HTML片段放到文档上。这次有一个按钮测试哈希现在 - 当你点击它所做的就是更新window.location.hash。
在FireFox页面试图重新加载再一次意外。在所有其他浏览器中，它工作正常。在Fiddle中你会看到一个错误消息 {error：请使用POST请求} 如果你创建了一个HTML文件，效果会更好，点击新建页面按钮，点击测试哈希现在，这是（或应该是）错误。
为什么会发生这种情况？
我的用例很简单 - 我有一个引导页面，其中包含一个使用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（） - 但同样的确切问题发生。
尝试下面的代码来推送散列状态：
if（history.pushState）{
history.pushState（null ，null，'#test'）;
}
else {
location.hash ='#test';
}
但是我自己没有测试过。
新增：尝试命名您的函数test1（）和test2（）。这不一定会解决，但它可能有助于调试/发现正在发生的事情。
Here is some 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>
If you run this - then click "Click to write new page" - it will write a new HTML fragment onto the document. This time there is a button to "Test Hash Now" - when you click all it does is update the window.location.hash.
In FireFox the page tries to reload again unexpectedly. In all other browsers it works fine. In Fiddle you will see an error message {"error": "Please use POST request"} if you create a HTML file it will work better, you'll see the "Click to write new page" button appear again after clicking "Test Hash Now" which is (or should be) wrong.
Why is this happening?
My use case is simple - I have a bootstrap page that contains a javascript that fetches a bunch of data using AJAX. It then generates a large HTML string (including doctype/head/body/etc) and then it just needs to render that HTML string.
In this case I am using an inline HTML as a constant - but in the real case it is generating it using some logic. I am trying to simulate what the server will respond with and eliminate any server side requirements for the client.
I would just have a bunch of HTML and JS files zipped up into one file, and I could give that to anyone (developer or not) to run without any need for a server or database. Then they could see the page as if it were the real-deal. That's my goal. If I simply put the HTML into an existing element on the page (such as just manipulating the body of the current page) - it won't behave EXACTLY the same as if the entire document were generated. Plus I want the bootstrap HTML file to be really small (with just one javascript include at the top).
Everything seems to work - except Firefox is the only one that fails. It all works unless there is a script referenced inside the page that needs to write something to the window.location.hash - then it tries to reload the whole page... Uggg...
Any better way to accomplish this?
I tried to create an iframe and using the same document.open();document.write(html);document.close() - but the same exact issue happens.
Try this code to push the hash state:
if (history.pushState) {
history.pushState(null, null, '#test');
}
else {
location.hash = '#test';
}
but I haven't tested it myself.
Added: Try naming your functions test1() and test2(). This won't fix it necessarily, but it may help to debug/discover what is happening.
这篇关于Firefox失败 - 在使用document.write并更新到location.hash之后会导致页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
