警告:从异步加载的外部脚本调用document.write()被忽略.这是如何解决的

Warning: A call to document.write() from an asynchronously-loaded external script was ignored. How is this fixed?

本文关键字：解决 何解决 write 异步 加载 外部 document 调用 脚本 警告      更新时间：2023-09-26

在我的Ruby on Rails应用程序中，我使用Facebox插件作为Ajax弹出窗口。这两页分别是add_retail_stores/new.html.erb和add_retail_stores/new.js。new.js页继承了new.html.erb页的所有元素，所以看起来完全一样。我有一个谷歌地图脚本的HTML页面上的工作，因为它应该。但是new.js页面在我的另一个页面上弹出add_store_prices.html.erb页面(<%= link_to add_retail_store_path, :remote => true %>)

我得到错误:

警告:从异步加载的外部脚本调用document.write()被忽略。源文件:http://localhost:3000/add_store_prices线:0

我相信是因为它试图通过两个函数/脚本。第一个用于Facebox，然后是Google脚本。有人知道如何处理这个错误吗?

编辑:

我相信Facebox插件正在使用document.write，但我不确定在哪里，也许在我的页面上的这2行之一?

new.js: 

$.facebox('<%= escape_javascript(render :template => 'business_retail_stores/new.html') %>')
$('#facebox form').data('remote','true');

不要使用document.write。脚本是异步加载的，这意味着它与文档解析状态是分离的。JS引擎根本没有办法知道文档的位置。写应该在页面中执行。

外部脚本可以立即加载和文档。write在<script src="...">标记所在的地方执行，或者它可能碰到一个网。一小时后打嗝并载入，也就是说文件。Write在页面的末尾被标记。这实际上是一个竞争条件，所以JS引擎会忽略document。从异步加载的脚本中写入。

转换文档

使用document.onload类型处理程序保护的常规DOM操作。

如果您可以访问有问题的.js文件，您的最佳解决方案是修改"document.write()"方法并将其替换为任何有意义的方法，以便分发其中包含的内容。

原因如上所述。

如果您正在使用文档。Write将HTML标签写入页面:

document.write("<script src=...></script>");

或

document.write("<img href=... />");

考虑使用与您已经使用的相同类型的异步格式:

// Add/Remove/Sugar these components to taste
script = document.createElement("script");
script.onload = function () { namespaced.func.init(); };    
script.src = "http://...";
document.getElementsByTagName("script")[0].parentNode.appendChild(script);

如果您想要添加供用户查看和交互的DOM元素，那么您最好使用:

a)按id抓取特定的容器(section/div)，并附加您的内容: 
document.getElementById("price").innerHTML = "<span>$39.95</span>";
b)在dom之外构建内容并将其注入到容器中: 
var frag = document.createDocumentFragment(),
    span = document.createElement("span");
span.innerText = "39.95";
frag.appendChild(span);
document.getElementById("price").appendChild(frag);

再一次，糖按你的喜好。

如果你不能修改第二个。js文件，我建议你和他们一起修改

我有同样的问题加载谷歌地图与地方库。我临时覆盖write函数，在头部创建一个新的脚本元素。

(function() {
  var docWrite = document.write;
  document.write = function(text) {
    var res = /^<script[^>]*src="([^"]*)"[^>]*><'/script>$/.exec(text);
    if (res) {
      console.log("Adding script " + res[1]);
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement("script");
      script.src = res[1];
      head.appendChild(script);
    } else {
      docWrite(text);
    }
  }
})();

现在我要做的就是异步加载一个脚本

document.write('<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>');
相关文章：