Rumah >hujung hadapan web >tutorial js >Mengapa Skrip Tidak Dilaksanakan Apabila Menggunakan .innerHTML, dan Bagaimana Saya Boleh Membetulkannya?

Mengapa Skrip Tidak Dilaksanakan Apabila Menggunakan .innerHTML, dan Bagaimana Saya Boleh Membetulkannya?

DDD
DDDasal
2024-12-14 17:37:11678semak imbas

Why Don't Scripts Execute When Using .innerHTML, and How Can I Fix It?

Melaksanakan Elemen dengan .innerHTML

Apabila menyuntik kandungan yang mengandungi teg ke dalam elemen menggunakan .innerHTML, skrip sering gagal untuk dilaksanakan. Isu ini timbul disebabkan sifat semula jadi .innerHTML, yang memasukkan HTML statik, menghalang penyemak imbas daripada menilai secara automatik skrip di dalamnya.

Untuk menangani masalah ini, penyelesaian melibatkan memanipulasi HTML yang disuntik secara terus, mewujudkan proses dinamik yang meniru tingkah laku lalai penyemak imbas untuk elemen.

Satu pendekatan, yang ditulis dalam ES6, memfokuskan pada penggunaan JavaScript tulen, tanpa perpustakaan luaran atau pengubahsuaian DOM yang rumit. Ia berulang melalui semua elemen dalam kandungan yang disuntik, mencipta elemen baharu dengan atribut dan kandungan teks yang sama.

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn