用js操作iframe改变界面高度
- php中世界最好的语言原创
- 2018-04-17 16:46:402576浏览
这次给大家带来用js操作iframe改变界面高度，用js操作iframe改变界面高度的注意事项有哪些，下面就是实战案例，一起来看一下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="页面1"/>
<input type="button" value="页面2"/>
<iframe id="iframePage" src="1.html" frameborder="0" scrolling="no"></iframe>
</body>
<script>
// contentWindow所有浏览器支持，contentDocument IE不支持; window.parant当前页面的父页面，window.top当前页面的最外层页面
// iframe防钓鱼:if(window!=window.top){window.top.location.href=window.location.href} 如果最顶层页面不是当前页面，就把最顶层网址指向当前页面网址
window.onload=function(){
var oIframe=document.getElementById('iframePage');
var aBtn=document.getElementsByTagName('input');
changeHeight();
function changeHeight(){
setTimeout(function(){ //必须加一个延迟，不然高度改变会和页面加载冲突，事先不了高度变化
oIframe.height=oIframe.contentWindow.document.body.offsetHeight;
},100);
}
aBtn[0].onclick=function(){
oIframe.src='1.html';
changeHeight();
};
aBtn[1].onclick=function(){
oIframe.src='2.html';
changeHeight();
};
};
</script>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是用js操作iframe改变界面高度的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：js与服务器时间同步的步奏详解下一篇：按概率生成数字