Bagaimana untuk Menjamin Pelaksanaan Skrip Sebaris Selepas Menggunakan innerHTML?

Teknik Melaksanakan Skrip Sebaris Menggunakan innerHTML

Memasukkan skrip ke dalam halaman web menggunakan innerHTML mempunyai hadnya. Walaupun skrip mungkin muncul dalam DOM, ia sering gagal untuk dilaksanakan secara automatik. Untuk menangani isu ini dan mendayakan pelaksanaan skrip semasa dimasukkan, kaedah tertentu boleh digunakan.

Kaedah: Gantikan Skrip Secara Rekursif

Pendekatan ini melibatkan menggantikan setiap elemen skrip sebaris dengan rakan sejawatan yang boleh dilaksanakan. Coretan kod berikut menunjukkan pelaksanaan:

function nodeScriptReplace(node) {
  if (nodeScriptIs(node) === true) {
    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';
}

Contoh Penggunaan:

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

Kaedah ini merentasi pepohon DOM secara rekursif, mengenal pasti dan menggantikan elemen skrip sebaris dengan yang boleh dilaksanakan, memastikan skrip dilaksanakan seperti yang diharapkan.

Atas ialah kandungan terperinci Bagaimana untuk Menjamin Pelaksanaan Skrip Sebaris Selepas Menggunakan innerHTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!