iframe 自动适应子页面高度宽度

转载 2016年08月29日 09:47:47

<iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx"
            frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>


<script type="text/javascript">

        startInit('mainFrame', 560);

var browserVersion = window.navigator.userAgent.toUpperCase();

var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;

var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;

var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;

var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;

var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);

var isIE9More = (! -[1, ] == 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 && isIE9More) {//ie9+

var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);

if (heightDeviation == 0) {

bHeight += 3;

} else if (heightDeviation != 3) {

eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);

bHeight += 3;

}

}

else//ie[6-8]、OPERA

bHeight += 3;


var height = Math.max(bHeight, dHeight);

if (height < minHeight) height = minHeight;

iframe.style.height = height + "px";

} catch (ex) { }

}

function startInit(iframeId, minHeight) {

eval("window.IE9MoreRealHeight" + iframeId + "=0");

window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);

}

</script>



真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

今天有朋友问到我关于“iframe自适应高度”的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定。期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条。也就是当窗口放大时ifra...
  • alex8046
  • alex8046
  • 2016年05月19日 18:37
  • 139814

【同域】根据iframe中引用的网页的高度来修改父级页面的iframe高度-iframe自适应子页高度

如题。         网上提供了很多方法。但是在进行测试的时候都会出现这样那样的问题。在一个好同学的帮助下,我使用了这种方法来实现了这个功能。         在父级页面iframe元素外部使用...
  • killzero
  • killzero
  • 2013年12月20日 19:49
  • 3912

总结iframe高度自适应,自适应子页面高度

iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx" frameborder="0" s...
  • hhy018
  • hhy018
  • 2016年04月07日 15:11
  • 1184

contentDocument实现iframe自适应子页面高度

刚开通博客不久,经常在看到前辈和大牛在博客上分享技术经验,就想用博客来记录一些遇到过的问题和解决问题的经验。      前两天一朋友和我讨论到用iframe内嵌网页如何做到让iframe自适应子页面的...
  • MyFirstBook527
  • MyFirstBook527
  • 2017年10月08日 01:55
  • 162

总结iframe高度自适应,自适应子页面高度

在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下。  页面html节点上要有下面红色部分,不然ie浏览器会无限递增 iframe id="mai...
  • wd_boy
  • wd_boy
  • 2017年05月24日 14:51
  • 451

使用iframe内嵌网页的时候,如何做到内嵌网页的高度自适应

在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点。想比之下,iframe就简单多了!处理iframe的自适应宽、高,会经常用到,网上整理了一份,写在这里备用: 单个iframe 高...
  • DavidLog
  • DavidLog
  • 2017年04月25日 10:40
  • 6673

总结iframe高度自适应,自适应子页面高度

在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下。  页面html节点上要有 iframe id="mainFrame" name="mainF...
  • alex8046
  • alex8046
  • 2016年05月19日 18:35
  • 3263

Iframe 自动适应页面的高度

function SetCwinHeight(obj) { var cwin = obj; if (document.getElementById) { if (cwi...
  • dao_net
  • dao_net
  • 2014年02月26日 13:08
  • 462

iframe自适应高度和宽度 全css实现无javascript

  菜单管理>                              >>     height:100%;width:100%;right:0px;border:solid 0px red;" ...
  • okkk
  • okkk
  • 2010年04月28日 11:19
  • 13964

iPhone手机浏览器运行嵌入页面的iframe时候会撑全屏,页面在安卓手机上正常,解决办法

setTimeout(function(){   //此代码pc端有用,iphone端有用,获取设备操作系统 var platform = nav...
  • u011511086
  • u011511086
  • 2017年11月13日 14:01
  • 780
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iframe 自动适应子页面高度宽度
举报原因:
原因补充:

(最多只允许输入30个字)