Heim >Web-Frontend >js-Tutorial >Warum führt innerHTML keine Skripte aus und wie kann ich das beheben?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-25 08:40:10188Durchsuche

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

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn