iframe 高度自适应

iframe 高度自适应

2013-11-19

通过子页面修改父页面中iframe的高度

在子页面加载完毕之后，取得页面的offsetHeight，然后去修改父页面的iframe高度。

1
2
3
function autoHeight(id) {
	window.parent.document.getElementById(id).setAttribute("height", document.body.offsetHeight); 
}

这种方法有缺点就比较严重，每个页面都要麻烦的带着这个方法。

绑定iframe的onload事件

iframe的onload事件与window.onload有区别，不会因为阻塞类的原因阻止调用，所以绑定iframe的onload事件。在触发onload事件的时候，获取iframe页面的文档高度赋给iframe，这样就一劳永逸的解决了自适应的问题。在页面加载完毕之后调用下面这个方法，传入iframe的id。

1
2
3
4
5
6
7
8
9
10
function bindResize(id) {
	var iframe = document.getElementById(id),
		ifrDoc; 
	iframe.onload = function() {
		ifrDoc = document.frames ? document.frames[id].document : iframe.contentDocument;
		if (ifrDoc) {
			iframe.setAttribute("height", ifrDoc.body.scrollHeight);
		}
	}
}

跨域的情况

上面两种方法的兼容性都不错，基本解决了高度自适应的问题。但是在跨域的情况下，它们就失效了。解决的方法：

  • 修改域：如果根域名相同的话，修改document.domain让域相同。
  • 不修改域：修改会导致出其它的问题，不想修改域的话父子之间就不能相互操作，甚至不能获取高度。这时就需要一些特殊的方法来解决，原理便是想办法实现两个页面之间的通信，把子页面的高度告诉父页面，或者告诉一个可以操作父页面的页面（比如：使用iframe的嵌套），在此不多累赘讲解。

上面两次提到页面加载完毕，jquery中的ready方法非常好用，如果不想用jquery的ready方法，又不想自己写，可以把它放在页面的底部（不保证总是对），或者写一个setTimeout直到取到需要取到的东西为止。有时间我把jquery的ready整理一下发出来。