Можно ли вставлять скрипты с помощью innerHTML?

Вы должны использовать eval () для выполнения любого кода сценария, который вы вставили как DOM. текст.

MooTools сделает это за вас автоматически, и я уверен, что jQuery тоже (в зависимости от версии. JQuery версии 1.6+ использует eval). Это избавляет от лишних хлопот по синтаксическому анализу <script> тегов и экранированию вашего контента, а также от множества других "подводных камней".

Обычно, если вы собираетесь eval() это делать самостоятельно, вы хотите создать / отправить код сценария без какой-либо разметки HTML, такой как <script>, так как это не будет eval() должным образом.

Вот метод, рекурсивно заменяющий все скрипты исполняемыми:

function nodeScriptReplace(node) {
        if ( nodeScriptIs(node) === true ) {
                node.parentNode.replaceChild( nodeScriptClone(node) , node );
        }
        else {
                var i = -1, children = node.childNodes;
                while ( ++i < children.length ) {
                      nodeScriptReplace( children[i] );
                }
        }

        return node;
}
function nodeScriptClone(node){
        var script  = document.createElement("script");
        script.text = node.innerHTML;

        var i = -1, attrs = node.attributes, attr;
        while ( ++i < attrs.length ) {                                    
              script.setAttribute( (attr = attrs[i]).name, attr.value );
        }
        return script;
}

function nodeScriptIs(node) {
        return node.tagName === 'SCRIPT';
}

Пример вызова:

nodeScriptReplace(document.getElementsByTagName("body")[0]);

Вот очень интересное решение вашей проблемы: http://24ways.org/2005/have-your-dom-and-script-it-too

Так что используйте это вместо тегов скрипта:

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

Вы можете создать сценарий, а затем ввести контент.

var g = document.createElement('script');
var s = document.getElementsByTagName('script')[0];
g.text = "alert(\"hi\");"
s.parentNode.insertBefore(g, s);

Это работает во всех браузерах :)

Я использовал этот код, он работает нормально

var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div

У меня была эта проблема с innerHTML, мне пришлось добавить сценарий Hotjar в тег «head» моего приложения Reactjs, и он должен был выполняться сразу после добавления.

Одним из хороших решений для динамического импорта узлов в тег «head» является модуль React-helment.

Также есть полезное решение предложенной проблемы:

В innerHTML нет тегов скрипта!

Оказывается, HTML5 не позволяет динамически добавлять теги скриптов с помощью свойства innerHTML. Таким образом, следующее не будет выполнено, и не будет предупреждений с сообщением Hello World!

element.innerHTML = "<script>alert('Hello World!')</script>";

Это задокументировано в спецификации HTML5:

Примечание: элементы скрипта, вставленные с помощью innerHTML, не выполняются при вставке.

Но будьте осторожны, это не означает, что innerHTML защищен от межсайтовых сценариев. Можно выполнять JavaScript через innerHTML без использования тегов, как показано на MDN. страница innerHTML.

Решение: динамическое добавление скриптов

Чтобы динамически добавить тег скрипта, вам необходимо создать новый элемент скрипта и добавить его к целевому элементу.

Вы можете сделать это для внешних скриптов:

var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);

И встроенные скрипты:

var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript); 
target.appendChild(newScript);

Я делаю это каждый раз, когда хочу динамически вставить тег скрипта!

  const html =
    `<script>
        alert('???? there ! Wanna grab a ????'); 
    </script>`;

  const scriptEl = document.createRange().createContextualFragment(html);
  parent.append(scriptEl);

ПРИМЕЧАНИЕ. Используется ES6

РЕДАКТИРОВАТЬ 1: Разъяснение для вас, ребята - я видел много ответов, использующих appendChild, и хотел, чтобы вы, ребята, знали, что он работает точно так же, как append

Для тех, кто все еще пытается это сделать, нет, вы не можете внедрить скрипт, используя innerHTML, но можно загрузить строку в тег скрипта, используя Blob и URL.createObjectURL.

Я создал пример, который позволяет вам запустить строку как скрипт и получить «экспорт» скрипта, возвращенный через обещание:

function loadScript(scriptContent, moduleId) {
    // create the script tag
    var scriptElement = document.createElement('SCRIPT');

    // create a promise which will resolve to the script's 'exports'
    // (i.e., the value returned by the script)
    var promise = new Promise(function(resolve) {
        scriptElement.onload = function() {
            var exports = window["__loadScript_exports_" + moduleId];
            delete window["__loadScript_exports_" + moduleId];
            resolve(exports);
        }
    });

    // wrap the script contents to expose exports through a special property
    // the promise will access the exports this way
    var wrappedScriptContent =
        "(function() { window['__loadScript_exports_" + moduleId + "'] = " + 
        scriptContent + "})()";

    // create a blob from the wrapped script content
    var scriptBlob = new Blob([wrappedScriptContent], {type: 'text/javascript'});

    // set the id attribute
    scriptElement.id = "__loadScript_module_" + moduleId;

    // set the src attribute to the blob's object url 
    // (this is the part that makes it work)
    scriptElement.src = URL.createObjectURL(scriptBlob);

    // append the script element
    document.body.appendChild(scriptElement);

    // return the promise, which will resolve to the script's exports
    return promise;
}

