iframe跨域自适应高度

最新推荐文章于 2022-01-05 11:06:13 发布

Me-hao

最新推荐文章于 2022-01-05 11:06:13 发布

阅读量708

点赞数

CC 4.0 BY-SA版权

分类专栏： Js 文章标签： iframe 自适应 js jsp

本文链接：https://blog.youkuaiyun.com/qianqianyihao/article/details/27218487

Js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在子页面中通过JavaScript获取当前页面高度，并将其设置为父页面iframe元素高度的方法，实现了跨域iframe元素的动态调整。

在子页面的js代码：

function IFrameResize() {
			var bgh = $('#bg', window.parent.document)
			bgh.height(0);
			//alert($('#bg', window.parent.document).height());
			//alert($('#auction_bg', window.parent.document).height());
			//alert(this.document.body.scrollHeight); //弹出当前页面的高度
			var obj = parent.document.getElementById("div_view"); //取得父页面IFrame对象  
			obj.height = 0;
			obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度  
			if (this.document.body.scrollHeight > 798) {
				$('#bg', window.parent.document).height(obj.height)
			} else {
				$('#bg', window.parent.document).height(798)
			}
		}

子页面的body onlaod=“IFrameResize()”

其实就是在子页面中获取到当前页面的高度，然后获取到父页面的iframe对象，把子页面的高度set给父页面iframe的高度。