Div内嵌iframe及自适应实现
今天在逛网页时，看见一个div内嵌iframe的设计，父文档的大小是随着内嵌frame的变化而自适应的。，这才意识到以前对frame的接触太少了，看见这个都大惊小怪的。于是今天就给自己留了个小作业，写一写高宽度自适应。
代码如下。
要特别注意的有，获取子html frame的contentDocument等同于contentWindow.getDocument.
2.chrome里面是会报错的，该段代码。解决方案有两个，要么在Firefox里面测试，要么把本段代码放进服务器上。错误
原因很简单，跨页面的安全问题。
<!DOCTYPE html>
<html>
<head>
<title>div嵌套iframe自适应</title>
<meta charset="utf-8">
</head>
<body>
<div>
<iframe src="localStorage.html" id="ifr"></iframe>
</div>
<script type="text/javascript">
function calHeight(doc)
{
var cHeight=Math.max(doc.body.clientHeight,doc.documentElement.clientHeight);//documentElement返回文档的根元素
var sHeight=Math.max(doc.body.scrollHeight,doc.documentElement.scrollHeight);
var finalHeight=Math.max(sHeight,cHeight);
return finalHeight;
}
function calWidth(doc){
var cWidth=Math.max(doc.body.clientWidth,doc.documentElement.clientWidth);
var sWidth=Math.max(doc.body.scrollWidth,doc.documentElement.scrollWidth);
var width=Math.max(cWidth,sWidth);
return width;
}
//1. 取iframe内的文档对象，标准浏览器使用contentDocument属性，IE低版本(IE6,7,8)使用document属性。
//2. calcPageHeight函数计算页面的实际高度，标准浏览器使用document.documentElement，低版本IE使用document.body，默认取clientHeight，出现滚动条的取scrollHeight，最后取两个值中最大的。
var ifr=document.getElementById("ifr");
ifr.onload=function(){
var iDoc=ifr.contentDocument;//此时报错无法获取子类文档
var height=calHeight(iDoc);
var width=calWidth(iDoc);
ifr.style.height=height+"px";
ifr.style.width=width+"px";
}
</script>
</body>
</html>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 使用iframe内嵌网页的时候，如何做到内嵌网页的高度自适应
- 下一篇： 嵌入网页，调整内容的大小
