Verwenden Sie js, um js-Funktionen in Iframe-Seiten aufzurufen
In letzter Zeit habe ich jeden Tag an meinen Abschlussarbeiten gearbeitet. Ich konnte es kaum erwarten, meine Fähigkeiten unter Beweis zu stellen und wieder eine Website zu gestalten. Plötzlich stieß ich auf ein Problem. Früher habe ich Webseiten immer im Internet Explorer ausgeführt, wenn ich sie gestaltet habe. Firefox habe ich nie in Betracht gezogen, geschweige denn Chrome. Aber jetzt ist es anders. Zumindest finde ich, dass Webseiten, die nicht mit Firefox kompatibel sind, extrem hässlich und unecht sind. Seit ich diese Idee habe, achte ich beim Gestalten von Seiten auf die Kompatibilität. Dieses Mal stieß ich auf ein Kompatibilitätsproblem. In HTML gibt es einen schwebenden Frame, <iframe>, mit dem eine Seite in die Seite eingebettet werden kann. Er eignet sich sehr gut zum Erstellen einer Frame-Seite, wie in der folgenden Abbildung gezeigt. Eine HTML-Seite ist in zwei Teile unterteilt, die linke Seite ist die Navigationsleiste und die rechte Seite der anzuzeigende Inhalt. Der Code lautet wie folgt: Der Code für die linke Spalte lautet: <IFRAME frameBorder=0 id=frmTitleLeft name=framLeft src="left.html" style="HÖHE: 100%; Breite: 180px;"> Mit left.html verbinden Die rechte Spalte ist ähnlich. Für die Seite, die ich erstellt habe, ist der Vorschaueffekt wie folgt:  Welche Art von Effekt kann nun erzielt werden, um einen praktischeren Effekt zu erzielen? Klicken Sie auf einen beliebigen Link und er wird in der rechten Spalte angezeigt. Offensichtlich muss er über js implementiert werden. Ich werde nicht viel über die ursprüngliche inkompatible Methode sagen. Bitte beachten Sie die folgenden Implementierungsschritte: 1. Holen Sie sich zuerst das richtige Spalten-Iframe-Objekt var frames=document.getElementById("frameid"); //frameid ist der ID-Name des Iframes in der rechten Spalte 2. Setzen Sie den Quellwert zurück frames.src=pageurl; //pageurl ist die Zielseite die angezeigt werden soll, damit der Seitensprung realisiert wird Aber da ist noch etwas. Wenn Sie darin eine Funktion aufrufen möchten, ist das nicht so einfach. Beispielsweise gibt es in der rechten Spalte eine Funktion right(). Ich möchte die Funktion right() im Link in der linken Spalte aufrufen. Wie kann ich das erreichen? 1. Zunächst wird der linke Frame in die Containerseite index.html eingebettet. Sie müssen daher zur Indexebene zurückkehren und das rechte Frame-Objekt abrufen. var frames=window.parent.window.document.getElementById("frameid"); 2. Um die Funktionen auf der Seite ausführen zu können, müssen Sie das Fensterobjekt abrufen. Hier gibt es ein wichtiges Objekt contentWindow. Nachdem Sie dieses Objekt abgerufen haben, können Sie die darin enthaltenen Funktionen ausführen, z. B. frames.inhaltsfenster.rechts(); Der obige Code ist mit IE6, Firefox3 und Chrome2.0 kompatibel und hat den Test erfolgreich bestanden. Ich habe IE7 nicht ausprobiert, aber es sollte kein Problem sein. |
<<: jQuery Canvas generiert ein Poster mit einem QR-Code
>>: Verwenden Sie Smart CSS, um Stile basierend auf der Scrollposition des Benutzers anzuwenden
Artikel empfehlen
So kommunizieren Sie zwischen dem WIN10-System und der internen Container-IP von Docker
1. Nach der Installation der Windows-Version von ...
Detaillierte Erklärung des Fortschrittsbalkens beim Laden von Webseiten (empfohlen)
(Wenn eine Webseite geladen wird, gibt es manchma...
Detaillierte Erläuterung der Idee der xshell-Remote-Anmeldung bei CentOS7 ohne Kennwortanmeldung
Lassen Sie mich zunächst über die allgemeine Idee...
So implementiert Webpack das Caching statischer Ressourcen
Inhaltsverzeichnis Einführung Unterscheiden Sie z...
Das WeChat-Applet implementiert einen einfachen Rechner
Der einfache Rechner des WeChat-Applets dient Ihn...
Vollständiger Schrittbericht der TabBar-Komponente der Vue-Kapselung
Inhaltsverzeichnis Umsetzungsideen: Schritt 1: Ko...
Detaillierte Erklärung zur Verwendung des MySQL-Sicherungsskripts mysqldump
In diesem Artikel wird das MySQL-Sicherungsskript...
MySQL 5.7.18 Installations-Tutorial und Problemübersicht
MySQL 5.7.18 Installation und Problemübersicht. I...
MySQL implementiert die Erhöhung oder Verminderung des angegebenen Zeitintervalls für alle Zeiten in der aktuellen Datentabelle (empfohlen)
Die Funktion DATE_ADD() addiert einem Datum ein a...
Implementierung der Installation und Deinstallation von CUDA und CUDNN in Ubuntu
Inhaltsverzeichnis Vorwort Installieren des Grafi...
So optimieren Sie die MySQL-Abfragegeschwindigkeit
In den vorherigen Kapiteln haben wir die Auswahl ...
Ein kurzer Vortrag über das Klonen von JavaScript
Inhaltsverzeichnis 1. Oberflächliches Klonen 2. T...
Vergleichen von Dokumentspeicherorten
<br />Ein toller Blogbeitrag von PPK vor zwe...
So implementieren Sie das Rasterlayout mit Intervallen perfekt auf der Seite
Typische Layoutbeispiele Wie im obigen Bild gezei...
Beispielcode zur Implementierung einer Mehrfachauswahl basierend auf einer verschachtelten Tabelle in ElementUI
Vorwort: Ich habe das geschrieben, weil ich meine...