为了账号安全,请及时绑定邮箱和手机立即绑定

执行插入.innerHTML的<script>元素

/ 猿问

执行插入.innerHTML的<script>元素

眼眸繁星 2019-06-17 17:27:13

执行插入.innerHTML的<script>元素

我有一个脚本,它可以在元素中插入一些内容innerHTML.

例如,内容可以是:

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

问题是,<script>标签不会被执行。我搜索了一下,但没有明显的解决方案。如果我使用jQuery插入内容$(element).append(content);剧本部分eval在被注入DOM之前。

是否有人获得执行所有<script>元素?jQuery代码有点复杂,所以我无法真正弄清楚它是如何完成的。

编辑:

通过查看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>


查看完整描述

3 回答

?
狐的传说

OP的脚本在IE 7中不起作用。在它的帮助下,下面是一个脚本:

exec_body_scripts: function(body_el) {
  // Finds and executes scripts in a newly added element's body.
  // Needed since innerHTML does not run scripts.
  //
  // Argument body_el is an element in the dom.

  function nodeName(elem, name) {
    return elem.nodeName && elem.nodeName.toUpperCase() ===
              name.toUpperCase();
  };

  function evalScript(elem) {
    var data = (elem.text || elem.textContent || elem.innerHTML || "" ),
        head = document.getElementsByTagName("head")[0] ||
                  document.documentElement,
        script = document.createElement("script");

    script.type = "text/javascript";
    try {
      // doesn't work on ie...
      script.appendChild(document.createTextNode(data));      
    } catch(e) {
      // IE has funky script nodes
      script.text = data;
    }

    head.insertBefore(script, head.firstChild);
    head.removeChild(script);
  };

  // main section of function
  var scripts = [],
      script,
      children_nodes = body_el.childNodes,
      child,
      i;

  for (i = 0; children_nodes[i]; i++) {
    child = children_nodes[i];
    if (nodeName(child, "script" ) &&
      (!child.type || child.type.toLowerCase() === "text/javascript")) {
          scripts.push(child);
      }
  }

  for (i = 0; scripts[i]; i++) {
    script = scripts[i];
    if (script.parentNode) {script.parentNode.removeChild(script);}
    evalScript(scripts[i]);
  }};


查看完整回答
反对 回复 2019-06-17
?
RISEBY

下面是一个非常有趣的解决您的问题的方法:http:/24ways.org/2005/拥有您的地址和脚本-it-也是

所以看起来应该是这样:

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


查看完整回答
反对 回复 2019-06-17
?
慕田峪4524236

下面是一个更短、更高效的脚本,它也适用于src财产:

function insertAndExecute(id, text) {
    document.getElementById(id).innerHTML = text;
    var scripts = Array.prototype.slice.call(document.getElementById(id).getElementsByTagName("script"));
    for (var i = 0; i < scripts.length; i++) {
        if (scripts[i].src != "") {
            var tag = document.createElement("script");
            tag.src = scripts[i].src;
            document.getElementsByTagName("head")[0].appendChild(tag);
        }
        else {
            eval(scripts[i].innerHTML);
        }
    }}

注:同时eval如果使用不当,则会导致安全漏洞。比动态创建脚本标记更快。


查看完整回答
反对 回复 2019-06-17

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信