Div内嵌iframe及自适应实现

最新推荐文章于 2023-08-02 17:39:46 发布

Ycix

最新推荐文章于 2023-08-02 17:39:46 发布

阅读量1.1w

点赞数

分类专栏：前端JS

本文链接：https://blog.csdn.net/YCixZoem/article/details/70217488

版权

前端JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

Ycix

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Div内嵌iframe及自适应实现

今天在逛网页时，看见一个div内嵌iframe的设计，父文档的大小是随着内嵌frame的变化而自适应的。，这才意识到以前对frame的接触太少了，看见这个都大惊小怪的。于是今天就给自己留了个小作业，写一写高宽度自适应。代码如下。要特别注意的有，获取子html frame的contentDocument等同于contentWindow.getDocument.2.chrome里面是会报错
复制链接

扫一扫