Bagaimana untuk Memastikan Skrip yang Disisipkan Secara Dinamik Melaksanakan Menggunakan .innerHTML?

Menilai Skrip yang Dimasukkan Secara Dinamik Menggunakan .innerHTML

Memasukkan kandungan ke dalam halaman web menggunakan .innerHTML kadangkala boleh menyebabkan masalah jika kandungan tersebut termasuk elemen. Ini kerana kod skrip dalam elemen ini mungkin tidak dilaksanakan secara automatik.

Untuk menyelesaikan isu ini, kami boleh melaksanakan skrip ini secara eksplisit. Mari kita terokai cara melakukannya dalam JavaScript:

Pelaksanaan 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); // Runs <script> tags in HTML

Skrip ini merentasi kandungan yang baru dimasukkan, mencari elemen dan mencipta elemen dengan atribut dan kod mereka. Ia kemudian menggantikan elemen dengan yang baharu ini, memastikan kod skrip dilaksanakan.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Skrip yang Disisipkan Secara Dinamik Melaksanakan Menggunakan .innerHTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!