Startseite>Webdesign-Tutorial>WEB-Standardisierung

Iframe Framework -Seite zur Implementierung adaptiver hoher Lösung

Autor：Eve Cole Aktualisierungszeit：2025-02-05 14:05:58

Es gibt oft übergeordnete Seiten, die durch IFrame in eine andere Unterseite eingebettet werden müssen, und die Höhe des Iframe auf der übergeordneten Seite anhand der Höhe der untergeordneten Seite anpassen. Adaptive Ideen sind relativ einfach: Die Iframe -Höhe auf der übergeordneten Seite muss rechtzeitig entsprechend der Sub -Page -Höhe angepasst werden. Da JS -Operationen beteiligt sind, unterscheiden sich die adaptiven Lösungen verschiedener Domainnamen, hauptsächlich, um Cross -Domain -Probleme zu lösen.

Für die adaptive Höhe unter demselben übergeordneten Domain -Namen: www.chinaz.com/index.html Seite eingebettet in www.chinaz.com/xxx.html Seite

1.0 http://jipiao.taobao.com/index.htm Schlüsselcode

<iframe id = "j_selfadaping" src = "http://www.chinaz.com/xxx.htm" mce_src = "http://www.chinaz.com/xxx.htm" FrameBorder = "0" 0 "Scrolling =" no no "no noxxx.htm" Framborder = "0" 0 "scrolling =" no Noxxx. "Style =" Höhe: 0 "> </iframe>

Die Seite wird wie folgt hinzugefügt JS:

<MCE: Skript type = "text/javaScript"> <!--
(Function () {)
/**
* Holen Sie sich die aktuelle Domain
**//
Funktion _getDomain () {
var _hostname = window.location.hostname.toString ();
var _hosts = _hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{{
Return _hosts [_len-2]+"."+_ Hosts [_len-1];
}
Return_hostname;
}
document.ndsain = _getDomain ();
}) ();
// -> </mce: script>

2. Der folgende Code ist in die sub -Seite http://www.chinaz.com/xxx.htm eingebettet. Zu


<MCE: Skript type = "text/javaScript"> <!--
(Function () {)
/**
* Holen Sie sich die aktuelle Domain
**//
Funktion _getDomain () {
var _hostname = window.location.hostname.toString ();
var _hosts = _hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{{
Return _hosts [_len-2]+"."+_ Hosts [_len-1];
}
Return_hostname;
}

Window.onload = function () ()
{{{{
// Setzen Sie die Domäne der Kinderseite
document.ndsain = _getDomain ();
Function_seteight ()
{{{{
if (Window.Parent! = Fenster)
{{{{
versuchen
{{{{
// Stellen Sie die Höhe des übergeordneten Iframe -Level -Iframe ein
Parent.document.getElementById ("j_selfadaping").
}
fangen (e)
{{{{
}
}
// Richten Sie alle 2s ein, hauptsächlich, um die Höhe nach dem Laden der Seite zu ändern
setTimeout (_seteight, 2000);
}
// Rufen Sie nach dem Laden der Sub -Seite es einmal an
_SetHeight ();
}
}) ();
// -> </mce: script>

Verschiedene Seiten -Level -Seiten, wie z. htm 1. Schlüsselcode im Schlüsselcode unter www.chinaz.com/index.htm:


<iframe id = "j_elfadaping" src = "http://www.chinaz.com/xxxx.htm" mce_src = "http://www.chinaz.com/xxxx.htm" Frameborder = "0" 0 "0" 0 "NO no" no no "no no" no noxxxx.htm "Frameborder =" 0 "0" 0 "0" no "no no" nein nein "Style =" Höhe: 0 "> </iframe>

Fügen Sie wie folgt hinzu js:


  1. <MCE: Skript type = "text/javaScript" > <!--

  2. ( Function () {)

  3. /**

  4. * Holen Sie sich die aktuelle Domain

  5. **//

  6. Funktion _getDomain () {

  7. var _hostname = window.location.hostname.toString ();

  8. var _hosts = _hostname.split ( "." );

  9. var _len = _hosts.length;

  10. if (_len> 2) {{{{

  11. Return _Hosts [_len-2] + . " + _Hosts [_len-1];

  12. }

  13. Return_hostname ;

  14. }

  15. document.ndsain = _getDomain ();

  16. }) ();

  17. // -> </mce: script>

2. Schlüsselcode in www.chinaz.com/xxxx.htm:


<iframe scrolling = "no" Framborder = "0" style = "display: keine; http://www.chinaz.com/proxy.htm#597 "ID =" Taobaoiframe ">
</iframe>


<MCE: Skript type = "text/javaScript"> <!--
(Function () {)
var pageHeight = document.body.scrollHeight;
document.getElementById ('Taobaoiframe').
}) ();
// -> </mce: script>

3.. Alle Code im Proxy -Seitenbuch.chinaz.com/proxy.htm lautet wie folgt: wie folgt:


<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = gbk" />
</head>
<body>
<MCE: Skript type = "text/javaScript"> <!--
(Function () {)
/**
* Holen Sie sich die aktuelle Domain
**//
Funktion _getDomain () {
var _hostname = window.location.hostname.toString ();
var _hosts = _hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{{
Return _hosts [_len-2]+"."+_ Hosts [_len-1];
}
Return_hostname;
}
document.ndsain = _getDomain ();
var hohe = window.location.hash.substring (1);
versuchen {
var = window.top.document.getElementById ('j_selfadaping');
if (el) {{{{{
El.Style.Height = Höhe + 'PX';
}
}
fangen (e) {}
}) ();
// -> </mce: script>
</body>
</html>

Ähnliche Artikel