Page d'accueil>Tutoriel de conception de sites Web>Normalisation WEB

solution de hauteur adaptative de mise en œuvre de page de cadre iframe

Auteur：Eve Cole Date de mise à jour：2010-01-06 17:05:40

Souvent, une page parent doit intégrer une autre sous-page via une iframe, et la hauteur de l'iframe dans la page parent doit être ajustée en temps opportun en fonction de la hauteur de la sous-page, ce qui nécessite que la page ait une fonction adaptative. L'idée adaptative est relativement simple : la hauteur de l'iframe dans la page parent doit être ajustée dans le temps en fonction de la hauteur de la page enfant. Étant donné que les opérations js sont impliquées, les solutions adaptatives pour différents noms de domaine sont différentes, principalement pour résoudre des problèmes inter-domaines.

Pour une hauteur adaptative sous le même nom de domaine parent : la page www.chinaz.com/index.html intègre la page www.chinaz.com/xxx.html

1.0 Code clé sur 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="hauteur:0;"></iframe>

Ajoutez le JS suivant à la page :

<mce:script type="text/javascript"><!--
(fonction(){
/**
* Obtenez le domaine actuel
**/
fonction _getDomain(){
var _hostname = window.location.hostname.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.length;
si(_len>2){
return _hosts[_len-2]+"."+_hosts[_len-1];
}
renvoie _hostname ;
}
document.domain = _getDomain();
})();
// --></mce:script>

2. Intégrez le code suivant dans la sous-page http://www.chinaz.com/xxx.htm. C'est ça


<mce:script type="text/javascript"><!--
(fonction(){
/**
* Obtenez le domaine actuel
**/
fonction _getDomain(){
var _hostname = window.location.hostname.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.length;
si(_len>2){
return _hosts[_len-2]+"."+_hosts[_len-1];
}
renvoie _hostname ;
}

window.onload = fonction()
{
//Définit le domaine de la sous-page
document.domain=_getDomain();
function_setHeight()
{
if (window.parent != fenêtre)
{
essayer
{
//Définit la hauteur de l'iframe parent
parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';
}
attraper(e)
{
}
}
//Défini toutes les 2 secondes, principalement pour être compatible avec les changements de hauteur après le chargement de la sous-page.
setTimeout(_setHeight,2000);
}
//Appelé une fois après le chargement de la sous-page
_setHeight();
}
})();
// --></mce:script>

Différentes pages parents, telles que www.chinaz.com, book.chinaz.com, ont des noms de domaine complètement différents. La solution consiste à utiliser une page proxy www.chinaz.com/proxy.htm www.chinaz.com/index.htm. pour intégrer le livre .chinaz.com/xxxx.htm, et xxx.htm doit masquer et intégrer www.chinaz.com/proxy.htm en tant que proxy. Vous pouvez écrire la hauteur à la fin www.chinaz.com/proxy. .htm#500 , ce qui signifie 500px de hauteur.

1. Code clé sur la page 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="hauteur:0;"></iframe>

Ajoutez le JS suivant :


  1. <mce:script type= "text/javascript" ><!--
  2. ( fonction (){
  3.      /**
  4. * Obtenez le domaine actuel
  5. **/   
  6.      fonction _getDomain(){
  7.          var _hostname = window.location.hostname.toString();
  8.          var _hosts = _hostname.split( "." );
  9.          var _len = _hosts.length;
  10.          si (_len>2){
  11.              retourner _hosts[_len-2]+ "." +_hosts[_len-1] ;
  12. }
  13.          renvoie _hostname ;
  14. }
  15. document.domain = _getDomain();
  16. })();
  17. // --></mce:script>

2. Codes clés sur www.chinaz.com/xxxx.htm :


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


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

3. Tous les codes de la page proxy book.chinaz.com/proxy.htm sont les suivants :


<!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">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</tête>
<corps>
<mce:script type="text/javascript"><!--
(fonction(){
/**
* Obtenez le domaine actuel
**/
fonction _getDomain(){
var _hostname = window.location.hostname.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.length;
si(_len>2){
return _hosts[_len-2]+"."+_hosts[_len-1];
}
renvoie _hostname ;
}
document.domain = _getDomain();
var hauteur = window.location.hash.substring(1);
essayer{
var el = window.top.document.getElementById('J_selfAdapting');
si(el) {
el.style.height = hauteur + 'px';
}
}
attraper (e) {}
})();
// --></mce:script>
</corps>
</html>

Articles connexes