将外部 HTML 和 JS 注入页面

Question

我正在尝试构建一些网站管理员可以嵌入到他们网站中的小部件工具。

网站管理员有什么方法可以通过包含这样的脚本来简单地加载此工具？

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

我尝试通过在 AJAX 中加载它来注入它，然后在主体上执行 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);
}

内容变量包含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

更新

请看马克西姆斯的回答。

---

对，为了安全起见，默认的原生 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，但要小心，因为某些网站管理员可能会提供“副”代码