被嵌套页面 如何得到iframe 高度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了被嵌套页面 如何得到iframe 高度相关的知识，希望对你有一定的参考价值。
a 页面 <iframe id="frame_content" src="b.html" scrolling="no" frameborder="0" style="height:100% ; width:100%;" ></iframe>
如何在 b页面 加载的时候通过js 得到 a页面的 iframe 的高度
<iframe src="default.html" id="mainweb" name="mainweb" width="100%" height="100%" frameborder="0" onLoad="iFrameHeight()" ></iframe>
<script type="text/javascript" language="javascript">
function iFrameHeight()
var ifm= document.getElementById("mainweb");
var subWeb = document.frames ? document.frames["mainweb"].document :
ifm.contentDocument;
if(ifm != null && subWeb != null)
ifm.height = subWeb.body.scrollHeight;
</script>
为了测试，iframe的height可以预先设置一个固定高度比如：height="200"（也可以使用100%）,iframe加载完，会自动调整页面大小。 参考技术B window.top.$("#frame_content").height()应该就可以，
主页面需要引入jQuery。
不用jQuery的话就
window.top.getElementById("frame_content").clientHeight
也可以 参考技术C -----a.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
这个是a页面
<iframe id="frame_content" src="b.html" scrolling="no" frameborder="0" style="height:100% ; width:100%;"></iframe>
</BODY>
</HTML>
-----b.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
alert(parent.document.getElementById('frame_content').style.height);
</script>
</HEAD>
<BODY>
这个是b页面
</BODY>
</HTML>本回答被提问者采纳
IOS不支持iframe的解决办法
ios 不支持 iframe 的完美解决方法最近做微信公众号页面，因为入口不同，需要把公共页面抽取出来，然后根据不同的值，传递给后台不同的入口。刚开始用iframe页面嵌套（第一次尝试使用），但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位，当嵌套的子页面的高度大于父页面的高度，且子页面中有触发弹框事件时，这时，如果子页面高度远远大于父页面高度，就会出现弹框找不到的情况，其实可能是在视口以下，弹框的位置只是相对于子页面来定位，并没有相对于视口定位。
尝试了好多种方法，均不理想，而安卓系统则表现良好，于是想到，iOS系统可直接做页面跳转，而安卓系统则正常使用iframe（如果安卓系统直接做页面跳转，会有问题，故使用iframe），
直接看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
</head>
<body>
<script src="js/zepto.min.js"></script>
<script>
$(function() {
var originId = sessionStorage.setItem(‘originId‘, ‘3‘); //originId为后台需要判断是哪个入口的值
var u = navigator.userAgent;
var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
//安卓终端使用iframe
var winH = $(window).height();
var iframe = document.createElement(‘iframe‘);
iframe.src = "index_common.html";
iframe.style.width = ‘100%‘;
iframe.style.height = winH + ‘px‘;
iframe.style.border = ‘0 none‘;
iframe.setAttribute(‘scrolling‘, ‘auto‘);
document.body.appendChild(iframe);
} else if (isiOS) {
//iOS终端直接页面跳转
location.href = ‘index_common.html‘;
} else {
location.href = ‘index_common.html‘;
}
})
</script>
</body>
</html>
以上是关于被嵌套页面 如何得到iframe 高度的主要内容，如果未能解决你的问题，请参考以下文章
iframe如何自动随嵌入另一网站页面内容高度的变化页变化呢