Я попытался загрузить некоторые скрипты на страницу с помощью innerHTML на <div>. Похоже, что script загружается в 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() для выполнения любого script кода, который вы вставили в виде текста DOM.
MooTools сделает это автоматически, и я уверен, что jQuery также будет (в зависимости от версии. jQuery версии 1.6+ использует eval). Это избавляет вас от необходимости разбирать теги <script> и избегать вашего контента, а также множество других "ошибок".
Как правило, если вы собираетесь eval() его самостоятельно, вы хотите создать/отправить код script без какой-либо разметки HTML, такой как <script>, так как они не будут eval() правильно.
Вот очень интересное решение вашей проблемы: http://24ways.org/2005/have-your-dom-and-script-it-too
Поэтому используйте это вместо script тегов:
<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />
Вот метод, который рекурсивно заменяет все скрипты исполняемыми:
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]);
Вы можете создать script, а затем ввести содержимое.
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
Для тех, кто все еще пытается это сделать, нет, вы не можете вводить 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_.
Вот рекурсивная функция для установки 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, поэтому никаких проблем с производительностью и безопасностью не существует. Это позволяет вам установить строку 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
})
}
Попробуйте использовать шаблон и 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>код> Вы можете сделать это так:
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 и работает со скриптами, связанными скриптами, а также с модулями.
Функция принимает 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;
}
Да, вы можете, но вы должны сделать это за пределами 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;
}
Упоминание Габриэля Гарсии о 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
}
Вы также можете обернуть ваш <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});
Узлы сценария должны быть вставлены как узлы 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.
Выполнить (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());
});`
В моем блоге вы можете найти более здесь.
Я пробовал это, и он работал. Спасибо @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;
Добавьте тег в голову после ввода текста в innerHTML и он запустится