Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > 动态的改变IFrame的高度实现IFrame自动伸展适应高度_javascript技巧

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

WBOY
Freigeben： 2016-05-16 17:44:53
Original
1000 Leute haben es durchsucht

动态的改变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为
复制代码 代码如下:


Verwandte Etiketten：
iframe
Quelle：php.cn
Vorheriger Artikel：JavaScript 在网页上单击鼠标的地方显示层及关闭层_javascript技巧 Nächster Artikel：javascript中的缓动效果实现程序_javascript技巧
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Einbetten von HTML, das von einer R-Funktion generiert wurde Ich möchte HTML dynamisch erstellen und dieses HTML in Quarto rendern. Die eigentliche Anw...
Aus 2024-04-01 20:51:51
0
1
367
Einbettung/Iframe immer in voller Höhe Ich habe mehrere HTML-Dateien eingebettet, die sich in der „Höhe“ unterscheiden. Ich möcht...
Aus 2024-03-31 09:50:18
0
1
400
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage