在文档上执行写入:除非明确打开，否则无法从异步加载的外部脚本写入文档.

问题描述

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

函数下载JSAtOnload(){var element = document.createElement("script");element.src = "scriptSrc";document.body.appendChild(element);}如果(window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);否则如果(window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);否则 window.onload = downloadJSAtOnload;

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

无法对文档"执行写入":除非明确打开，否则无法从异步加载的外部脚本写入文档.

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

解决方案

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

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

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

<脚本>document.write('<span style="color:red;">Hello</span>');

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

var container = document.getElementById("container");var content = document.createElement("span");content.style.color = "红色";content.innerHTML = "你好";container.appendChild(content);

或者，如果容器中没有其他您需要附加的内容，您可以简单地执行以下操作:

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

I am trying to load a certain script after page load executes, something like this:

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;

And while this script seems to execute and download 'scriptSrc', and append it right before the end of the body tag, it yields the following message (not an error) in the console (chrome)

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

What does this even mean? And am I supposed to do something differently? Even though I get the expected behavior?

解决方案

An asynchronously loaded script is likely going to run AFTER the document has been fully parsed and closed. Thus, you can't use document.write() from such a script (well technically you can, but it won't do what you want).

You will need to replace any document.write() statements in that script with explicit DOM manipulations by creating the DOM elements and then inserting them into a particular parent with .appendChild() or .insertBefore() or setting .innerHTML or some mechanism for direct DOM manipulation like that.

For example, instead of this type of code in an inline script:

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

You would use this to replace the inline script above in a dynamically loaded script:

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

Or, if there was no other content in the container that you needed to just append to, you could simply do this:

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

这篇关于在文档上执行写入:除非明确打开，否则无法从异步加载的外部脚本写入文档.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！