Question

问题：

为什么这不会显示警报？我怎么能这样做呢？

<script>
    function onSuccess() {
        var response= "<script> alert(1);</\script>";
        document.getElementById("xxx").innerHTML = response;
    }
</script>
<div id="xxx">existing text</div>
<button id="click" onclick="onSuccess();">click</button>

http://jsfiddle.net/7hWRR/1/

这只是我问题的简化版本。在我们的应用程序（特别是在一个非常古老的模块中）中，我们使用了一个古老的本土AJAX类，只有innerHTMLs所有AJAX响应。传统上我们只发送回来作为AJAX响应但是我想在成功处理程序中执行JS。我无法访问JS文件，因此无法修改响应的处理方式。我只能处理成功处理程序调用{{1}}

这一事实

尽管可能很愚蠢，但我希望能帮助我们使用这些限制！

类似链接：

Dynamically adding script element to a div does not execute the script

Dynamically added script will not execute

Answer 1

警告：在这里我假设已经插入结果的<div>已知。

一种可能的解决方案是使用MutationObserver（以及DOMNodeInserted事件来支持IE 9和10）以观察所述<div>对其内容的更改，并执行代码在任何插入的<script>标签上。

建立在你的jsFiddle上的例子：

watchNodeForScripts(document.getElementById("xxx"));

function watchNodeForScripts(scriptRecipient) {
  if ('MutationObserver' in window) {
    // Prefer MutationObserver: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
    watchUsingMutationObserver();
  } else {
    // Fallback to Mutation Events: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events
    watchUsingDeprecatedMutationEvents();
  }

  function watchUsingMutationObserver() {
    var observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        var i, addedNodes = mutation.addedNodes;

        for (i = 0; i < addedNodes.length; i++) {
          handleAddedNode(addedNodes[i]);
        }
      });
    });

    observer.observe(scriptRecipient, {
      childList: true
    });
  }

  function watchUsingDeprecatedMutationEvents() {
    scriptRecipient.addEventListener("DOMNodeInserted", function (event) {
      handleAddedNode(event.target);
    });
  }

  function handleAddedNode(node) {
    // Don't try to execute non-script elements
    if (!(node instanceof HTMLScriptElement)) return;

    // Don't try to execute linked scripts
    if (node.src !== "") return;

    // Use 'new Function' instead of eval to avoid
    // the creation of a (undesired) closure
    fn = new Function(node.textContent);
    fn.call(window);
  }
}

更新了小提琴：http://jsfiddle.net/7hWRR/13/

修改：将innerText更改为交叉兼容textContent。

Edit2 ：不要执行不在<script>元素内的代码。

Edit3 ：不要使用src属性执行脚本，并添加变异事件回退

将脚本动态添加到div不会执行脚本

1 个答案: