Warum führt innerHTML keine Skripte aus und wie kann ich das beheben?-js-Tutorial-php.cn

Warum führt innerHTML keine Skripte aus und wie kann ich das beheben?

Mary-Kate Olsen

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

Original

167 Leute haben es durchsucht

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

Skripterstellung mit innerHTML: Eine Problemumgehung für Browser-Ausführungsbeschränkungen

Beim Versuch, Skripte dynamisch in eine Webseite zu laden, können Entwickler das verwenden innerHTML-Eigenschaft von HTML-Elementen wie

. Es wird jedoch häufig beobachtet, dass der Skriptinhalt zwar im DOM der Seite angezeigt wird, in Browsern wie Firefox und Chrome jedoch nicht ausgeführt wird.

Um dieses Problem zu beheben, wurde eine rekursive Methode entwickelt, die nicht ausführbare Skripte effektiv ersetzt mit ausführbaren Gegenstücken. Diese unten beschriebene Methode gewährleistet eine originalgetreue Ausführung beim Einfügen über 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';
}

Nach dem Login kopieren

Verwendung: Durch Aufrufen der nodeScriptReplace()-Methode für das Body-Element des Dokuments werden alle nicht ausführbaren Skripte durch ihre ersetzt ausführbare Gegenstücke, die eine nahtlose Skriptausführung ermöglichen:

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

Nach dem Login kopieren

Diese Technik umgeht effektiv die Einschränkungen des Browsers hinsichtlich der Skriptausführung beim Einfügen über innerHTML und ermöglicht so Entwickler können Skripte nach Bedarf dynamisch laden und ausführen.

Das obige ist der detaillierte Inhalt vonWarum führt innerHTML keine Skripte aus und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!