Implementierungscode für die adaptive IFrame-Größe

Implementierungscode für die adaptive IFrame-Größe
Seitendomänenbeziehung:

Die Hauptseite a.html gehört zur Domäne A: www.jb51.net
Die iFrame-Seite b.html gehört zur Domäne B: www.jb51.cn, vorausgesetzt, die Adresse lautet: http://www.jb51.cn/b.html

Ergebnis:

Die Seite a.html unter dem Domänennamen A bettet die Seite b.html unter dem Domänennamen B über ein Iframe ein. Da die Breite und Höhe von b.html unvorhersehbar sind und sich ändern, muss sich das Iframe in a.html an die Größe anpassen.

Die Art des Problems:

js hat ein Problem mit domänenübergreifendem Iframe-Zugriff. Um die Höhe und Breite des Iframes in a.html zu steuern, müssen Sie zuerst die Größe von b.html lesen. A und B gehören nicht zur selben Domäne. Aus Sicherheitsgründen schränkt der Browser den domänenübergreifenden Zugriff von js ein und kann die Höhe und Breite von b.html nicht lesen.

Lösung:

Stellen Sie sich vor, die Proxy-Seiten c.html und a.html gehören zur selben Domäne A. c.html ist eine von Domäne A bereitgestellte Zwischen-Proxy-Seite. Angenommen, die Adresse von c.html lautet: www.jb51.net/c.html. Sie ist dafür verantwortlich, die Werte für Breite und Höhe in location.hash zu lesen und dann die Breite und Höhe des Iframes in a.html unter derselben Domäne festzulegen.

Der Code lautet wie folgt:

ein.html-Code

Erstens führt a.html b.html über iframe ein
<iframe id=”b_iframe” Höhe=”0″ Breite=”0″ src=”http://www.jb51.cn/b.html” Frameborder=”nein” Grenze=”0px” Randbreite=”0″ Randhöhe=”0″ Scrollen=”nein” Transparenz zulassen=”ja” ></iframe>

b.html-Code

Code kopieren
Der Code lautet wie folgt:

<Skripttyp = "Text/Javascript">
var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth);
var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight);
var c_iframe = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height; //https://www.jb51.net/c.html#width|height”
}
</Skript>
<!--js liest die Breite und Höhe von b.html und setzt die gelesene Breite und Höhe auf den Hash des src von c.html, der zwischengeschalteten Proxy-Seite in derselben Domäne wie a.html-->
<iframe id=”c_iframe” Höhe=”0″ Breite=”0″ src=”https://www.jb51.net/c.html” Stil=”Anzeige: keine” ></iframe>

c.html-Code

Code kopieren
Der Code lautet wie folgt:

<Skripttyp = "Text/Javascript">
var b_iframe = parent.parent.document.getElementById("b_iframe");
var hash_url = fenster.standort.hash;
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = Hash-Breite;
b_iframe.style.height = Hash-Höhe;
</Skript>

Das Iframe in a.html kann sich an die Breite und Höhe von b.html anpassen.

Auf diese Weise können auch andere ähnliche Probleme im Zusammenhang mit domänenübergreifenden JS-Vorgängen gelöst werden.

<<:  1 Minute Vue implementiert Rechtsklickmenü

>>:  Mehrere Möglichkeiten zum Verschlüsseln und Entschlüsseln von MySQL (Zusammenfassung)

Artikel empfehlen

Auch Webdesigner müssen Web-Coding lernen

Oftmals wird nach der Fertigstellung eines Webdes...

Beispiel für den Aufbau eines Jenkins-Dienstes mit Docker

Ziehen Sie das Bild root@EricZhou-MateBookProX: D...

Docker-Verbindung – MongoDB-Implementierungsprozess und Codebeispiele

Nachdem der Container gestartet wurde Melden Sie ...

Überblick und Einführung in das Linux-Betriebssystem

Inhaltsverzeichnis 1. Was ist ein Betriebssystem?...

Deaktivieren Sie die IE-Bildsymbolleiste

Ich habe es gerade auf IE6 ausprobiert und die Sym...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17

In diesem Artikel wird die Installations- und Kon...

Zusammenfassung zur Verwendung von MySQL-Isolationsspalten und Präfixindizes

Inhaltsverzeichnis Datenspalten isolieren Präfixi...

js, um Drag & Drop-Sortierdetails zu erreichen

Inhaltsverzeichnis 1. Einleitung 2. Umsetzung 3. ...

So verstecken Sie RAR-Dateien in Bildern

Sie können dieses Logo lokal als .rar-Datei speic...

Beispielcode zur Implementierung einer schwebenden Seitenbox basierend auf JS

Wenn die Bildlaufleiste nach unten gezogen wird, ...

Einstellen der Engine MyISAM/InnoDB beim Erstellen einer Datentabelle in MySQL

Als ich MySQL konfiguriert habe, habe ich die Sta...

Eine kurze Diskussion über die Platzierung von Skripten in HTML

Früher dachte ich, dass Skripte überall in HTML p...