将外部HTML注入页面(&J

Question

有没有办法让网站管理员通过包含这样的脚本来简单地加载这个工具呢？

<script src="http://mysite/widget.js"></script>

我试图通过在AJAX中加载它来注入它，然后在body上执行一个appendChild()，它是这样工作的，但是JS没有被执行。

要注入的内容：

<div>one div</div>
<script>alert('some js')</script>

widget.js

function load(content) {
  var $body = document.body,
      $div = document.createElement("div");
  $div.id = "widget";
  $div.innerHTML = content; 
  $body.appendChild($div);
}

content变量包含HTML和JS，但JS在注入时不会执行。

Answer 1

由于您不知道脚本将被添加到何处--添加到head或body标记--以及它将在什么时候执行，您需要确保DOM已准备就绪，因此：

 function load(content) {

    if (document.readyState === "complete" || document.readyState === "loaded") {
         // manipulate DOM
    } else {
       document.addEventListener('DOMContentLoaded', function() {
        // manipulate DOM
    })
}

此外，由于使用innerHTML添加的脚本元素不会执行，因此您必须使用eval，或者最好像这样创建一个脚本：

var s = document.createElement('script');
s.text = "alert(\"hi\");"
document.getElementsByTagName('head')[0].appendChild(s);

但是，没有必要添加<script>标记来执行模板中某些脚本，因为在添加DOM时脚本已经在运行了，所以要做所有必要的设置。

Answer 2

更新

请参阅Maximus的答案。

是的，为了安全起见，默认的原生innerHTML不会执行js。

jQuery或zepto $.fn.append()可以满足您的需求，原因如下(来自zepto源代码)

if (el.nodeName != null && el.nodeName.toUpperCase() === 'SCRIPT' &&
           (!el.type || el.type === 'text/javascript') && !el.src)
          window['eval'].call(window, el.innerHTML)

您可以在函数$.fn.append中看到，它将查看它是否是脚本，如果是，它将使用eval运行内容。您可能需要eval，但要小心，因为一些网站管理员可能会提供‘坏’代码