Viele Menschen hatten schon immer die Idee, dass es großartig wäre, wenn sie Iframes nach Belieben bedienen könnten. Auf diese Weise haben statische Seiten die Möglichkeit, ein einheitliches mehrseitiges Layout zu implementieren, das der Einbindung und Anforderung dynamischer Seiten PHP, JSP und ASP im Hintergrund entspricht.
Mit Hilfe von Javascript können wir den Inhalt der HTML-Seite, auf die das Iframe-Objektattribut src verweist, wie einen Hintergrund dynamisch laden. Für einen solchen Vorgang ist die Bereitstellung von zwei Seiten erforderlich. Eine Seite ist die Seite, auf der sich der Iframe befindet ( Seitenname: iPage.html ), und die andere Seite ist die Seite, auf die das Iframe-Attribut src verweist ( Seitenname: srcPage.html ).
iPage.html, dom in <body>:
,<body>in
Lassen Sie uns besprechen, wie man die beiden oben genannten Seiten mit JS unter IE bedient, und dann Besprechen Sie die Methode von Firefox und geben Sie schließlich die Kompatibilität mit IE und Firefox an. Die Methode des Browsers zum Bedienen des Iframe-Objekts.
Jeder weiß, dass es sich bei iframe um ein nicht standardmäßiges HTML-Tag handelt, das vom IE-Browser gestartet wurde. Später unterstützte Mozilla auch dieses Tag. (Klatsch, hehe)
1. IE erhält es über document.frames["IframeName"]. Beispiel: Wir geben den Inhalt von h1 in srcPage.html in iPage.html aus:
Sie werden feststellen, dass das Hinzufügen von Code zur Seite scheinbar nicht das gewünschte Ergebnis liefert. Warum? Ich habe das noch nicht herausgefunden. Ich füge einfach window.onload hinzu und die Ausgabe wird angezeigt (Hinweis: JS-Code wird in dieses Ereignis geschrieben). Kann mir das jemand sagen, der davon weiß? Warum? Nach der Änderung wurde der Code unter IE ausgegeben, aber document.frames ist nicht unter Firefox definiert. Fehlermeldung
es
hat die Tests von ie6, ie7, firefox2.0 und firefox3.0 bestanden. hey-hey. (Nachdem ich online nachgeschaut habe, habe ich in Mozilla Firefox iframe.contentWindow.focus eine Pufferüberlauf-Schwachstelle gefunden, die das Risiko von Script-Injection-Angriffen birgt.
Später hörte ich, dass dies im Hintergrund verhindert werden konnte, und ich war erleichtert. Ich habe es jedoch immer noch Ich hoffe, dass die neue Version von Firefox das
Problem
Greifen Sie über contentWindow darauf zu. Die Knoten sind die gleichen wie zuvor.
Mozilla unterstützt den W3C-Standard für den Zugriff auf das Dokumentobjekt eines Iframes über IFrameElmRef.contentDocument . Durch den Standard können Sie ein Dokument weniger schreiben, Code:
Eine mit diesen beiden Browsern kompatible Methode ist jetzt verfügbar, nämlich die contentWindow-Methode.
hey-hey! Kann ich den Iframe nach Belieben betreiben? Wenn Sie sich immer noch unwohl fühlen, können Sie den Inhalt im Iframe sogar neu schreiben.
Über designMode (Festlegen des Dokuments auf bearbeitbaren Designmodus) und contentEditable (Festlegen des Inhalts auf bearbeitbar) können Sie den Inhalt im Iframe neu schreiben. Code:
beiden Objekten finden Sie unter: http://msdn.microsoft.com/en- . us/library/ms533720(VS.85).aspx
firebug testet die Leistung des obigen Codes, wie in der Abbildung gezeigt
Kommentieren Sie iObj.document.designMode = 'On';
iObj.document.contentEditable = true
;
Der Effekt hat sich nicht geändert und die Zeiteffizienz ist fast dreimal so hoch wie vor der Annotation. hey-hey. Diese beiden Objekte beziehen sich auf die Schreibmethoden einiger Leute im Internet, um den Inhalt im Iframe neu zu schreiben. Tatsächlich besteht keine Notwendigkeit, designMode und contentEditable zu verwenden, es sei denn, es bestehen andere Anforderungen.
Mit den oben genannten Prinzipien ist es ganz einfach, dies zu implementieren: Setzen Sie einfach den Höhenwert des Iframes auf den Höhenwert des darin enthaltenen Dokuments. Code:
wegen diesem Web-Fachbegriff, hey, stinkend!
Referenzmaterialien:
https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla
http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx