[javascript] .innerHTML로 삽입 된 <script> 요소 실행

Program / 글쓴이

을 사용하여 요소에 일부 콘텐츠를 삽입하는 스크립트가 innerHTML있습니다.

예를 들어 내용은 다음과 같습니다.

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

문제는 <script>태그 안의 코드 가 실행되지 않는다는 것입니다. 나는 그것을 조금 봤지만 명백한 해결책이 없었다. jQuery를 사용하여 콘텐츠를 삽입하면 $(element).append(content);스크립트 부분이 evalDOM에 삽입되기 전에 ‘d’가 발생했습니다.

모든 <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>

답변

OP의 스크립트는 IE 7에서 작동하지 않습니다. SO의 도움으로 다음을 수행하는 스크립트가 있습니다.

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]);
  }
};

답변

@phidah … 다음은 문제에 대한 매우 흥미로운 해결책입니다.
http://24ways.org/2005/have-your-dom-and-script-it-too

따라서 대신 다음과 같이 보일 것입니다.

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

답변

다음은 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제대로 사용하지 않으면 보안 취약점이 발생할 수 있지만 스크립트 태그를 즉석에서 만드는 것보다 훨씬 빠릅니다.

답변

innerHTML 속성을 사용하지 말고 Node : 문서 트리의 노드 [HTML DOM]의 appendChild 메서드를 사용하면 안됩니다. 이렇게하면 나중에 삽입 된 코드를 호출 할 수 있습니다.

그것이과 node.innerHTML 같지 않다는 것을 이해했는지 확인하십시오 node.appendChild. 자세한 내용과 DOM에 대한 Javascript Client Reference에 시간을 할애 할 수 있습니다. 다음이 도움이되기를 바랍니다.

샘플 주입 작동 :

<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
    function doOnLoad(){
        addScript('inject',"function foo(){ alert('injected'); }");
    }


    function addScript(inject,code){
        var _in = document.getElementById('inject');
        var scriptNode = document.createElement('script');
        scriptNode.innerHTML = code;
        _in.appendChild(scriptNode);
    }

</script>
</head>
<body onload="doOnLoad();">
    <div id="header">some content</div>
    <div id="inject"></div>
    <input type="button" onclick="foo(); return false;" value="Test Injected" />
</body>
</html>

문안 인사,

답변

예제와 함께 @joshcomley의 답변의 단순화 된 ES6 버전.

JQuery 없음, 라이브러리 없음, 평가 없음, 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

답변

이 스 니펫을 시도하십시오.

function stripAndExecuteScript(text) {
    var scripts = '';
    var cleaned = text.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){
        scripts += arguments[1] + '\n';
        return '';
    });

    if (window.execScript){
        window.execScript(scripts);
    } else {
        var head = document.getElementsByTagName('head')[0];
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute('type', 'text/javascript');
        scriptElement.innerText = scripts;
        head.appendChild(scriptElement);
        head.removeChild(scriptElement);
    }
    return cleaned;
};


var scriptString = '<scrip' + 't + type="text/javascript">alert(\'test\');</scr' + 'ipt><strong>test</strong>';
document.getElementById('element').innerHTML = stripAndExecuteScript(scriptString);

답변

function insertHtml(id, html)  
{  
   var ele = document.getElementById(id);  
   ele.innerHTML = html;  
   var codes = ele.getElementsByTagName("script");   
   for(var i=0;i<codes.length;i++)  
   {  
       eval(codes[i].text);  
   }  
}

내 프로젝트의 Chrome에서 작동합니다.