Mengapakah innerHTML Tidak Melaksanakan Skrip dan Bagaimana Saya Boleh Membetulkannya?-tutorial js-php.cn

Mengapakah innerHTML Tidak Melaksanakan Skrip dan Bagaimana Saya Boleh Membetulkannya?

Mary-Kate Olsen

Lepaskan： 2024-12-25 08:40:10

asal

168 orang telah melayarinya

Why Doesn't innerHTML Execute Scripts, and How Can I Fix It?

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

Salin selepas log masuk

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

Salin selepas log masuk

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!