0

问题：

为什么这不显示警报？我怎样才能做到这一点？

<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 响应。传统上我们只将 HTML 作为 AJAX 响应发送回，但我想在成功处理程序中执行 JS。无权访问 JS 文件，因此无法修改响应的处理方式。我只能处理成功处理程序调用的事实div.innerHTML='<my response>'

尽管它可能很愚蠢，但我希望在使用这些约束时能得到一些帮助！

类似链接：

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

动态添加的脚本不会执行

4

1 回答 1

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属性的脚本，并添加突变事件回退

于 2013-11-11T23:29:38.010 回答