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的 ...
随机推荐
- C#/ASP.NET/AJAX
C#/ASP.NET/AJAX ASP.NET 4.5新特性一:强类型数据绑定(Strongly-Type Data-Bindings) 摘要: 随着ASP.NET 4.5的发布提供了很多的新特性 ...
- Ubuntu下LaTex中文环境安装与配置
转载自:http://www.linuxidc.com/Linux/2012-06/62456.htm LaTeX是一个强大的排版软件,但是其最初只是为英文排版而设计的.为了使其能够胜任中文排版的重任 ...
- 分页存储过程实现-SqlServer
一个通用的分页存储过程实现-SqlServer(附上sql源码,一键执行即刻搭建运行环境) 使用前提 查询表必须有ID字段,且该字段不能重复,建议为自增主键 背景 如果使用ADO.NET进行开发,在查 ...
- [Usaco2008 Dec]Patting Heads 轻拍牛头[筛法]
Description 今天是贝茜的生日,为了庆祝自己的生日,贝茜邀你来玩一个游戏. 贝茜让N(1≤N≤100000)头奶牛坐成一个圈.除了1号与N号奶牛外,i号奶牛与i-l号和i+l号奶 ...
- Dotfuscator注册码和XenoCode注册码
.net加密工具注册码:Dotfuscator注册码如下: Your serial number is 14705 Your Confirmation Numb ...
- C语言中数据类型的长度
面试中C里面int长度经常会被问到,下面总结一下作为资料: 首先看看一般规定: 标准c规定,int长度等于机器字长,short的表示范围不能大于int的表示范围,long的表示范围不能小于int的表示 ...
- 安装使用yii-debug-toolbar,yii框架的调试插件
1github 下载yii-debug-toolbar 插件 地址:https://github.com/malyshev/yii-debug-toolbar 2. 假设yii的项目创建在了/expo ...
- MVC test
1,index @{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html> <head> < ...
- 验证码生成组件--JCaptcha的使用
以下为项目中所用代码,文笔有限,直接上代码. 所需jar包: 是否需要其他依赖包,不详 web.xml <servlet> <servlet-name>Jcaptcha< ...
- 通过 DynamicLinq 简单实现 N-Tier 部署下的服务端数据库通用分页
通过 DynamicLinq 简单实现 N-Tier 部署下的服务端数据库通用分页 YbSoftwareFactory 的 YbRapidSolution for WinForm 插件使用CSLA.N ...