Question

执行document.write()后，Google Chrome会向我显示HTML代码已从代码A 更改为代码B 。好像document.write()会覆盖整个页面。如果是，如何将脚本标签附加到head标签内？

代码A：执行前document.write()

<!--DOCTYE html-->
<html>
<head>
    <script src=".\js\main_CasCode.js"></script>
</head>
<body onload="main()">
    <p>hi</p>
</body>
</html>

代码B：执行document.write()后

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
</html>

文件中的JavaScript .\js\main_CasCode.js

function main() {
    //console.log = function() {};
    loadjQuery();
    //waitjQueryLoaded_and_start();
}

function loadjQuery() {
    console.log("Loading jQuery...");
    var s = '<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>';
    document.write(s);  //<----Problem Here
}

Answer 1

这是因为document.write在文档完成渲染时擦除并重写文档（如onload之后）。它只会在渲染页面时调用时附加。

更好的方法是动态创建脚本元素，将其添加到页面，然后添加src来触发加载机制。

var script = document.createElement('script');
document.getElementsByTagName('head')[0].appendChild(script);
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';

在其他新闻中，为什么在控制页面时动态加载jQuery？为什么不直接在HTML上添加<script>？

Answer 2

我认为你根本不想使用document.write。您可以使用以下内容。创建一个脚本元素，并将其附加到head元素

var head = document.getElementsByTagName('head')[0]
var s = document.createElement('script')
s.src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
head.appendChild(s)

Answer 3

document.write会覆盖整个DOM

您可以创建一个功能

function loadjQuery() {
    console.log("Loading jQuery...");
    var scrpt = document.createElement('script');
    scrpt.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
    document.head.appendChild(scrpt);  
}

执行`document.write（）`后不完整的HTML

3 个答案: