文档准备之前jQuery/JS加载内容

Question

我正在寻找一种解决方案（jQuery或纯JS），它允许在（！）DOM完全加载之前将HTML/JS-Content加载到给定的DIV中。

<script> 
$(document).ready(function() { 
var mywidth = $(window).width(); 
if(mywidth > 1000) { 
$("#mydiv").load("some_html_with_external_javascript.html"); 
} 
}); 

这工作正常 - 当然。但是如果加载的内容包含外部JS，则JS内容不会被执行。我需要像JS和PHP的混合，是这样的：

<div id="mydiv"> 
<script> 
var mywidth = $(window).width(); 
if(mywidth > 1000) { 
// <?php require_once "some_html_with_external_javascript.html"; ?> 
} 
</script> 
</div> 

Answer 1

您可以使用document.write为了做到这一点。只需在当前位置插入一个新的脚本标签，该标签在下一个（脚本）标签（与php代码非常相似）之前执行。根据你的问题，所请求的脚本是同步加载的。

的index.html：

<script> 
console.log("first") 
document.write('<script src="second.js"><\/script>') 
</script> 
<script> 
console.log("third") 
</script> 

second.js：

console.log("second") 

浏览器控制台将加载second.js第一记录 “第三” 之前。因此，输出，符合市场预期：

• “第一”
• “第二”
• “第三”

我想补充一点，同步加载应尽量避免，如果可能的话。这是一个巨大的性能瓶颈。