您的位置:首页 > 其它

iframe根据内容自适应高度

2016-02-15 19:29 387 查看
博主今天调iframe根据内容自适应高度,发现好多坑。首先呢发现得到全文的高度在各大浏览器里的写法是不一样的,IE和火狐是一种写法,360和谷歌是另一种。所以呢就得根据浏览器的名称用不同的代码;后来用navigator.appName(官方说是得到浏览器的名称,就是个大坑)拿浏览器的名称,结果发现IE(7-10)的appName是“Microsoft Internet Explorer”,其他浏览器诸如火狐、360、谷歌的appName不约而同是“Netscape”,等到了IE11,它的appName也成了Netscape;于是博主又想到appCodeName(官方说是得到浏览器的代码名),结果发现代码名全是“Mozilla”;博主又想到用userAgent。

IE11以下的userAgent里面都包含MSIE字符,等到了IE11,没了MSIE字样,所以要用rv:11来辨别。

最后费劲千辛万苦写出了如下的代码(兼容IE7-IE11,火狐、360、谷歌),亲测无误:

function iframeAutoHeight(){
     	var iframe=document.getElementById("midFraim");
     	if(navigator.userAgent.indexOf("MSIE")>0||navigator.userAgent.indexOf("rv:11")>0||navigator.userAgent.indexOf("Firefox")>0){
     		iframe.height=iframe.contentWindow.document.body.scrollHeight;
     	}else{
     		iframe.height=iframe.contentWindow.document.documentElement.scrollHeight;
     	}
     }
<iframe name="midFraim" id="midFraim" src="main.html" frameborder="0" scrolling="no" width="100%" onload="javascript:iframeAutoHeight();" ></iframe>

若是通过异步请求抓取的数据,在onload事件里调用设置iframe高度的方法是不准确的,因为此时ajax还没有完全把数据追加到页面。所以要在回调函数里调用重设iframe高度的方法:

function reSetIframeHeight(){
		window.top.window.iframeAutoHeight();
}


需要注意的是,页面里面有给内容写死一个高度的,应隐去,让内容来决定页面的高度。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: