Question

在完全重写div（其代码通过eval()加载）后，我使用<script>执行所有XMLHttpRequest个代码：

var arr = document.getElementById('idOfDIV').getElementsByTagName('script');
         for (var n = 0; n < arr.length; n++){
                try {
                 eval(arr[n].innerHTML);
                } catch(err) {
                console.log(err);
                }
        }

适用于内联脚本，但对以下脚本没有影响：

<script src="/path/to/externalScript.js"></script>

为什么？我可以强迫＆＃34;浏览器还加载并执行外部脚本吗？

注意：正如我所指出的，关于eval()执行字符串作为javascript的事实，问题可能看起来很奇怪＆＃34;我需要做的是，浏览器加载包含在＆＃34;粘贴＆＃34;中的外部脚本的力量。 DOM，并执行它们。

Answer 1

这是你可以做的一件事：

var html = "Some html with a script <script>alert('test');</script>";

var frag = parsePartialHtml(html);

fixScriptsSoTheyAreExecuted(frag);


document.body.appendChild(frag);


function fixScriptsSoTheyAreExecuted(el) {
  var scripts = el.querySelectorAll('script'),
      script, fixedScript, i, len;

  for (i = 0, len = scripts.length; i < len; i++) {
    script = scripts[i];

    fixedScript = document.createElement('script');
    fixedScript.type = script.type;
    if (script.innerHTML) fixedScript.innerHTML = script.innerHTML;
    else fixedScript.src = script.src;
    fixedScript.async = false;

    script.parentNode.replaceChild(fixedScript, script);
  }
}


function parsePartialHtml(html) {
  var doc = new DOMParser().parseFromString(html, 'text/html'),
      frag = document.createDocumentFragment(),
      childNodes = doc.body.childNodes;

  while (childNodes.length) frag.appendChild(childNodes[0]);

  return frag;
}

Answer 2

此标记：

<script src="/path/to/externalScript.js"></script>

有空的innerHTML，因此你无法评估内容

您可以做的是检查脚本是否具有src属性，并使用此src在头部添加脚本标记：

function addHeadScript = function(src){
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = src;
    head.appendChild(script);
}

...


for (var n = 0; n < arr.length; n++){
    if (arr[n].src != ""){
        addHeadScript(arr[n].src);
    }
    else {
        // Evaluate the script `innerHTML`   OR
        // Create a script tag in the head and set it's content equal to arr[n].innerHTML
    }
}

eval（）不执行外部（src = ...）脚本

2 个答案: