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
Eine kurze Analyse des Tutorials zur Installation von MySQL 8.0.18 auf CentOS 6.8 (RPM-Methode)
Heute werde ich aufzeichnen, wie man MySQL 8.0.18...
Lassen Sie uns ausführlich über den Symboldatentyp in ES6 sprechen
Inhaltsverzeichnis Symboldatentyp Der Grund, waru...
Detaillierte Erklärung des mysqlslap-Befehls und der Syntax für den integrierten Stresstest in MySQL 5.7
Vorwort mysqlslap ist ein Diagnoseprogramm, das d...
In einem Artikel erfahren Sie, wie Sie Vue-Frontend-Paging und Backend-Paging implementieren.
Inhaltsverzeichnis 1: Handschriftliche Seitennumm...
Einige wichtige Punkte des visuellen Website-Designs
Vom Kunsthandwerksdesign über Grafikdesign bis hin...
So sammeln Sie Nginx-Protokolle mit Filebeat
Mithilfe von Nginx-Protokollen lassen sich Benutz...
So ändern Sie den Bildlaufleistenstil in Vue
Inhaltsverzeichnis Zunächst müssen Sie wissen, da...
Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue
1. Häufig verwendete höherwertige Funktionen von ...
So schreiben Sie die übergeordneten und untergeordneten Verzeichnisse von relativen HTML-Pfaden
So geben Sie das übergeordnete Verzeichnis an ../ ...
Einführung in Kubernetes (k8s)
Ich wollte schon immer Kubernetes lernen, weil es...
Spezifische Schritte zur Verwendung des Vant-Frameworks im WeChat-Applet
Inhaltsverzeichnis 1. Öffnen Sie das Projektverze...
Verwenden Sie nginx, um virtuelle Hosts auf Domänennamenbasis zu konfigurieren
1. Was ist ein virtueller Host? Virtuelle Hosts v...
Diese Dinge wissen Sie vielleicht nicht über die automatische ID-Inkrementierung in MySQL
Einführung: Wenn wir MySQL zum Erstellen einer Ta...
So konfigurieren Sie NAS unter Windows Server 2019
Vorwort Dieses Tutorial installiert die neuste Ve...
Überblick und Anwendung von Positionsattributen (absolut|relativ|statisch|fest) in CSS
Schauen wir uns zunächst die Definition des Posit...