javascript - 在 doc : It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. 上执行写入

Question

我正在尝试在页面加载执行后加载某个脚本，如下所示:

function downloadJSAtOnload(){
            var element = document.createElement("script");
            element.src = "scriptSrc";
            document.body.appendChild(element);
        }

         if (window.addEventListener)
                  window.addEventListener("load", downloadJSAtOnload, false);
            else if (window.attachEvent)
                  window.attachEvent("onload", downloadJSAtOnload);
            else window.onload = downloadJSAtOnload;

虽然此脚本似乎执行并下载“scriptSrc”，并将其附加在 body 标记的末尾之前，但它会在控制台 (chrome) 中产生以下消息(不是错误)

无法在“文档”上执行“写入”:除非显式打开，否则无法从异步加载的外部脚本写入文档。

这到底是什么意思？我应该做些不同的事情吗？即使我得到了预期的行为？

Answer 1

异步加载的脚本可能会在文档完全解析并关闭后运行。因此，您不能在这样的脚本中使用 document.write()(从技术上讲您可以，但它不会执行您想要的操作)。

您需要通过创建 DOM 元素，然后使用 .appendChild() 将它们插入到特定的父元素中，用显式 DOM 操作替换该脚本中的任何 document.write() 语句 或 .insertBefore() 或设置 .innerHTML 或类似的直接 DOM 操作的某种机制。

例如，在内联脚本中代替这种类型的代码:

<div id="container">
<script>
document.write('<span style="color:red;">Hello</span>');
</script>
</div>

您可以使用它来替换动态加载脚本中上面的内联脚本:

var container = document.getElementById("container");
var content = document.createElement("span");
content.style.color = "red";
content.innerHTML = "Hello";
container.appendChild(content);

或者，如果容器中没有您需要追加的其他内容，您可以简单地这样做:

var container = document.getElementById("container");
container.innerHTML = '<span style="color:red;">Hello</span>';