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

Ответ 1

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

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

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

Ответ 2

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

Поэтому используйте это вместо script тегов:

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

Ответ 3

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

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

        return node;
}
function nodeScriptIs(node) {
        return node.tagName === 'SCRIPT';
}
function nodeScriptClone(node){
        var script  = document.createElement("script");
        script.text = node.innerHTML;
        for( var i = node.attributes.length-1; i >= 0; i-- ) {
                script.setAttribute( node.attributes[i].name, node.attributes[i].value );
        }
        return script;
}

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

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

Ответ 4

Вы можете создать script, а затем ввести содержимое.

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

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

Ответ 5

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

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

Ответ 6

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

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

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

    // create a promise which will resolve to the script '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 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 exports
    return promise;
}

...

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

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

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

Ответ 7

Вот рекурсивная функция для установки 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);
    }
}

Вы можете увидеть демо здесь.

Ответ 8

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

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

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

Важные замечания:

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

Ответ 9

Используйте $(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
    })
}

Источник

Ответ 10

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

  <! DOCTYPE html >
< & HTML GT;
< & головка GT;
< meta charset = "UTF-8" >
< & название GT; Образец </& название GT;
</головка >
& Л; тело >
< h1 id = "hello_world" > Образец </h1>
< script type = "text/javascript" >
 var div = document.createElement( "div" );
 var t = document.createElement('template');
 t.innerHTML = "Проверить вкладку Консоль для вывода javascript: Hello world!!! < br/> < script type = 'text/javascript' > console.log('Hello world!!!'); < \/сценарий >";
 
 for (var я = 0; я < t.content.childNodes.length; я ++) {
   var node = document.importNode(t.content.childNodes [i], true);
   div.appendChild(узел);
 }
 document.body.appendChild(дела);
</сценарий >
 
</тело >
</HTML>код>

Ответ 11

Вы можете сделать это так:

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

Ответ 12

Здесь решение, которое не использует 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;
}

Ответ 13

Да, вы можете, но вы должны сделать это за пределами 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;

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

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

Ответ 14

Упоминание Габриэля Гарсии о 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
}

Ответ 15

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

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

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

Ответ 16

Мое решение этой проблемы - настроить 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});

Ответ 17

Узлы сценария должны быть вставлены как узлы DOM, а не как часть innerHTML. Вы можете сделать это, просто заменив каждый узел сценария местозаполнителем, а затем заменив его обратно:

const div = document.createElement('div');

Array.from(this.el.querySelectorAll('script'))
    .forEach((s) => {
        s.parentNode.replaceChild(div, s);
        div.parentNode.replaceChild(s, div);
    });

хотя этот большой код не будет хорошо работать при встроенной onload.

Ответ 18

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

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

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

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

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

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

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

    });`

В моем блоге вы можете найти более здесь.

Ответ 19

Я пробовал это, и он работал. Спасибо @mwilcox.

var maint = document.getElementById("maint");
maint.innerHTML = '';
var inner = '<form >'+
    'add new member:-<br>'+
    '<input type="text" name="namea" placeholder="enter ur name">'+
    '</form >';

maint.innerHTML = inner;

Ответ 20

Добавьте тег в голову после ввода текста в innerHTML и он запустится