Pourquoi trois discussions
Pourquoi trois conférences ? L'une est parce que c'est vraiment un sujet dont on parle mal, et l'autre parce que Maître Tai a écrit cet article il y a n ans pour parler de la hauteur adaptative iframe . La raison pour laquelle je soulève à nouveau cette question est que j'ai effectivement rencontré tous les aspects de ce problème dans des projets précédents, et il est nécessaire de le résumer. J'espère que cela vous aidera, corrigez-moi s'il y a des erreurs.
La hauteur du même domaine et des mêmes sous-pages n'augmentera pas dynamiquement
Cette situation est la plus simple. Obtenez simplement la hauteur réelle de la sous-page directement via le script et modifiez la hauteur de l'élément iframe. Mais il y a deux points à noter :
S'il y a des éléments positionnés de manière absolue dans la page ou s'il n'y a pas d'éléments flottants, la situation est un peu compliquée. Différents navigateurs ont des résultats de traitement différents, même les navigateurs avec le noyau Webkit. Veuillez consulter cette démo pour plus de détails. Donc, soit vous effectuez une détection de navigateur, soit vous utilisez Math.max pour calculer une valeur maximale, soit vous pensez à autre chose.
La page contenue dans l'iframe peut être très volumineuse et nécessiter un temps de chargement long. Lors du calcul direct de la hauteur, il est probable que la page n'ait pas été téléchargée et qu'il y ait des problèmes avec le calcul de la hauteur. Il est donc préférable de calculer la hauteur dans l'événement onload de l'iframe. Il convient également de noter ici que le modèle d'événement Microsoft obj.attachEvent doit être utilisé pour lier l'événement onload sous IE. D'autres navigateurs peuvent également utiliser directement obj.onload = function(){}.
(fonction(){
var _reSetIframe = fonction(){
var frame = document.getElementById("frame_content_parent")
essayer {
var frameContent = frame.contentWindow.document,
hauteur du corps = Math.max
(frameContent.body.scrollHeight,
frameContent.documentElement.scrollHeight);
if (bodyHeight != frame.height){
frame.height = bodyHeight;
}
}
attraper(ex) {
cadre.hauteur = 1800 ;
}
}
si(frame.addEventListener){
frame.addEventListener
("load",function(){setInterval(_reSetIframe,200);},false);
}autre{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
Dans le même domaine, la hauteur des sous-pages augmentera dynamiquement et le script risque d'échouer complètement.
Dans le deuxième exemple, les erreurs de script sont prises en compte, mais si le script n'est pas exécuté du tout, le contenu de l'iframe ne sera pas affiché car la hauteur de l'iframe n'est pas assez élevée. Pour cette raison, nous définissons généralement une hauteur suffisante à l'avance. Pour la commodité du contrôle frontal, je pense qu'il est plus approprié de l'écrire dans un fichier CSS. Lorsqu'une modification est nécessaire, changez simplement le CSS. Ici, j'ai défini selector{ height:1800px }. A noter que les styles écrits dans la feuille de style ne peuvent pas être récupérés directement à l'aide de node.style[property]. Pour les modèles Microsoft, il faut utiliser node.currentStyle[property] (digression : le modèle tragique d'IE ne supporte pas le pseudo- CSS). classes ), pour le modèle W3C, utilisez window.getComputedStyle(node,null)[property] pour l'obtenir. J'ai utilisé YUI directement par souci de commodité.
Il y a un autre problème ici. Lorsque vous définissez la hauteur de l'iframe pour qu'elle soit supérieure à la hauteur de la page qu'elle contient, chaque navigateur le gère différemment. Par exemple, sous Firefox, la hauteur de l'élément body doit être calculée, et la hauteur de l'élément html est égale à la hauteur de l'iframe. Cependant, lorsque la page a un positionnement absolu et des éléments flottants non effacés, cela ne peut pas l'être. obtenu grâce à l'élément corps. Évidemment, la première méthode Les inconvénients de la méthode sont moindres. Veuillez consulter cette démo pour plus de détails.