执行使用 .innerHTML 插入<脚本>元素

javascript dom innerhtml eval

2022-08-30 03:01:01

我有一个脚本，可以使用.innerHTML

例如，内容可以是：

<script type="text/javascript">alert('test');</script>
<strong>test</strong>

问题是标记内的代码不会被执行。我用谷歌搜索了一下，但没有明显的解决方案。如果我使用jQuery插入内容，脚本部分在注入DOM之前得到了'd。<script>$(element).append(content);eval

有没有人得到一段执行所有元素的代码？jQuery代码有点复杂，所以我无法真正弄清楚它是如何完成的。<script>

编辑：

通过窥视jQuery代码，我设法弄清楚了jQuery是如何做到的，这导致了以下代码：

Demo:
<div id="element"></div>

<script type="text/javascript">
  function insertAndExecute(id, text)
  {
    domelement = document.getElementById(id);
    domelement.innerHTML = text;
    var scripts = [];

    ret = domelement.childNodes;
    for ( var i = 0; ret[i]; i++ ) {
      if ( scripts && nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
            scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
        }
    }

    for(script in scripts)
    {
      evalScript(scripts[script]);
    }
  }
  function nodeName( elem, name ) {
    return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
  }
  function evalScript( elem ) {
    data = ( elem.text || elem.textContent || elem.innerHTML || "" );

    var head = document.getElementsByTagName("head")[0] || document.documentElement,
    script = document.createElement("script");
    script.type = "text/javascript";
    script.appendChild( document.createTextNode( data ) );
    head.insertBefore( script, head.firstChild );
    head.removeChild( script );

    if ( elem.parentNode ) {
        elem.parentNode.removeChild( elem );
    }
  }

  insertAndExecute("element", "<scri"+"pt type='text/javascript'>document.write('This text should appear as well.')</scr"+"ipt><strong>this text should also be inserted.</strong>");
</script>

答案 1

简化的ES6版本@joshcomley的答案，并举例说明。

没有JQuery，没有库，没有eval，没有DOM更改，只有纯Javascript。

http://plnkr.co/edit/MMegiu?p=preview

var setInnerHTML = function(elm, html) {
  elm.innerHTML = html;
  Array.from(elm.querySelectorAll("script")).forEach( oldScript => {
    const newScript = document.createElement("script");
    Array.from(oldScript.attributes)
      .forEach( attr => newScript.setAttribute(attr.name, attr.value) );
    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
    oldScript.parentNode.replaceChild(newScript, oldScript);
  });
}

用法

$0.innerHTML = HTML;    // does *NOT* run <script> tags in HTML
setInnerHTML($0, HTML); // does run <script> tags in HTML

答案 2

这里有一个非常有趣的解决方案来解决你的问题：http://24ways.org/2005/have-your-dom-and-script-it-too

所以它看起来像这样：

<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />