Startseite>Webdesign-Tutorial>WEB-Standardisierung

Iframe-Frame-Seitenimplementierung, adaptive Höhenlösung

Autor：Eve Cole Aktualisierungszeit：2010-01-06 17:05:40

Oft muss eine übergeordnete Seite eine andere Unterseite über einen Iframe einbetten, und die Höhe des Iframes auf der übergeordneten Seite muss zeitnah an die Höhe der Unterseite angepasst werden, was erfordert, dass die Seite über eine adaptive Funktion verfügt. Die adaptive Idee ist relativ einfach: Die Höhe des Iframes auf der übergeordneten Seite muss rechtzeitig an die Höhe der untergeordneten Seite angepasst werden. Da es sich um JS-Operationen handelt, sind die adaptiven Lösungen für verschiedene Domänennamen unterschiedlich, hauptsächlich um domänenübergreifende Probleme zu lösen.

Für adaptive Höhe unter demselben übergeordneten Domainnamen: Die Seite www.chinaz.com/index.html bettet die Seite www.chinaz.com/xxx.html ein

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

<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxx.htm" mce_src="http://www.chinaz.com/xxx.htm" frameborder="0" scrolling="no " style="height:0;"></iframe>

Fügen Sie der Seite den folgenden JS hinzu:

<mce:script type="text/javascript"><!--
(Funktion(){
/**
* 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.domain = _getDomain();
})();
// --></mce:script>

2. Betten Sie den folgenden Code in die Unterseite http://www.chinaz.com/xxx.htm ein. Das ist es


<mce:script type="text/javascript"><!--
(Funktion(){
/**
* 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()
{
//Legen Sie die Domäne der Unterseite fest
document.domain=_getDomain();
function_setHeight()
{
if (window.parent != Fenster)
{
versuchen
{
//Legen Sie die Höhe des übergeordneten Iframes fest
parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';
}
fangen(e)
{
}
}
//Alle 2 Sekunden festlegen, hauptsächlich um mit Höhenänderungen nach dem Laden der Unterseite kompatibel zu sein.
setTimeout(_setHeight,2000);
}
//Wird einmal aufgerufen, nachdem die Unterseite geladen wurde
_setHeight();
}
})();
// --></mce:script>

Verschiedene übergeordnete Seiten wie www.chinaz.com, book.chinaz.com haben völlig unterschiedliche Domainnamen. Die Lösung besteht darin, eine Proxy-Seite www.chinaz.com/proxy.htm oder eine www.chinaz.com/index.htm-Seite zu verwenden Um das Buch .chinaz.com/xxxx.htm einzubetten, muss xxx.htm ausgeblendet und www.chinaz.com/proxy.htm als Proxy eingebettet werden. Sie können die Höhe am Ende www.chinaz.com/proxy schreiben .htm#500 , was 500 Pixel Höhe bedeutet.

1. Schlüsselcode auf der Seite www.chinaz.com/index.htm:


<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxxx.htm" mce_src="http://www.chinaz.com/xxxx.htm" frameborder="0" scrolling="no " style="height:0;"></iframe>

Fügen Sie den folgenden JS hinzu:


  1. <mce:script type= "text/javascript" ><!--
  2. ( Funktion (){
  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.domain = _getDomain();
  16. })();
  17. // --></mce:script>

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


<iframe scrolling="no" frameborder="0" style="display: none;" mce_style="display: none;" mce_src=" http://www.chinaz.com/proxy.htm#597" id="taobaoIframe">
</iframe>


<mce:script type="text/javascript"><!--
(Funktion(){
var pageHeight = document.body.scrollHeight;
document.getElementById('taobaoIframe').src = 'http://www.chinaz.com/proxy.htm#' + pageHeight;
})();
// --></mce:script>

3. Alle Codes auf der Proxy-Seite book.chinaz.com/proxy.htm lauten wie folgt:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<Körper>
<mce:script type="text/javascript"><!--
(Funktion(){
/**
* 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.domain = _getDomain();
var height = window.location.hash.substring(1);
versuchen{
var el = window.top.document.getElementById('J_selfAdapting');
if(el) {
el.style.height = Höhe + 'px';
}
}
fangen (e) {}
})();
// --></mce:script>
</body>
</html>

Ähnliche Artikel