Tôi đã cố tải một số tập lệnh vào một trang bằng cách sử dụng innerHTMLtrên a <div>. Có vẻ như tập lệnh tải vào DOM, nhưng nó không bao giờ được thực thi (ít nhất là trong Firefox và Chrome). Có cách nào để có các script thực thi khi chèn chúng vào innerHTMLkhông?
Mã mẫu:
<!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>Câu trả lời:
Bạn phải sử dụng eval () để thực thi bất kỳ mã tập lệnh nào bạn đã chèn dưới dạng văn bản DOM.
MooTools sẽ tự động làm điều này cho bạn và tôi chắc chắn jQuery cũng vậy (tùy thuộc vào phiên bản. Phiên bản jQuery 1.6+ sử dụng eval). Điều này giúp tiết kiệm rất nhiều rắc rối khi phân tích <script>thẻ và thoát nội dung của bạn, cũng như một loạt các "gotchas" khác.
Nói chung, nếu bạn eval()tự mình làm điều đó, bạn muốn tạo / gửi mã tập lệnh mà không có bất kỳ đánh dấu HTML nào <script>, vì những điều này sẽ không eval()đúng.
<script>thẻ innerHTMLcó thể ngắn, nhưng nó không hoạt động. Tất cả chỉ là văn bản đơn giản cho đến khi nó được chạy qua eval(). Và thật đáng buồn, eval()không phân tích các thẻ HTML, vì vậy bạn kết thúc với một chuỗi các vấn đề.
Đây là một giải pháp rất thú vị cho vấn đề của bạn: http://24ways.org/2005/have-your-dom-and-script-it-too
Vì vậy, sử dụng này thay vì các thẻ script:
<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />
onloadthuộc tính. Ngoài ra, điều này đòi hỏi một tập tin bổ sung để tồn tại và được tải. giải pháp của mẹ là ít thỏa hiệp.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">(điều này sẽ không thực hiện yêu cầu mạng) Trên thực tế ... bạn KHÔNG cần hình ảnh, tham chiếu hình ảnh không tồn tại và thay vì onloadsử dụng onerror(nhưng điều này sẽ thực hiện yêu cầu mạng)
Đây là một phương pháp thay thế đệ quy tất cả các tập lệnh bằng các tập lệnh thực thi:
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;
}Cuộc gọi ví dụ:
nodeScriptReplace(document.getElementsByTagName("body")[0]);Bạn có thể tạo tập lệnh và sau đó tiêm nội dung.
var g = document.createElement('script');
var s = document.getElementsByTagName('script')[0];
g.text = "alert(\"hi\");"
s.parentNode.insertBefore(g, s);Điều này hoạt động trong tất cả các trình duyệt :)
document.documentElementthay thế.
<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>các yếu tố. Ví dụ <img onerror="..." src="#">và <body onload="...">. Nếu bạn muốn có kỹ thuật, điều này sẽ không hoạt động trong các tài liệu không phải HTML / SVG do không gian tên không rõ ràng.
Tôi đã sử dụng mã này, nó đang hoạt động tốt
var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
eval(arr[n].innerHTML)//run script inside divTôi gặp vấn đề này với InternalHTML, tôi đã phải thêm tập lệnh Hotjar vào thẻ "head" của ứng dụng Reactjs của mình và nó sẽ phải thực thi ngay sau khi nối thêm.
Một trong những giải pháp tốt để nhập Node động vào thẻ "head" là mô-đun React-helment .
Ngoài ra, có một giải pháp hữu ích cho vấn đề được đề xuất:
Không có thẻ script trong InternalHTML!
Hóa ra HTML5 không cho phép các thẻ script được thêm động bằng cách sử dụng thuộc tính InternalHTML. Vì vậy, những điều sau đây sẽ không được thực thi và sẽ không có cảnh báo nào nói Hello World!
element.innerHTML = "<script>alert('Hello World!')</script>";Điều này được ghi lại trong thông số HTML5:
Lưu ý: các phần tử tập lệnh được chèn bằng InternalHTML không thực thi khi chúng được chèn.
Nhưng hãy cẩn thận, điều này không có nghĩa là InternalHTML an toàn khỏi kịch bản chéo trang. Có thể thực thi JavaScript thông qua InternalHTML mà không cần sử dụng các thẻ như được minh họa trên trang InternalHTML của MDN .
Giải pháp: Tự động thêm tập lệnh
Để tự động thêm thẻ tập lệnh, bạn cần tạo một phần tử tập lệnh mới và nối nó vào phần tử đích.
Bạn có thể làm điều này cho các tập lệnh bên ngoài:
var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);Và các tập lệnh nội tuyến:
var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript);
target.appendChild(newScript);Đối với bất cứ ai vẫn cố gắng làm điều này, không, bạn không thể tiêm một tập lệnh bằng cách sử dụng innerHTML , nhưng có thể tải một chuỗi vào thẻ tập lệnh bằng cách sử dụng BlobvàURL.createObjectURL .
Tôi đã tạo một ví dụ cho phép bạn chạy một chuỗi dưới dạng tập lệnh và nhận được 'xuất' tập lệnh được trả về thông qua một lời hứa:
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)
});
}Tôi đã đơn giản hóa điều này từ việc triển khai thực tế của mình, vì vậy không có hứa hẹn rằng sẽ không có bất kỳ lỗi nào trong đó. Nhưng nguyên tắc hoạt động.
Nếu bạn không quan tâm đến việc lấy lại bất kỳ giá trị nào sau khi tập lệnh chạy, điều đó thậm chí còn dễ dàng hơn; chỉ cần bỏ đi Promisevà onloadbit. Bạn thậm chí không cần phải bọc tập lệnh hoặc tạo window.__load_script_exports_tài sản toàn cầu .
Đây là một hàm đệ quy để đặt bên trongHTML của một phần tử mà tôi sử dụng trong máy chủ quảng cáo của chúng tôi:
// 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);
}
}Bạn có thể xem bản demo ở đây .
Ở đây một giải pháp không sử dụng evalvà hoạt động với các tập lệnh , tập lệnh được liên kết , cũng như với các mô-đun .
Hàm chấp nhận 3 tham số:
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)')và bạn sẽ thấy một sự khác biệt rõ ràng nhất
eval('let b=100').. và sau đó thử truy cập btừ bên ngoài eval .... chúc may mắn với nó, bạn sẽ cần nó
Krasnodal Tsonev có một giải pháp tuyệt vời khắc phục mọi vấn đề. Phương pháp của anh ta không cần sử dụng eval, vì vậy không có vấn đề về hiệu năng cũng như bảo mật tồn tại. Nó cho phép bạn thiết lập chuỗi InternalHTML chứa html với js và dịch nó ngay lập tức sang một phần tử DOM trong khi cũng thực thi các phần js tồn tại dọc theo mã. ngắn gọn, đơn giản và hoạt động chính xác như bạn muốn.
Thưởng thức giải pháp của anh ấy:
http://krasimirtsonev.com/blog/article/Convert-HTML-opes-to-DOM-element
Lưu ý quan trọng:
Sử dụng $(parent).html(code)thay vìparent.innerHTML = code .
Sau đây cũng sửa các tập lệnh sử dụng document.writevà tập lệnh được tải thông qua srcthuộc tính. Thật không may, ngay cả điều này không hoạt động với các tập lệnh 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
})
}Hãy thử sử dụng template và document.importNode. Đây là một ví dụ:
<!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>Bạn cũng có thể gói <script>như thế này và nó sẽ được thực thi:
<your target node>.innerHTML = '<iframe srcdoc="<script>alert(top.document.title);</script>"></iframe>';Xin lưu ý: Phạm vi bên trong srcdocđề cập đến iframe, vì vậy bạn phải sử dụng topnhư trong ví dụ trên để truy cập tài liệu gốc.
Có, bạn có thể, nhưng bạn phải làm điều đó bên ngoài DOM và thứ tự phải đúng.
var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
var n = document.createElement("div");
n.innerHTML = scr;
document.body.appendChild(n);
}... sẽ cảnh báo 'foo'. Điều này sẽ không hoạt động:
document.getElementById("myDiv").innerHTML = scr;Và thậm chí điều này sẽ không hoạt động, bởi vì nút được chèn trước:
var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
var n = document.createElement("div");
document.body.appendChild(n);
n.innerHTML = scr;
}Giải pháp của tôi cho vấn đề này là đặt Trình quan sát đột biến để phát hiện <script></script>các nút và sau đó thay thế nó bằng một <script></script>nút mới có cùng src. Ví dụ:
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});Việc đề cập đến MutingObservers của Gabriel Garcia đang đi đúng hướng, nhưng không hiệu quả lắm đối với tôi. Tôi không chắc đó là do lỗi trình duyệt hay do lỗi của tôi, nhưng phiên bản cuối cùng hoạt động với tôi là như sau:
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});
};Tất nhiên, bạn nên thay thế element_to_watchbằng tên của phần tử đang được sửa đổi.
node.parentElement.addedđược sử dụng để lưu trữ các thẻ script được thêm vào document.head. Trong chức năng được sử dụng để tải trang bên ngoài, bạn có thể sử dụng một cái gì đó như sau để loại bỏ các thẻ script không còn phù hợp:
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]);
}
}Và một ví dụ về sự khởi đầu của hàm tải:
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
}MutationObservermỗi khi một yếu tố được thêm vào tài liệu, phải không? Btw, tôi tự hỏi tại sao bạn nói mã của tôi không hoạt động.
Đối với tôi cách tốt nhất là chèn nội dung HTML mới thông qua InternalHtml và sau đó sử dụng
setTimeout(() => {
var script_el = document.createElement("script")
script_el.src = 'script-to-add.js'
document.body.appendChild(script_el)
}, 500)SetTimeout không bắt buộc nhưng nó hoạt động tốt hơn. Điều này làm việc cho tôi.
Thẻ Execute (Java Script) từ InternalHTML
Thay thế phần tử tập lệnh của bạn bằng div có thuộc tính lớp class = "javascript" và đóng nó bằng </div>
Không thay đổi nội dung mà bạn muốn thực thi (trước đây nó nằm trong thẻ script và bây giờ nó nằm trong thẻ div)
Thêm một kiểu trong trang của bạn ...
<style type="text/css"> .javascript { display: none; } </style>
Bây giờ hãy chạy eval bằng jquery (Jquery js đã được bao gồm)
$('.javascript').each(function() {
eval($(this).text());
});`Bạn có thể khám phá thêm ở đây , tại blog của tôi.