...

function doTheThing() {
    // no evals
    loadScript('5 + 5').then(function(exports) {
         // should log 10
        console.log(exports)
    });
}

Я упростил это по сравнению с моей реальной реализацией, поэтому никаких обещаний, что в нем нет никаких ошибок. Но принцип работает.

Если вы не заботитесь о возвращении какого-либо значения после запуска сценария, это еще проще; просто оставьте биты Promise и onload. Вам даже не нужно оборачивать сценарий или создавать глобальное свойство window.__load_script_exports_.

Вот рекурсивная функция для установки innerHTML элемента, который я использую на нашем рекламном сервере:

// o: container to set the innerHTML
// html: html text to set.
// clear: if true, the container is cleared first (children removed)
function setHTML(o, html, clear) {
    if (clear) o.innerHTML = "";

    // Generate a parseable object with the html:
    var dv = document.createElement("div");
    dv.innerHTML = html;

    // Handle edge case where innerHTML contains no tags, just text:
    if (dv.children.length===0){ o.innerHTML = html; return; }

    for (var i = 0; i < dv.children.length; i++) {
        var c = dv.children[i];

        // n: new node with the same type as c
        var n = document.createElement(c.nodeName);

        // copy all attributes from c to n
        for (var j = 0; j < c.attributes.length; j++)
            n.setAttribute(c.attributes[j].nodeName, c.attributes[j].nodeValue);

        // If current node is a leaf, just copy the appropriate property (text or innerHTML)
        if (c.children.length == 0)
        {
            switch (c.nodeName)
            {
                case "SCRIPT":
                    if (c.text) n.text = c.text;
                    break;
                default:
                    if (c.innerHTML) n.innerHTML = c.innerHTML;
                    break;
            }
        }
        // If current node has sub nodes, call itself recursively:
        else setHTML(n, c.innerHTML, false);
        o.appendChild(n);
    }
}

Вы можете увидеть демонстрацию здесь.

Здесь решение, которое не использует eval и работает с сценариями, связанными сценариями, а также с модулями.

Функция принимает 3 параметра:

• html: строка с HTML-кодом для вставки.
• dest: ссылка на целевой элемент
• append: логический флаг для включения добавления в конец целевого элемента html.

function insertHTML(html, dest, append=false){
    // if no append is requested, clear the target element
    if(!append) dest.innerHTML = '';
    // create a temporary container and insert provided HTML code
    let container = document.createElement('div');
    container.innerHTML = html;
    // cache a reference to all the scripts in the container
    let scripts = container.querySelectorAll('script');
    // get all child elements and clone them in the target element
    let nodes = container.childNodes;
    for( let i=0; i< nodes.length; i++) dest.appendChild( nodes[i].cloneNode(true) );
    // force the found scripts to execute...
    for( let i=0; i< scripts.length; i++){
        let script = document.createElement('script');
        script.type = scripts[i].type || 'text/javascript';
        if( scripts[i].hasAttribute('src') ) script.src = scripts[i].src;
        script.innerHTML = scripts[i].innerHTML;
        document.head.appendChild(script);
        document.head.removeChild(script);
    }
    // done!
    return true;
}

Сделать это можно так:

var mydiv = document.getElementById("mydiv");
var content = "<script>alert(\"hi\");<\/script>";

mydiv.innerHTML = content;
var scripts = mydiv.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
    eval(scripts[i].innerText);
}

Отфильтруйте теги сценария и запустите каждый из них с помощью eval

var tmp=  document.createElement('div');
tmp.innerHTML = '<script>alert("hello")></script>';
[...tmp.children].filter(x => x.nodeName === 'SCRIPT').forEach(x => eval(x.innerText));

Да, вы можете, но вы должны делать это вне DOM, и порядок должен быть правильным.

var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
    var n = document.createElement("div");
    n.innerHTML = scr;
    document.body.appendChild(n);
}

... предупредит 'foo'. Это не сработает:

document.getElementById("myDiv").innerHTML = scr;

И даже это не сработает, потому что узел вставляется первым:

var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
    var n = document.createElement("div");
    document.body.appendChild(n);
    n.innerHTML = scr;  
}

У Красимира Цонева есть отличное решение, которое преодолевает все проблемы. Его метод не требует использования eval, поэтому нет проблем с производительностью или безопасностью. Он позволяет вам установить строку innerHTML, содержащую html с js, и немедленно преобразовать ее в элемент DOM, а также выполнить части js, существующие в коде. коротко, просто и работает именно так, как вы хотите.

Наслаждайтесь его решением:

http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element

Важные заметки:

1. Вам нужно обернуть целевой элемент тегом div
2. Вам нужно обернуть строку src тегом div.
3. Если вы пишете строку src напрямую и она включает части js, обратите внимание на правильность написания закрывающих тегов скрипта (с помощью \ before /), поскольку это строка.

Используйте $(parent).html(code) вместо parent.innerHTML = code.

