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

Pages d'images iframe implémentez des solutions de hauteur adaptative

Auteur：Eve Cole Date de mise à jour：2025-02-05 14:05:58

Il y a souvent des pages parents qui doivent être intégrées dans une autre sous-page via IFRAME et ajuster la hauteur d'Iframe dans la page parent en temps opportun en fonction de la hauteur de la page de l'enfant. L'idée adaptative est relativement simple: la hauteur d'Iframe dans la page parent doit être ajustée en fonction de la hauteur de la page de l'enfant en temps opportun. Étant donné que les opérations JS sont impliquées, les solutions adaptatives de différents noms de domaine sont différentes, principalement pour résoudre les problèmes croisés.

Pour une hauteur adaptative sous le même nom de domaine parent: www.chinaz.com/index.html intégrée dans www.chinaz.com/xxx.html page

1.0 http://jipiao.taobao.com/index.htm Code de clé

<iframe id = "j_selfadapting" src = "http://www.chinaz.com/xxx.htm" MCE_SRC = "http://www.chinaz.com/xxx.htm" frameborder = "0" Scrolling = "Non "style =" hauteur: 0; "> </ iframe>

La page est ajoutée comme suit JS:

<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;
if (_len> 2) {{
Return _hosts [_len-2] + "." + _ Hosts [_len-1];
}
Return_hostname;
}
document.domain = _GetDomain ();
}) ();
// -> </ mce: script>

2. Le code suivant est intégré dans le sous-page http://www.chinaz.com/xxx.htm. À


<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;
if (_len> 2) {{
Return _hosts [_len-2] + "." + _ Hosts [_len-1];
}
Return_hostname;
}

Window.onload = function () ()
{{
// Définit le domaine de la page enfant
document.ndsain = _GetDomain ();
fonction _setheight ()
{{
if (window.parent! = window)
{{
essayer
{{
// définir la hauteur de l'iframe de niveau parent
Parent.Document.getElementById ("J_Selfadapting"). style.height = document.body.scrollHeight + 'px';
}
attraper (e)
{{
}
}
// configure tous les 2s, principalement pour modifier la hauteur après le chargement de la page de la page
setTimeout (_setheight, 2000);
}
// Après avoir chargé le sous-page, appelez-le une fois
_Setheight ();
}
}) ();
// -> </ mce: script>

Différentes pages de niveau parent, telles que www.chinaz.com, le nom de domaine book.chinaz.com est complètement différent. Htm. 1. Code clé sur le code clé sur 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>

Ajouter comme suit JS:


  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. if (_len> 2) {{

  11. Return _hosts [_len-2] + "."

  12. }

  13. Return_hostname ;

  14. }

  15. document.domain = _GetDomain ();

  16. }) ();

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

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


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


<mce: script type = "text / javascript"> <! -
(fonction(){
var pageHeight = document.body.scrollHeight;
document.getElementByid ('taobaoiframe').
}) ();
// -> </ mce: script>

3. Tout le code de la page Proxy Book.chinaz.com/proxy.htm est le suivant: comme suit:


<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = gbk" />
</ head>
<body>
<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;
if (_len> 2) {{
Return _hosts [_len-2] + "." + _ Hosts [_len-1];
}
Return_hostname;
}
document.domain = _GetDomain ();
var height = window.location.hash.substring (1);
essayer{
var = window.top.document.getElementById ('j_selfadapting');
if (el) {{
el.style.head = hauteur + 'px';
}
}
catch (e) {}
}) ();
// -> </ mce: script>
</docy>
</html>

Articles connexes