Я пытался загрузить некоторые скрипты на страницу, используя innerHTMLна <div>. Похоже, что скрипт загружается в DOM, но он никогда не выполняется (по крайней мере, в Firefox и Chrome). Есть ли способ выполнить сценарии при их вставке с помощью innerHTML?
Образец кода:
<!DOCTYPE html>
<html>
<body onload="document.getElementById('loader').innerHTML = '<script>alert(\'hi\')<\/script>'">
Shouldn't an alert saying 'hi' appear?
<div id="loader"></div>
</body>
</html>Ответы:
Вы должны использовать eval () для выполнения любого кода скрипта, который вы вставили как текст DOM.
MooTools сделает это за вас автоматически, и я уверен, что jQuery также сделает это (в зависимости от версии. Используется версия jQuery 1.6+ eval). Это избавляет от хлопот, связанных с разбором <script>тегов и экранированием вашего контента, а также с кучей других «ошибок».
Как правило, если вы собираетесь eval()это сделать самостоятельно, вы хотите создать / отправить код сценария без какой-либо разметки HTML, например <script>, так как это будет eval()некорректно.
<script>тега с innerHTMLможет быть коротким, но это не работает. Это все просто текст, пока он не пройдёт eval(). И, к сожалению, eval()не анализирует HTML-теги, так что вы столкнетесь с цепью проблем.
Вот очень интересное решение вашей проблемы: http://24ways.org/2005/have-your-dom-and-script-it-too
Так что используйте это вместо тегов скрипта:
<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />
onloadатрибута. Также для этого требуется дополнительный файл, чтобы существовать и быть загруженным. Решение Момо меньше компромисса.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">(это не будет выполнять сетевой запрос) На самом деле ... вам НЕ нужно изображение, ссылаться на несуществующий образ и вместо onloadиспользования onerror(но это будет делать сетевой запрос)
Вот метод, который рекурсивно заменяет все скрипты исполняемыми:
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]);Вы можете создать скрипт, а затем внедрить содержимое.
var g = document.createElement('script');
var s = document.getElementsByTagName('script')[0];
g.text = "alert(\"hi\");"
s.parentNode.insertBefore(g, s);Это работает во всех браузерах :)
document.documentElementвместо этого.
<script> var g = document.createElement('script'); var s = document.getElementsByTagName('script')[0]; //reference this script g.text = "alert(\"hi\");" s.parentNode.insertBefore(g, s); </script>
<script>элементов. Например <img onerror="..." src="#">и <body onload="...">. Если вы хотите быть техническим, это не будет работать в документах не HTML / SVG из-за неявного пространства имен.
Я использовал этот код, он работает нормально
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. Таким образом, следующее не будет выполнено, и не будет никакого предупреждения, говорящего Привет Мир!
element.innerHTML = "<script>alert('Hello World!')</script>";Это задокументировано в спецификации HTML5:
Примечание. Элементы сценария, вставленные с использованием innerHTML, не выполняются при вставке.
Но будьте осторожны, это не означает, что innerHTML безопасен от межсайтовых скриптов. Возможно выполнение JavaScript через innerHTML без использования тегов, как показано на странице innerHTML MDN .
Решение: динамическое добавление скриптов
Чтобы динамически добавить тег сценария, вам нужно создать новый элемент сценария и добавить его к целевому элементу.
Вы можете сделать это для внешних скриптов:
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);Для тех, кто все еще пытается это сделать, нет, вы не можете внедрить скрипт, используя 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 параметра:
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;
}eval('console.log(this)')и вы увидите самый очевидный из них
eval('let b=100')... и затем попытайтесь получить доступ bизвне eval .... удачи с ним, он вам понадобится
Красимир Цонев имеет отличное решение, которое преодолевает все проблемы. Его метод не требует использования eval, поэтому проблем с производительностью и безопасностью не существует. Это позволяет вам установить строку innerHTML, содержащую html с js, и немедленно преобразовать ее в элемент DOM, а также выполнить части js, существующие в коде. Короче говоря, просто и работает именно так, как вы хотите.
Наслаждайтесь его решением:
http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element
Важные заметки:
Используйте $(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
})
}Попробуйте использовать template и 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как в примере выше, чтобы получить доступ к родительскому документу.
Я делаю это каждый раз, когда хочу динамически вставить тег сценария!
const html =
`<script>
alert('👋 there ! Wanna grab a 🍺');
</script>`;
const scriptEl = document.createRange().createContextualFragment(html);
parent.append(scriptEl);ПРИМЕЧАНИЕ: ES6 используется
РЕДАКТИРОВАТЬ 1: Разъяснение для вас, ребята - я видел много ответов использовать appendChildи хотел, чтобы вы, ребята, знали, что это работает точно так же, какappend
Да, вы можете, но вы должны сделать это вне 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;
}Мое решение этой проблемы - установить 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
}MutationObserverкаждый раз, когда элемент добавляется в документ, верно? Кстати, мне интересно, почему вы говорите, мой код не работает.
Для меня лучший способ - вставить новый HTML-контент через innerHtml, а затем использовать
setTimeout(() => {
var script_el = document.createElement("script")
script_el.src = 'script-to-add.js'
document.body.appendChild(script_el)
}, 500)SetTimeout не требуется, но работает лучше. Это сработало для меня.
Выполнить (Java Script) тег из innerHTML
Замените ваш элемент скрипта на div с атрибутом class class = "javascript" и закройте его </div>
Не изменяйте содержимое, которое вы хотите выполнить (раньше это было в теге script, а теперь в теге div)
Добавить стиль на своей странице ...
<style type="text/css"> .javascript { display: none; } </style>
Теперь запустите eval, используя jquery (Jquery js должен быть уже включен)
$('.javascript').each(function() {
eval($(this).text());
});`Вы можете узнать больше здесь , в моем блоге.