关于javascript:执行< script>

Executing <script> elements inserted with .innerHTML

我有一个脚本,它使用innerHTML将一些内容插入元素中。

例如,内容可以是:

1
2
<script type="text/javascript">;
test

问题是标记内的代码没有被执行。我在谷歌上搜索了一下,但没有明显的解决办法。如果我使用jquery $(element).append(content);插入内容,脚本部分在注入到DOM之前得到了eval

有没有人有执行所有元素的代码片段?jquery代码有点复杂,所以我无法真正了解它是如何完成的。

编辑:

通过查看jquery代码,我已经设法了解了jquery是如何做到这一点的,这导致了以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Demo:


<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>this text should also be inserted.");


@Phidah…这是一个非常有趣的解决你的问题的方法:http://24ways.org/2005/have-your-dom-and-script-it-too

所以,它看起来像这样: