jQuery / JS在文檔准備好之前加載內容

Question

我正在尋找一種解決方案（jQuery或純JS），該解決方案允許在完全加載DOM之前將HTML / JS內容加載到給定的DIV中。

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

效果很好-當然可以。 但是，如果加載的內容包含外部JS，則不會執行JS-Content。 我需要將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")

瀏覽器控制台將在登錄“ third”之前先加載second.js 。 因此，輸出是預期的：

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

我想補充一點，如果可能的話，應該避免同步加載。 這是一個巨大的性能瓶頸。