communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > 动态的改变IFrame的高度实现IFrame自动伸展适应高度_javascript技巧

动态的改变IFrame的高度实现IFrame自动伸展适应高度_javascript技巧

WBOY
Libérer： 2016-05-16 17:44:53
original
1000 Les gens l'ont consulté

动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩
原理： 在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度
具体实现一:
1、在IFrame的具体页面(就是子页面)，添加JavaScript

复制代码 代码如下:

<script> <BR>function IFrameResize(){ <BR>//alert(this.document.body.scrollHeight); //弹出当前页面的高度 <BR>var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象 <BR>//alert(obj.height); //弹出父页面中IFrame中设置的高度 <BR>obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度 <BR>} <BR></script>

2、在IFrame的具体页面(就是子页面)的body中，添加onload事件
复制代码 代码如下:



3、为父页面的IFrame标签添加ID，即上面第一步，方法体中的第2行所写到的childFrame
复制代码 代码如下:



具体实现二:
复制代码 代码如下:

//动态改变父类iframe的高度
//iframe页面调用的js
$(function(){
//取到窗口的高度
var winH = $(window).height();
//取到页面的高度
var bodyH = $(document).height();
if(bodyH > winH){
window.parent.document.getElementById("mainFrame").height=bodyH;
}else{
window.parent.document.getElementById("mainFrame").height=winH;
}
});

父页面的iframe为
复制代码 代码如下:


Étiquettes associées：
iframe
source：php.cn
Article précédent：JavaScript 在网页上单击鼠标的地方显示层及关闭层_javascript技巧 Article suivant：javascript中的缓动效果实现程序_javascript技巧
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Intégration de HTML généré par une fonction R Je veux créer dynamiquement du HTML et restituer ce HTML en quarto. L'application réelle i...
Depuis 2024-04-01 20:51:51
0
1
367
Intégrer/iframe toujours en pleine hauteur J'ai intégré plusieurs fichiers HTML dont la "hauteur" varie. Je souhaite que le...
Depuis 2024-03-31 09:50:18
0
1
400
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal