Rumah >hujung hadapan web >tutorial js >Mengapa Skrip Tidak Dilaksanakan Apabila Menggunakan .innerHTML, dan Bagaimana Saya Boleh Membetulkannya?
Apabila menyuntik kandungan yang mengandungi
Untuk menangani masalah ini, penyelesaian melibatkan memanipulasi HTML yang disuntik secara terus, mewujudkan proses dinamik yang meniru tingkah laku lalai penyemak imbas untuk
Satu pendekatan, yang ditulis dalam ES6, memfokuskan pada penggunaan JavaScript tulen, tanpa perpustakaan luaran atau pengubahsuaian DOM yang rumit. Ia berulang melalui semua
function setInnerHTML(elm, html) { elm.innerHTML = html; Array.from(elm.querySelectorAll("script")) .forEach( oldScriptEl => { const newScriptEl = document.createElement("script"); Array.from(oldScriptEl.attributes).forEach( attr => { newScriptEl.setAttribute(attr.name, attr.value) }); const scriptText = document.createTextNode(oldScriptEl.innerHTML); newScriptEl.appendChild(scriptText); oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl); }); }
Untuk menggunakan penyelesaian ini, cuma gantikan tugasan .innerHTML semasa dengan panggilan ke setInnerHTML. Kod yang dikemas kini akan kelihatan seperti:
.innerHTML = HTML; // does *NOT* run `<script>` tags in HTML setInnerHTML(, HTML); // does run `<script>` tags in HTML
Atas ialah kandungan terperinci Mengapa Skrip Tidak Dilaksanakan Apabila Menggunakan .innerHTML, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!