Выполнение <script>элементов, вставленных с .innerHTML

Question

У меня есть скрипт, который вставляет некоторый контент в элемент, используя innerHTML.

Содержание может быть, например:

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

Проблема в том, что код внутри тега <script> не выполняется. Я немного погуглил, но очевидных решений не было. Если я вставил содержимое, используя jQuery $(element).append(content);, части скрипта получили eval 'd перед тем, как вводиться в 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>

Answer 1

Просто сделай:

document.body.innerHTML = '<img src="../images/loaded.gif" alt="" onload="alert(\'test\');this.parentNode.removeChild(this);" />';

Answer 2

Попробуйте, у меня это работает в Chrome, Safari и Firefox:

var script = document.createElement('script');
script.innerHTML = 'console.log("hi")';
document.body.appendChild(script); 
--> logs "hi"

Следует отметить, что следующий вложенный скрипт НЕ будет запускаться:

var script = document.createElement('div');
script.innerHTML = '<script>console.log("hi")</script>';
document.body.appendChild(script);
--> doesn't log anything

Для запуска скрипта он должен быть создан как узел, а затем добавлен как дочерний.Вы даже можете добавить скрипт в ранее введенный div, и он запустится (я сталкивался с этим раньше, когда пытался заставить работать код рекламного сервера):

var div = document.createElement('div');
div.id = 'test-id';
document.body.appendChild(div);
var script = document.createElement('script');
script.innerHTML = 'console.log("hi")';
document.getElementById('test-id').appendChild(script);
--> logs "hi"

Answer 3

Расширение от Ларри.Я сделал это рекурсивным поиском по всему блоку и дочерним узлам.
Сценарий теперь также будет вызывать внешние сценарии, указанные с параметром src.Скрипты добавляются к голове, а не вставляются и располагаются в порядке их нахождения.Так что конкретно порядок скриптов сохранен.И каждый скрипт выполняется синхронно, подобно тому, как браузер обрабатывает начальную загрузку DOM.Так что, если у вас есть блок сценария, который вызывает jQuery из CDN, а затем следующий узел сценария использует jQuery ... Нет проблем!О, и я пометил добавленные скрипты сериализованным идентификатором, основанным на том, что вы указали в параметре тега, чтобы вы могли найти то, что было добавлено этим скриптом.

Answer 4

Затягивающий ответ Lambder

document.body.innerHTML = '<img src="../images/loaded.gif" alt="" > onload="alert(\'test\');this.parentNode.removeChild(this);" />';

Вы можете использовать base64 образ для создания и загрузки вашего скрипта

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAADUlEQVQYV2P4//8/AwAI/AL+iF8G4AAAAABJRU5ErkJggg=="
    onload="var script = document.createElement('script');  script.src = './yourCustomScript.js'; parentElement.append(script);" />

Или, если у вас есть Iframe, вы можете использовать его вместо

<iframe src='//your-orginal-page.com' style='width:100%;height:100%'
    onload="var script = document.createElement('script');  script.src = './your-coustom-script.js'; parentElement.append(script);"
    frameborder='0'></iframe>

Answer 5

Благодаря скрипту Ларри, который отлично работал в IE10, я использовал это:

$('#' + id)[0].innerHTML = result;
$('#' + id + " script").each(function() { this.text = this.text || $(this).text();} );

Answer 6

Вот мое решение в недавнем проекте.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1 id="hello_world">Sample</h1>
<script type="text/javascript">
 var div = document.createElement("div");
  var t = document.createElement('template');
  t.innerHTML =  "Check Console tab for javascript output: Hello world!!!<br/><script type='text/javascript' >console.log('Hello world!!!');<\/script>";
  
  for (var i=0; i < t.content.childNodes.length; i++){
    var node = document.importNode(t.content.childNodes[i], true);
    div.appendChild(node);
  }
 document.body.appendChild(div);
</script>
 
</body>
</html>

Answer 7

Попробуйте функцию eval ().

data.newScript = '<script type="text/javascript">//my script...</script>'
var element = document.getElementById('elementToRefresh');
element.innerHTML = data.newScript;
eval(element.firstChild.innerHTML);

Это реальный пример проекта, который я разрабатываю. Благодаря этому посту

Answer 8

Мне нужно было что-то похожее, но мне нужно было, чтобы скрипт оставался или создавался заново в том же месте, что и исходный скрипт, поскольку мой сценарий нацелен на местоположение тега скрипта в DOM для создания / назначения элементов. Я также сделал скрипт рекурсивным, чтобы убедиться, что он также работает, если он более чем на один уровень ниже.

ПРИМЕЧАНИЕ: я использую const здесь, если у вас более старый браузер, просто используйте var.

    window.exec_body_scripts = function(body_el) {
        // ref: /2234691/vypolnenie-script-elementov-vstavlennyh-s-innerhtml based on Larry K's answer
        // 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.
        const
            type__Js = 'text/javascript',
            tagName__Script = 'script',
            tagName__Script__Upper = tagName__Script.toUpperCase();
        var scripts = [], script, i;
        function evalScript(elem) {
            var parent = elem.parentNode,
                data = (elem.text || elem.textContent || elem.innerHTML || ""),
                script = document.createElement(tagName__Script);

            script.type = type__Js;
            try {
                // doesn't work on ie...
                script.appendChild(document.createTextNode(data));
            } catch (e) {
                // IE has funky script nodes
                script.text = data;
            }
            // Make sure to re-insert the script at the same position
            // to make sure scripts that target their position
            // in the DOM function as expected.
            var parent = elem.parentNode;
            parent.insertBefore(script, elem);
            parent.removeChild(elem);
        };
        // Get all scripts (recursive)
        if (typeof (document.querySelectorAll) !== typeof (void 0)) {
            document.querySelectorAll('script').forEach((scr) => { if (!scr.type || scr.type.toLowerCase() === type__Js) scripts.push(scr); });
        }
        else {
            var children_nodes = body_el.childNodes, child;
            for (i = 0; children_nodes[i]; i++) {
                child = children_nodes[i];
                if (
                    child.nodeName
                    &&
                    child.nodeName.toUpperCase() === tagName__Script__Upper
                    &&
                    (
                        !child.type
                        ||
                        child.type.toLowerCase() === type__Js
                    )
                ) {
                    scripts.push(child);
                }
                // Recursive call
                window.exec_body_scripts(child);
            }
        }
        for (i = 0; scripts[i]; i++) {
            evalScript(scripts[i]);
        }
    };

Answer 9

Вы можете взглянуть на этот пост . Код может выглядеть так:

var actualDivToBeUpdated = document.getElementById('test');
var div = document.createElement('div');
div.innerHTML = '<script type="text/javascript">alert("test");<\/script>';
var children = div.childNodes;
actualDivToBeUpdated.innerHTML = '';
for(var i = 0; i < children.length; i++) {
    actualDivToBeUpdated.appendChild(children[i]);
}