Dynamisches Einfügen von Javascript in HTML, das document.write verwendet

StackOverflow https://stackoverflow.com/questions/53945

  •  09-06-2019
  •  | 
  •  

Frage

Ich lade gerade ein Popup im Lightbox-Stil, das den HTML-Code aus einem XHR-Aufruf lädt.Dieser Inhalt wird dann in einem „modalen“ Popup angezeigt element.innerHTML = content Das funktioniert wie ein Zauber.

In einem anderen Abschnitt dieser Website verwende ich ein Flickr-„Badge“ (http://www.elliotswan.com/2006/08/06/custom-flickr-badge-api-documentation/), um Flickr-Bilder dynamisch zu laden.Dies erfolgt mithilfe eines Skript-Tags, das ein Flickr-Javascript lädt, das wiederum einige Aufgaben erledigt document.write Aussagen.

Beide funktionieren perfekt, wenn sie in den HTML-Code eingebunden werden.Nur beim Laden des Flickr-Badge-Codes innen In der Lightbox wird überhaupt kein Inhalt gerendert.Es scheint, dass es verwendet wird innerHTML schreiben document.write Anweisungen geht einen Schritt zu weit, aber ich kann in den Javascript-Implementierungen (FF2&3, IE6&7) keinen Hinweis auf dieses Verhalten finden.

Kann jemand klären, ob dies funktionieren sollte oder nicht?Danke.

War es hilfreich?

Lösung

Im Allgemeinen Script-Tags ausgeführt werden, nicht wenn innerHTML- verwenden. In Ihrem Fall ist das gut, weil der document.write Anruf alles zunichte machen würde, die bereits in der Seite ist. Doch das lässt Sie ohne alles, was HTML document.write sollte hinzuzufügen.

jQuery HTML Manipulationsmethoden für Sie Skripte in HTML ausführen, wird der Trick dann die Anrufe der Erfassung der HTML an der richtigen Stelle document.write und bekommen. Wenn es einfach genug ist, dann wie etwas, das wird tun: 

var content = '';
document.write = function(s) {
    content += s;
};
// execute the script
$('#foo').html(markupWithScriptInIt);
$('#foo .whereverTheDocumentWriteContentGoes').html(content);

Es wird allerdings kompliziert. Wenn das Skript auf einer anderen Domäne ist, wird es asynchron geladen werden, so dass Sie warten müssen, bis sie den Inhalt bekommen getan. Auch was ist, wenn es nur den HTML-Code in die Mitte des Fragments ohne Wrapperelement schreibt, können Sie einfach auswählen? writeCapture.js (vollständige Offenlegung: Ich schrieb es) behandelt alle diese Probleme. Ich würde empfehlen, es nur verwenden, aber zumindest können Sie den Code anschauen, um zu sehen, wie es alles behandelt.

EDIT:. Hier ist ein zeigen, was wie der Effekt klingt Sie wollen

Andere Tipps

Ich habe eine einfache Testseite, die das Problem veranschaulicht: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Document Write Testcase</title>
    </head>
    <body>
        <div id="container">
        </div>
        <div id="container2">
        </div>

        <script>
            // This doesn't work!
            var container = document.getElementById('container');
            container.innerHTML = "<script type='text/javascript'>alert('foo');document.write('bar');<\/script>";

            // This does!
            var container2 = document.getElementById('container2');
            var script = document.createElement("script");
            script.type = 'text/javascript';
            script.innerHTML = "alert('bar');document.write('foo');";
            container.appendChild(script);
        </script>
    </body>
</html>

Diese Seite Benachrichtigungen ‚bar‘ und druckt ‚foo‘, während ich es erwartet, dass auch Alarm ‚foo‘ und print ‚bar‘. Aber leider, da der script Tag Teil einer größeren HTML-Seite ist, kann ich nicht den Tag heraus und fügen Sie es wie im Beispiel oben. Nun, ich kann, aber das würde Scan innerHTML Inhalte für script Tags benötigen, und sie in der Zeichenfolge durch Platzhalter ersetzt und dann das Einfügen ihnen den DOM verwenden. Klingt nicht , die trivial.

Verwenden document.writeln(content); statt document.write(content).

Allerdings ist die beste Methode ist, mit der Verkettung von innerHTML, wie folgt aus: 

element.innerHTML += content;

Die element.innerHTML = content; Methode, die den alten Inhalt durch die neuen ersetzen wird, wird sie Ihre Elemente innerHTML- überschreiben!

Während die die += Operator in element.innerHTML += content; Ihren Text nach dem alten Inhalt hinzufügen. (Wie, welche document.write der Fall ist.)

document.write ist ungefähr so ​​veraltet wie es nur geht.Dank der Wunder von JavaScript können Sie dem jedoch einfach Ihre eigene Funktion zuweisen write Methode der document Objekt, das verwendet innerHTML auf ein Element Ihrer Wahl, um den bereitgestellten Inhalt anzuhängen.

Kann ich eine Klarstellung bekommen zunächst sicherzustellen, dass ich das Problem bekommen?

document.write Anrufe Inhalt an den Auszeichnungs an dem Punkt, in dem Markup hinzufügen, bei denen sie auftreten. Wenn Sie zum Beispiel in einer Funktion document.write Anrufe umfassen, ohne jedoch die Funktion an anderer Stelle nennen, an dem Punkt, in dem Markup die document.write Ausgabe ist die Funktion definiert nicht, wo es ist genannt passieren wird .

Daher wird für diese bei allen Flickr document.write Aussagen arbeiten müssen Teil des content in element.innerHTML = content sein. Ist dies definitiv der Fall ist?

Sie könnten schnell testen, ob dies soll überhaupt arbeiten, indem sie einen einzigen und einfachen document.write Aufruf im Hinzufügen von Inhalten, die als innerHTML gesetzt und sieht, was das bedeutet: 

<script>
  var content = "<p>1st para</p><script>document.write('<p>2nd para</p>');</script>"
  element.innerHTML = content;
</script>

Wenn das funktioniert, das Konzept der document.write inhaltlich Satz als innerHTML eines Elements arbeiten könnte funktionieren.

Mein Bauchgefühl ist, dass es nicht funktionieren wird, aber es sollte ziemlich einfach sein, das Konzept zu testen.

So haben Sie eine DOM-Methode verwenden ein script Element zu erstellen und fügen Sie, dass an ein vorhandenes Element und das verursacht dann der Inhalt des script Element angefügt auszuführen? Das klingt gut.

Sie sagen, dass der Script-Tag Teil einer größeren HTML-Seite ist und deshalb nicht ausgesondert werden kann. Können Sie nicht dem Skript-Tag eine ID geben und es Ziel? Ich bin wahrscheinlich etwas offensichtlich hier fehlt.

In der Theorie ja, ich kann auf diese Weise einen Skript-Tag heraus. Das Problem ist, dass wir möglicherweise Dutzende von Situationen, wo dies der Fall ist, so versuche ich, einen Grund oder Dokumentation dieses Verhalten zu finden.

Auch die script Tag scheint nicht ein Teil des DOM mehr zu sein, nachdem es geladen wird. In unserer Umwelt bleibt mein container div leer, so kann ich den script Tag nicht holen. Es sollte funktionieren, aber, weil in meinem Beispiel über dem Skript nicht ausgeführt wird, aber ist immer noch Teil des DOM.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top