Div内嵌iframe及自适应实现

来源：互联网发布：卡帝乐鳄鱼知乎编辑：程序博客网时间：2024/06/05 15:21

今天在逛网页时，看见一个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>

0 0