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、谷歌),亲测无误:
若是通过异步请求抓取的数据,在onload事件里调用设置iframe高度的方法是不准确的,因为此时ajax还没有完全把数据追加到页面。所以要在回调函数里调用重设iframe高度的方法:
需要注意的是,页面里面有给内容写死一个高度的,应隐去,让内容来决定页面的高度。
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(); }
需要注意的是,页面里面有给内容写死一个高度的,应隐去,让内容来决定页面的高度。
相关文章推荐
- SharedPreferences 用法总结
- android 5.0及以上https No peer certificate
- hdoj5248序列变换【二分】
- 整体二分小结
- java多线程 并发 编程
- Stanford 机器学习笔记 Week3 Regularization
- android build.grade 脚本
- WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping
- 在Linux 5/6上使用UDEV SCSI规则配置ASM DISK
- hdoj5246超级赛亚ACMer
- [BZOJ2796][Poi2012]Fibonacci Representation
- 建立网络链接传输数据 HttpClientUtil
- AsyncTask+GridView+BaseAdapter实现解析网络数据,图文混排。HttpUtils,JsonUtils等
- FindBugs使用
- 从控制台接收输入字符
- 前端构建工具gulpjs
- FindBugs使用
- iOS应用在后台长久运行
- Qt多线程事件管理的正确打开方式
- BZOJ_P2875&Codevs_P1281 [NOI2012]随机数生成器(数论+矩阵乘法)