Mengapakah innerHTML Tidak Melaksanakan Skrip dan Bagaimana Saya Boleh Membetulkannya?

Skrip dengan innerHTML: Penyelesaian untuk Had Pelaksanaan Penyemak Imbas

Dalam percubaan untuk memuatkan skrip secara dinamik ke dalam halaman web, pembangun boleh menggunakan sifat HTML dalaman bagi elemen HTML, seperti

. Walau bagaimanapun, selalu diperhatikan bahawa walaupun kandungan skrip muncul dalam DOM halaman, ia tetap tidak dilaksanakan dalam penyemak imbas seperti Firefox dan Chrome.

Untuk menangani isu ini, kaedah rekursif telah direka yang menggantikan skrip tidak boleh laku secara berkesan dengan rakan sejawat boleh laku. Kaedah ini, yang digariskan di bawah, memastikan pelaksanaan yang setia selepas dimasukkan melalui innerHTML:

function nodeScriptReplace(node) {
  if (nodeScriptIs(node)) {
    node.parentNode.replaceChild(nodeScriptClone(node), node);
  } else {
    var i = -1, children = node.childNodes;
    while (++i < children.length) {
      nodeScriptReplace(children[i]);
    }
  }

  return node;
}

function nodeScriptClone(node) {
  var script = document.createElement("script");
  script.text = node.innerHTML;

  var i = -1, attrs = node.attributes, attr;
  while (++i < attrs.length) {
    script.setAttribute((attr = attrs[i]).name, attr.value);
  }
  return script;
}

function nodeScriptIs(node) {
  return node.tagName === 'SCRIPT';
}

Penggunaan: Dengan menggunakan kaedah nodeScriptReplace() pada elemen badan dokumen, semua skrip tidak boleh laku akan digantikan dengannya rakan sejawatan boleh laku, membolehkan pelaksanaan skrip lancar:

nodeScriptReplace(document.getElementsByTagName("body")[0]);

Ini teknik secara berkesan memintas pengehadan penyemak imbas mengenai pelaksanaan skrip apabila dimasukkan melalui innerHTML, membolehkan pembangun memuatkan dan melaksanakan skrip secara dinamik seperti yang dikehendaki.

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

firefox chrome html for while Property dom this innerHTML issue

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