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
Werfen wir einen Blick auf die Vorkompilierung von JavaScript (Zusammenfassung)
JS-Lauftrilogie js-Ausführungscode ist in drei Sc...
Saubere XHTML-Syntax
Das Schreiben von XHTML erfordert eine saubere HTM...
So erstellen Sie einen Flammeneffekt mit CSS
Unten beginnt der Haupttext. 123WORDPRESS.COM Her...
Einführung in Abfragebefehle für gespeicherte MySQL-Prozeduren
Wie unten dargestellt: Wählen Sie den Namen aus m...
Lösung für die Upload-Einschränkung von Element-ui-Uploaddateien
Frage Die Angabe des Typs der hochgeladenen Datei...
Analyse von drei Parametern des MySQL-Replikationsproblems
Inhaltsverzeichnis 01 sql_slave_skip_counter-Para...
Beispielcode zur Implementierung der olympischen Ringe mit reinem HTML+CSS
Rendern Code - Nehmen Sie die blauen und gelben R...
Erläuterung der Vorsichtsmaßnahmen für die Mysql-Master-Slave-Replikation
1. Fehler beim Verbinden mit Master 'x@xxxx:x...
Detaillierte Erläuterung der Sicherheitskonfigurationselemente des Docker-Daemons
Inhaltsverzeichnis 1. Testumgebung 1.1 CentOS 7 i...
So erstellen Sie ein Django-Projekt und stellen eine Verbindung zu MySQL her
1: django-admin.py startproject Projektname 2: CD...
CSS kompletter Parallax-Scrolling-Effekt
1. Was ist Beim Parallax-Scrolling handelt es sic...
Vue-Statusverwaltung: Verwendung von Pinia statt Vuex
Inhaltsverzeichnis 1. Was ist Pinia? 2. Pinia ist...
Implementierung der Clusterkonstruktion im Docker Redis5.0-Cluster
Systemumgebung: Ubuntu 16.04LTS In diesem Artikel...
Wie InnoDB Transaktionsisolationsebenen geschickt implementiert
Vorwort Im vorherigen Artikel „Detaillierte Erklä...
So lösen Sie das Problem, dass das Softwarepaket bei der Installation von Software unter Linux nicht vorhanden ist
Wenn das Softwarepaket nicht vorhanden ist, kann ...