Question

在我的Ruby on Rails应用程序中，我使用Facebox plugin作为Ajax弹出窗口。我有两个名为add_retail_stores/new.html.erb和add_retail_stores/new.js的网页。 new.js页面会继承new.html.erb页面中的所有元素，因此它看起来非常相似。我在HTML页面上有一个Google地图脚本，可以正常工作。但在我的不同页面上弹出的new.js页面名为add_store_prices.html.erb页面（<%= link_to add_retail_store_path, :remote => true %>）

我收到错误：

警告：忽略了从异步加载的外部脚本调用document.write（）。源文件：http://localhost:3000/add_store_prices 行：0

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

编辑：

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

new.js：

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

Answer 1

不要使用document.write。该脚本是异步加载的，这意味着它与文档解析状态分离。对于JS引擎来说，确实知道应该在页面中执行document.write是非常方便的。

外部脚本可以即时加载，document.write可以在<script src="...">标记所在的位置执行，也可以在net.burp中运行并在一小时后加载，这意味着document.write会在最后标记的页面。它确实是竞争条件，因此JS引擎将忽略异步加载的脚本中的document.writes。

将document.write转换为使用常规DOM操作，由document.onload类型处理程序保护。

Answer 2

如果您有权访问相关的.js文件，那么最好的解决方案是修改“document.write（）”方法并将其替换为有意义的方法，以便分发其中包含的内容。< / p>

上面已经很好地描述了其原因。

如果您使用document.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);

再次，根据自己的喜好，糖。

如果您无法访问mod第二个.js文件，我建议您随身携带。

Answer 3

我在使用地方库加载谷歌地图时遇到了同样的问题。我暂时覆盖了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>');

警告：忽略了从异步加载的外部脚本调用document.write（）。这是如何解决的？

编辑：

3 个答案: