Bagaimanakah Saya Boleh Memastikan Skrip Dilaksanakan Apabila Menggunakan `innerHTML` dalam JavaScript?

Melaksanakan Skrip yang Disisipkan dengan .innerHTML

Memasukkan kandungan ke dalam elemen menggunakan innerHTML boleh menghadapi masalah apabila skrip dalam kandungan yang dimasukkan tidak dilaksanakan. Walaupun penyelesaian menggunakan jQuery atau eval wujud, berikut ialah coretan kod yang menangani isu ini menggunakan JavaScript tulen:

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);
  });
}

Fungsi ini mengambil elemen dan rentetan HTML sebagai parameter. Ia menggantikan innerHTML elemen dengan rentetan yang disediakan dan melelang ke atas mana-mana elemen skrip dalam HTML. Untuk setiap elemen skrip, ia mencipta elemen baharu dengan atribut dan teks skrip yang sama. Akhirnya, ia menggantikan elemen skrip lama dengan yang baharu.

Untuk menggunakan fungsi ini, cuma tetapkan innerHTML elemen:

.innerHTML = HTML;    // does *NOT* run <script> tags in HTML
setInnerHTML(, HTML); // does run <script> tags in HTML

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Skrip Dilaksanakan Apabila Menggunakan `innerHTML` dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!