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
Detaillierte Erläuterung des Problems des unendlichen Neustarts beim Ausführen der Docker-Umgebung des SpringBoot-Projekts
Vielleicht habe ich angefangen, falsch zu denken,...
Die Rolle und Öffnung des MySQL-Protokolls für langsame Abfragen
Vorwort Das MySQL Slow Query Log ist ein Protokol...
Native JS-Implementierung des Ladefortschrittsbalkens
Dieser Artikel zeigt einen Spezialeffekt für dyna...
Detaillierte Erläuterung der Tomcat-Konfigurations- und Optimierungslösungen
Service.xml Die Konfigurationsdatei Server.xml wi...
Schritte zum Anpassen der Knoteninstallation, um den Standardinstallationspfad globaler NPM-Module zu ändern
Ich habe Node auf dem Laufwerk D installiert und ...
So laden Sie Projekte im Linux-System in die Code Cloud hoch
Erstellen Sie ein neues Projekt test1 auf Code Cl...
Der Unterschied zwischen VOLUME und docker -v in Dockerfile
Es gibt offensichtliche Unterschiede zwischen der...
Detaillierter Prozess zur Verwendung von VMware zum Testen des PXE-Batchinstallationsservers
Inhaltsverzeichnis 1. Vorbereitung 1. Bereiten Si...
Installieren und Konfigurieren von MySQL unter Linux
System: Ubuntu 16.04LTS 1\Laden Sie mysql-5.7.18-...
Detaillierte Erklärung dieses Zeigeproblems in JavaScript
Vorwort Der This-Zeiger in JS hat Anfängern schon...
Zusammenfassung der Ausführungsprobleme zwischen MySQL Max und Where
Ausführungsproblem zwischen MySQL Max und Where S...
Tutorial zur Installation von Elasticsearch 7.6.2 in Docker
Docker installieren Sie müssen Docker installiere...
Details zur React Routing Link-Konfiguration
1. Link zum Attribut (1) Platzieren Sie den Routi...
Erstellen Sie Schritt für Schritt ein Dateiverwaltungssystem mit nginx+FastDFS
Inhaltsverzeichnis 1. Einführung in FastDFS 1. Ei...
Ein praktischer Bericht über die Prüfung und Bearbeitung doppelter MySQL-Datensätze vor Ort
Inhaltsverzeichnis Vorwort analysieren Daten insg...