iframe自适应高度问题
我页面中的iframe
<iframe name="mainFrame" id="mainFrame" src="/account/${pageName}" width="100%" height="100%"
frameborder=0 marginheight="0" marginwidth="0" scrolling="no"></iframe>
一共试了三种,目前感觉最好的一种:
<script>
$(function(){
$("#mainFrame").load(function(){
var mainheight = $(this).contents().find("body").height()+10;
$(this).height(mainheight);
});
});
</script>
参考:http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html
第二种: 问题:高度只可以增加不能减小
<script type="text/javascript">
function iFrameHeight() {
var ifm = document.getElementById("accountIndexIframe");
var subWeb = document.frames ? document.frames["accountIndexIframe"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
// ifm.width = subWeb.body.scrollWidth;
}
}
</script>
参考:http://www.cnblogs.com/Nbge/archive/2013/06/14/3135697.html
第三种:问题 使用的时候出现不顺畅的情况,点击第一次会失效,第二次才有用
<script type="text/javascript">
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = false, isFireFox = false, isChrome = false, isSafari = false, isIE = false;
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var bHeight = 0;
if (isChrome == false && isSafari == false)
bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = 0;
if (isFireFox == true)
dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
else if (isIE == false && isOpera == false)
dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
else if (isIE == true && ! -[1, ] == false) { } //ie9+
else
bHeight += 3; var height = Math.max(bHeight, dHeight);
if (height < minHeight) height = minHeight;
iframe.style.height = height + "px";
} catch (ex) { }
}
function startInit(iframeId, minHeight) {
isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
if (!!window.ActiveXObject || "ActiveXObject" in window)
isIE = true;
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}
startInit('mainFrame', 500);//开始调用
</script>
出自:http://www.cnblogs.com/slyzly/articles/2422737.html
iframe自适应高度问题的更多相关文章
- jquery 清空 iframe 的内容,,iframe自适应高度
$(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
- jquery iframe自适应高度[转]
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试. 很古老的方法: <iframe src="../In ...
- js实现iframe自适应高度
转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...
- 网页制作技巧:iframe自适应高度
转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索if ...
- Iframe 自适应高度的方法!
第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...
- iframe自适应高度的多种方法小结
转自:http://www.jb51.net/article/15780.htm 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小 ...
- iframe自适应高度的多种方法方法小结
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...
- [转载]再谈iframe自适应高度
Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html 下面开始讲: 通过Google搜索iframe 自适应高度,结果5W多条,搜索 ...
- iframe自适应高度的多种方法方法小结(转)
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...
随机推荐
- 前台框架的选择 EasyUI、DWZ、ligerui
EasyUI1.3.1+MVC4.0+EF5.0 番外篇 关于前台框架的选择 EasyUI.DWZ.ligerui 昨天发了EasyUI1.3.1+MVC4.0+EF5.0实战之一 开篇及布局控件介绍 ...
- 手工配置Service的过程中。
正在使用srvctl创建service时间,需要注意TAF政策选择必须是dbms_service套餐配置.下面的例子演示了如何创建一个服务felix_ora: 1.查看现有的创建之前系统service ...
- C# 语言的多线程编程,完全是本科OS里的知识
基本知识,无参数Thread和带参数的Thread Thread类的参数就是参数指针,可以传入一个无参的函数. 如果要传入带参数的函数,先new一个ParameterizedThreadStart委托 ...
- linux 启动oracle报cannot restore segment prot after reloc: Permission denied
error while loading shared libraries: $ORACLE_HOME/lib/libnnz10.so: cannot restore segment prot afte ...
- shell删除指定时间之前的文件
cat delbak.sh 1 #!/bin/sh 2 location="/root/sqlbak/" 3 find $location -mtime +30 -type f | ...
- Date与SimpleDateFormat
Date常用的方法 返回类型 方法名称 备注 Date New Date() 创建当前日期对象 Date New date(long dt) 使用自1970.1.1以后的指定毫秒数创建日期 boole ...
- NServiceBus 概况
NServiceBus 概况 NServiceBus 概况 NServiceBus 被设计用来组合面向业务的服务,它并不是用来替代诸如 WCF 一类的RPC技术. NServiceBus 不只包含通信 ...
- SZU:B85 Alec's Eggs
Description Eggs Alec has a lot of eggs. One day, he want to sort them in a ascending sequence by we ...
- 用Python复习离散数学(二)
这次复习的是计数问题,立刻走起吧! 1.乘法原理 如果一项工作需要t步完成的,第一步有n1种不同的选择,第二步有n2种不同的选择,……,第t步有nt中不同的选择,那么完成这项工作所有可能的选择种数为: ...
- MVC 4 插件化架构简单实现
转ASP.NET MVC 4 插件化架构简单实现-思路篇 用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC ...