javascript - 执行动态注入(inject)的 <SCRIPT> 在 Firefox (47.0) 上不起作用

Question

我有一个从表单的 AJAX 调用返回的 HTML 片段

<SCRIPT src="..."  type="text/javascript"></SCRIPT>
<SCRIPT type="text/javascript">
 function showForumGrid()
 { ... };
 function f()
 { ...}
</SCRIPT>
<DIV id="div1">
 ...
  <IMG id="dummyBody" src="..." onload="showForumGrid()">
</DIV>

在 AJAX 调用处理程序中，我正在执行以下操作

var x=document.getElementById(snippet_container_id);

//$(x).html(ajaxData);

var domFragment = $.parseHTML($.trim(ajaxData),document,true);
$(x).empty();
$(x).prepend(domFragment);  

这在 Chrome 中运行良好，但在 Firefox 中我收到错误 ReferenceError: showForumGrid is not defined

Answer 1

这是因为当您附加 <script> 时文档中的节点，在文档被解析后，它们不会像以前那样被视为同步。
_{(即使设置 async attribute 也不起作用)}。

这是一个简化的例子:

var external = document.createElement('script');
var inner = external.cloneNode();
external.src = 'data:application/javascript,console.log("external")';
inner.innerHTML = 'console.log("inner")';

document.head.appendChild(external);
document.head.appendChild(inner);

不确定除了等待 load 还能做任何其他事情外部事件 _{(IE9+ 浏览器)} <script> , 或者设置一个循环检查是否 showForumGrid已定义 _{(如果您需要支持旧版浏览器)}。

var external = document.createElement('script');
var inner = external.cloneNode();
external.onload = function() {
  document.head.appendChild(inner)
}
external.src = 'data:application/javascript,console.log("external")';
inner.innerHTML = 'console.log("inner")';
document.head.appendChild(external)