iframe根据内容自适应高度教程

       博主今天调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%" οnlοad="javascript:iframeAutoHeight();" ></iframe>

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

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

需要注意的是，页面里面有给内容写死一个高度的，应隐去，让内容来决定页面的高度。