에서를 사용하여 일부 스크립트를 페이지에로드하려고 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>답변:
DOM 텍스트로 삽입 한 스크립트 코드를 실행 하려면 eval () 을 사용해야 합니다.
MooTools가 자동으로이를 수행하므로 jQuery도 버전에 따라 다릅니다. jQuery 버전 1.6 이상은을 사용 eval합니다. 이렇게하면 <script>태그 를 파싱하고 콘텐츠를 빠져 나오는 많은 번거 로움 과 다른 "gotchas"를 줄일 수 있습니다.
당신이거야 일반적으로 경우에 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);" />
<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>요소 없이 JavaScript를 실행할 수 있습니다 . 예 <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 divinnerHTML에서이 문제가 발생하여 Reactjs 애플리케이션의 "head"태그에 Hotjar 스크립트를 추가해야했으며 추가 직후 실행해야했습니다.
"헤드"태그로 동적 노드를 가져 오기위한 좋은 솔루션 중 하나는 React-helment 모듈입니다.
또한 제안 된 문제에 대한 유용한 솔루션이 있습니다.
innerHTML에 스크립트 태그가 없습니다!
HTML5에서는 innerHTML 속성을 사용하여 스크립트 태그를 동적으로 추가 할 수 없습니다. 따라서 다음이 실행되지 않으며 Hello World!라는 경고가 표시되지 않습니다.
element.innerHTML = "<script>alert('Hello World!')</script>";이것은 HTML5 사양에 설명되어 있습니다.
참고 : innerHTML을 사용하여 삽입 된 스크립트 요소는 삽입 될 때 실행되지 않습니다.
그러나 이것이 innerHTML이 사이트 간 스크립팅으로부터 안전하다는 것을 의미하지는 않습니다. MDN의 innerHTML 페이지 에 설명 된대로 태그를 사용하지 않고 innerHTML을 통해 JavaScript를 실행할 수 있습니다 .
솔루션 : 동적으로 스크립트 추가
스크립트 태그를 동적으로 추가하려면 새 스크립트 요소를 작성하여 대상 요소에 추가해야합니다.
외부 스크립트에 대해이 작업을 수행 할 수 있습니다.
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)
});
}실제 구현에서 이것을 단순화 했으므로 버그가 없다고 약속하지 않습니다. 그러나 원리는 효과가 있습니다.
스크립트가 실행 된 후 다시 값을 얻는 것에 신경 쓰지 않으면 훨씬 쉽습니다. Promiseand 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').. 그리고 나서 beval 외부에서 접근을 시도 하십시오 .... 행운을 빌어 요, 당신은 그것을 필요로 할 것입니다
Krasimir Tsonev는 모든 문제를 극복 할 수있는 훌륭한 솔루션을 제공합니다. 그의 방법은 eval을 사용할 필요가 없으므로 성능이나 보안 문제가 없습니다. 내부 HTML 문자열에 js가 포함 된 html을 포함하도록 설정하고 즉시 DOM 요소로 변환하는 동시에 코드와 함께 존재하는 js 부분을 실행할 수 있습니다. 짧고 간단하며 원하는대로 정확하게 작동합니다.
그의 해결책을 즐기십시오.
http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element
중요 사항 :
사용하다 $(parent).html(code)대신에parent.innerHTML = code .
다음은 속성을 document.write통해로드 된 스크립트와 사용하는 스크립트도 수정 src합니다. 불행히도이 작업은 Google 애드 센스 스크립트에서 작동하지 않습니다.
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>스크립트 태그를 동적으로 삽입하고 싶을 때마다이 작업을 수행합니다.
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요소가 문서에 추가 될 때마다 새 요소가 추가되는 것을 알 수 있습니다. Btw, 왜 내 코드가 작동하지 않는다고 생각합니까?
나에게 가장 좋은 방법은 innerHtml을 통해 새 HTML 내용을 삽입 한 다음 사용하는 것입니다
setTimeout(() => {
var script_el = document.createElement("script")
script_el.src = 'script-to-add.js'
document.body.appendChild(script_el)
}, 500)setTimeout은 필요하지 않지만 더 잘 작동합니다. 이것은 나를 위해 일했습니다.
innerHTML에서 (Java Script) 태그 실행
클래스 속성이 class = "javascript"인 스크립트 요소를 div로 바꾸고 </div>
실행하려는 컨텐츠를 변경하지 마십시오 (이전의 스크립트 태그 및 현재 div 태그)
페이지에 스타일 추가 ...
<style type="text/css"> .javascript { display: none; } </style>
이제 jquery를 사용하여 eval을 실행하십시오 (Jquery js가 이미 포함되어 있어야 함)
$('.javascript').each(function() {
eval($(this).text());
});`내 블로그에서 자세한 내용을 확인할 수 있습니다 .