Mengapa Skrip dalam innerHTML Tidak Dilaksanakan dan Bagaimana Saya Boleh Membetulkannya?

Bagaimana untuk Melaksanakan Skrip yang Dimasukkan Menggunakan innerHTML?

Apabila menggunakan innerHTML untuk menyuntik kandungan ke dalam elemen, skrip yang disertakan dalam kandungan mungkin tidak dilaksanakan secara automatik. Ini berlaku kerana penyemak imbas tidak menilai skrip selepas ia dimasukkan menggunakan innerHTML.

Penyelesaian:

Untuk menyelesaikan masalah ini, anda boleh menggunakan JavaScript untuk mencipta semula setiap elemen skrip secara manual dan gantikan teg skrip asal dalam DOM. Berikut ialah penyelesaian dalam ES6:

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

Penggunaan:

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

Atas ialah kandungan terperinci Mengapa Skrip dalam innerHTML Tidak Dilaksanakan dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!