我遇到了一种情况，我使用 JavaScript 动态地将脚本添加到页面中，最终得到一个空白页面，其中的 body 标记已被删除。下面是代码。这段代码不是最佳的，因为它在 jQuery 加载时添加了几次脚本，但我知道修复是什么(请参阅评论)...我不知道的是为什么页面或浏览器的行为方式如此确实如此。
function LoadingClass ()
{
this.check = function(iteration) {
var o = this;
console.log("Checking...");
if (typeof jQuery === 'undefined') {
iteration++;
console.log("jQuery not found (iteration " + iteration + ")");
if (iteration > 50) {
console.error("No jQuery found. Cannot start.");
} else {
// This code seems simple but behaves oddly
console.log("No jQuery found yet. Let's add the script.");
document.write('<script id="script_jquery" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>');
// This is the fix that prevents the script from
// being written more than once. No issue with this.
/*
if (document.getElementById('script_jquery') === null) {
console.log("No jQuery found yet. Let's add the script.");
document.write('<script id="script_jquery" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>');
} else {
console.log("No jQuery found yet, but the script exists. Waiting...");
}
*/
// Check again
var t = setTimeout(function(){ o.check(iteration); }, 100);
}
} else { // Continue with startup code here...
console.log("jQuery Loaded. Continue...");
}
};
}
window.whitepageProblem = new LoadingClass();
whitepageProblem.check(0);
当我在 Chrome 中从一个简单的 HTML 页面运行它时，我发现:
- 检查函数运行 4 或 5 次(我希望如此)
- 页面短暂可见(在 JavaScript 迭代时加载 DOM)
- 脚本最终被添加到
<head>(这不应该发生!) <head>中的其他所有内容消失 (?!)<body>在开发者工具(“元素”选项卡)中看不到标签 (?!)- 但是源 HTML 看起来不错
如果有人愿意测试，这里有一个简单的页面...
<!doctype html>
<html>
<head>
<title>Whitepage Test</title>
<style>
body { background: #6688ff; }
</style>
</head>
<body>
<h1>Whitepage Test</h1>
<script src="whitepage.js"></script> <!-- Add the js code to this file -->
</body>
</html>
需要明确的是，问题不在于我如何解决这个问题(尽管如果您有比我所包含的更好的解决方案，我很乐意听到它)，而是这里发生了什么？
最佳答案
在浏览器最初关闭文档之后向文档写入内容时，效果是用一个全新的空文档重新开始。
关于javascript - 为什么向页面写入脚本会破坏 body 标记，留下白色的空白页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26109835/