Iframe Fensterhöhenhöhe Adaptive Implementierungsmethode

Autor：Eve Cole Aktualisierungszeit：2025-02-22 14:16:01

In Domaina index.html befindet sich eine Seite, die mit einem anderen.html in einer Seite in Domainb über Iframe verschachtelt ist

Da die Seite der anderen.html in Iframe angezeigt wird und der Inhalt der Seite dynamisch erhöht oder abnimmt. Jetzt muss der Iframe -Rolling -Balken entfernt werden

Aufgrund der Einschränkungen von homologen Strategien von JavaScript kann Cross -Domain -Operationen nicht durchgeführt werden, was das Problem schwieriger macht

Siehe Internet -Ansatz, stellen Sie eine Agenturseite oder den Agent.html vor, der zur Domaina gehört

Dann verwenden Sie in der anderen.html in DomainB Iframe, um Agent.html für verschachtelt zu machen

Okay, das ist jetzt der Fall:

Index.html verwendet iframe nested other.html

Other.html verwendet Iframe Nesting Agent.html

Der Grund für die Einführung des Dritterseiten -Agenten.html besteht darin, den Regeln der "homogenen Strategie" einzuhalten und die Übertragung von Parametern unter verschiedenen Domäne zu vervollständigen!

Unser letztendlicher Zweck ist es, die Rollstange zu entfernen und sicherzustellen, dass der gesamte Inhalt der eingebetteten Seite angezeigt wird

1. Die tatsächliche Höhe der tatsächlichen Höhe der anderen.html -Seite

2. Stellen Sie die Höhe auf der SRC -Eigenschaft des Iframe in seiner eingebetteten Stelle ein

3.. Interture den Höhenwert im SRC -Attribut des Iframe in Agent.html

Im folgenden Beispiel wird eine Technik verwendet, um die Verwendung von setInterval () zu vermeiden, um die Höhe des Iframe ständig festzulegen

Die Methode besteht darin, dem SRC von Iframe einen Zeitstempel hinzuzufügen, sodass der Browser jedes Mal den Agent.html neu laden kann

Lassen Sie dann die JS -Funktion in Agent.HML invokemethodintopWindow () ausgeführt

2 HTML in Domaina

index.html

Kopieren Sie den Code -Code wie folgt:

#{Erweitert 'main.html' /}

#{Title setzen: 'home' /}

<hr>

<div style = "color: rot; Schriftgewicht: fett"> 窗口自适应 --- 绕开同源策略的限制同时又利用同源策略同时又利用同源策略去掉 iframe 的滚动条，动态调整窗口的高度，让Es kann alle Inhalte der verschachtelten Seite </div> anzeigen

<!-Sie müssen die Höhe von Iframe-> dynamisch einstellen

</div>

Funktion Größe Größe (Höhe) {

// alarm ("Größe");

document.getElementsByName ("DomainB") [0] .Height = Höhe;

}

</script>

Agent.html

Kopieren Sie den Code -Code wie folgt:

<html>

<kopf>

<title> Titel hier einfügen </title>

</head>

<body>

Ich bin eine Proxy -Seite!

Window.onload = invokemethodintopWindow;

Funktion invokemethodintopWindow () {) {

// alarm ("Rufen Sie die Funktion in derselben Domäne auf, setzen Sie die Höhe von Iframe zurück");

var domain = document.ParentWindow;

var realHeight = domaina.location.hash.split ("#") [1];

// Letzter Schritt: Rufen Sie die Funktion des Fensters der oberen Ebene auf und setzen Sie die Höhe von Iframe zurück

Parent.Parent.Resize (realHeight);

// alarm ("realHeight:"+realHeight);

// alarm (document.ParentWindow.name); // Erhalten Sie den Namen des Fensters, in dem sich der Container befindet

// Fehler: // alarm (document.parentwindow.parent.name);

// alert (document.parentwindow.parent.parent.name); // Die obere Fensterebene gehört zur Domaina, sodass Sie es besuchen können

}

// Nach dem Einstellen des SRC -Attributs von IFrame mit verschiedenen Zeitstempeln müssen SetInterVal () nicht verwendet werden.

// setInterval ("invokemethodintopWindow ()", 100);

</script>

</body>

</html>

Other.html in Domainb

Kopieren Sie den Code -Code wie folgt:

<html>

<kopf>

<title> Titel hier einfügen </title>

</head>

<!-Seite eingebettet in eine Domäne->

<button type = "button" "onclick =" btnclick () "> Switch Display </button>