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

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!