外部 javascripts 延迟加载。 SCRIPT src 属性不起作用？只有 IFRAME src 有效

Question

我正在尝试解决script id="img" 标签的问题。我在两个不同的页面上使用下面的两个脚本，但在这两种情况下脚本都不会加载。

在第一个示例中，IFRAMES 在 5 秒和 8 秒后完美加载，在第二个示例中都在 5 秒后加载，我也想加载 js 文件，但它们没有加载。

谁能帮我解决这个问题？我需要在代码中添加/修改什么才能使其正常工作？提前致谢。

示例 1

<script type="text/javascript">
window.onload = function() {
    setTimeout(function(){loadfunction('map','https://www.example1.com/maps/')},5000);
    setTimeout(function(){loadfunction('fbook','https://www.example2.com/')},8000);
    setTimeout(function(){loadfunction('img','https://www.mywebpage.com/img.js')},10000);
}
function loadfunction(id,url) {
    document.getElementById(id).src = url;
} 
</script>

下面的脚本做同样的事情，但在 5 秒内同时加载它们，但不是 img.js 文件，只有 iframe。

示例 2

<script type="text/javascript">
  window.onload = function() {
    setTimeout(loadfunction,5000)
 }
 function loadfunction() {
    document.getElementById("map").src = "https://www.example1.com/maps/"
    document.getElementById("fbook").src = "https://www.example2.com/"
    document.getElementById("img").src = "http://www.mywebpage.com/img.js"
 }
</script>

在两个页面的正文中，我都有下面的代码......

<iframe id="map" width="730" height="400" frameborder="0" style="border:0" allowtransparency="true"></iframe> 
<iframe id="fbook" width="730" height="400" frameborder="0" style="border:0" allowtransparency="true"></iframe>
<script id="img" type="text/javascript"></script>

Answer 1

脚本按照它们在 HTML 代码中出现的顺序执行。如果省略src，则script 标签之间的内容被解析为脚本。如果src存在，则加载脚本，忽略标签之间的内容。

无论你怎么做，你都不能在脚本被解析后改变它的内容。

最好的方法是创建一个新的脚本元素并给它一个src 属性，在window.onload 处理函数中是这样的：

setTimeout(function () {
    var script = document.createElement('script');
    script.src = 'https://www.mywebpage.com/img.js';
    document.body.appendChild(script);
}, 10000);