Следующее также исправляет скрипты, которые используют document.write, и скрипты, загруженные через атрибут src. К сожалению, даже это не работает со скриптами Google AdSense.

var oldDocumentWrite = document.write;
var oldDocumentWriteln = document.writeln;
try {
    document.write = function(code) {
        $(parent).append(code);
    }
    document.writeln = function(code) {
        document.write(code + "<br/>");
    }
    $(parent).html(html); 
} finally {
    $(window).load(function() {
        document.write = oldDocumentWrite
        document.writeln = oldDocumentWriteln
    })
}

Источник

Попробуйте использовать шаблон и document.importNode. Вот пример:

<!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>

Вы также можете обернуть свой <script> вот так, и он будет выполнен:

<your target node>.innerHTML = '<iframe srcdoc="<script>alert(top.document.title);</script>"></iframe>';

Обратите внимание: область внутри srcdoc относится к iframe, поэтому вы должны использовать top, как в примере выше, для доступа к родительскому документу.

Мое решение этой проблемы - настроить Mutation Observer для обнаруживать <script></script> узлы и затем заменять его новым <script></script> узлом с тем же src. Например:

let parentNode = /* node to observe */ void 0
let observer = new MutationObserver(mutations=>{
    mutations.map(mutation=>{
        Array.from(mutation.addedNodes).map(node=>{
            if ( node.parentNode == parentNode ) {
                let scripts = node.getElementsByTagName('script')
                Array.from(scripts).map(script=>{
                    let src = script.src
                    script = document.createElement('script')
                    script.src = src
                    return script
                })
            }
        })
    })
})
observer.observe(document.body, {childList: true, subtree: true});

Упоминание Габриэлем Гарсией о MutationObservers находится на правильном пути, но не совсем сработало для меня. Я не уверен, было ли это из-за причуды браузера или из-за ошибки с моей стороны, но версия, которая в конечном итоге сработала для меня, была следующей:

document.addEventListener("DOMContentLoaded", function(event) {
    var observer = new MutationObserver(mutations=>{
        mutations.map(mutation=>{
            Array.from(mutation.addedNodes).map(node=>{
                if (node.tagName === "SCRIPT") {
                    var s = document.createElement("script");
                    s.text=node.text;
                    if (typeof(node.parentElement.added) === 'undefined')
                        node.parentElement.added = [];
                    node.parentElement.added[node.parentElement.added.length] = s;
                    node.parentElement.removeChild(node);
                    document.head.appendChild(s);
                }
            })
        })
    })
    observer.observe(document.getElementById("element_to_watch"), {childList: true, subtree: true,attributes: false});
};

Конечно, вы должны заменить element_to_watch именем изменяемого элемента.

node.parentElement.added используется для хранения тегов сценария, добавленных в document.head. В функции, используемой для загрузки внешней страницы, вы можете использовать что-то вроде следующего, чтобы удалить больше не актуальные теги скрипта:

function freeScripts(node){
    if (node === null)
        return;
    if (typeof(node.added) === 'object') {
        for (var script in node.added) {
            document.head.removeChild(node.added[script]);
        }
        node.added = {};
    }
    for (var child in node.children) {
        freeScripts(node.children[child]);
    }
}

И пример начала функции загрузки:

function load(url, id, replace) {
    if (document.getElementById(id) === null) {
        console.error("Element of ID "+id + " does not exist!");
        return;
    }
    freeScripts(document.getElementById(id));
    var xhttp = new XMLHttpRequest();
    // proceed to load in the page and modify innerHTML
}

Основываясь на комментарии Дэнни '365CSI' Энгельмана, вот универсальное решение:

<script>
  alert("This script always runs.");
  script01 = true;
</script>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
 onload="if(typeof script01==='undefined') eval(this.previousElementSibling.innerHTML)">

Используйте его как innerHTML (т.е. загруженный XMLHttpRequest) или напрямую (т.е. вставленный сервером PHP), скрипт всегда загружается один раз.

Объяснение: скрипт, загруженный как innerHTML, не выполняется, но атрибут содержимого загрузки выполняется. Если сценарий не был выполнен (добавлен как innerHTML), сценарий выполняется в событии загрузки изображения. Если скрипт был загружен (добавлен серверной частью), тогда определяется переменная script01, и onload не будет запускать скрипт во второй раз.

Выполнить тег (Java Script) из innerHTML

Замените элемент сценария на div с атрибутом класса class = "javascript" и закройте его с помощью </div>

Не меняйте контент, который вы хотите выполнить (раньше он был в теге скрипта, а теперь в теге div)

Добавьте стиль на свою страницу ...

<style type="text/css"> .javascript { display: none; } </style>

Теперь запустите eval с помощью jquery (Jquery js уже должен быть включен)

   $('.javascript').each(function() {
      eval($(this).text());

    });`

Вы можете узнать больше здесь, в моем блоге.

Для меня лучший способ - вставить новый HTML-контент через innerHtml, а затем использовать

setTimeout(() => {
        var script_el = document.createElement("script")
        script_el.src = 'script-to-add.js'
        document.body.appendChild(script_el)
    }, 500)

SetTimeout не требуется, но работает лучше. Это сработало для меня.