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

最新推荐文章于 2022-01-05 11:06:13 发布
最新推荐文章于 2022-01-05 11:06:13 发布
阅读量1.5k 收藏
点赞数
分类专栏： SSH框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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);</script>



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);
}

hhy018
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe高度自适应解决方式
lavendersue的博客
11-26 1384
带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家几种iframe动态调整高度的方法。 1、 <iframe width="778" align="center" height="200" id=...
js实现iframe自动自适应高度的方法
10-24
总结来说，使用JavaScript实现Iframe的自动自适应高度主要是通过获取和设置Iframe的`height`属性来实现的。在实际应用中，需要注意跨域问题，并可能需要结合其他技术来确保良好的兼容性和性能。希望这个方法能帮助你...
iframe 高度根据子页面来确定
Start2019
05-31 2257
因为我这是 宽度已知，整体居中的布局，滚动条加在 iframe 上会很奇怪，而且iframe的高度不确定，所以只能加给父级body上。 注意 iframe 标签中的 scrolling要为 “no” iframe 和 $.load() 的区别： 怎么让iframe的高度和宽度可以100%https://bbs.csdn.net/topics/390329086 iframe嵌套界面自适应，可高度自由收缩 ...
iframe高度自适应方案总结
zmjのblog
10-27 1万+
1. 背景 iframe能将一个网页嵌入到另一个网页中，有个缺陷是高度不能随内容而撑开，需要手动设置。 如果内容高度是动态的，就会存在问题。 在网上查了不少方案都存在一些问题，总结了一下 2. 思路 整体而言思路是：通过scrollHeight获取iframe的滚动高度，动态将iframe.height设置为scrollHeight即可 但是要考虑到两个问题 如果内容是动态改变的，就不能仅仅在window.onload后做一次高度改变 要考虑撑开后又高度又缩小的情况 3. 代码 为了解决上述的两个问题，
iFrame高度问题
11-30 239
<br />iFrame自适应高度方法：<br /><iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe><br /> <br />但这样在IE6下面还是存在显示问题，所以继续追寻方法，希望在自适应高度上再增加一些高度<br />直接+高度不行，得按比例乘以，所以，最后的解
iframe高度自适应的6个方法【转载】
linziqiang2007的博客
01-05 4326
iframe高度自适应的6个方法 JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。 iframe内容未知，高度可预测 这个时候，我们可以给它添加一个默认的CSS的min-height值，然后同时使用JavaScript改变高度。常用的兼容代码有： // document.d
jsp页面iframe高度自适应的js代码
10-25
总结一下，实现JSP页面中IFrame高度自适应的关键步骤包括： 1. 在主页面中，获取当前页面的文档高度并将其添加到IFrame的`src`属性中。 2. 在IFrame加载的页面中，解析URL的`hash`部分获取高度参数。 3. 使用...
jQuery解决iframe高度自适应代码
10-29
网上查了好多用着都不行，自己搞定了：在包含iframe的页面中加入以下脚本，基本思想是在iframe加载内容后重新设置高度，下面代码尽在IE6中用过，没在其他浏览器中测试。
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
父页面可以在加载子页面时，由服务器返回一个包含子页面高度的参数，然后在父页面中根据这个参数设置iframe的高度。这种方法需要服务器端的支持，增加了开发复杂度。 4. **CSS Flexbox或Grid布局**： 使用现代CSS...
iframe自适应高度
lzf的博客
06-30 943
iframe自适应高度是开发项目中经常遇到的问题。 一般来说，在同域情况下，直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可
iframe父页面随子页面高度的增加而增加
xyr05288的专栏
06-08 4610
问题：iframe嵌套网页，子页面高度增加，iframe高度也会增加.列如：子页面是一个表格数据。有个下拉框可以选择 回答： 1、首先你要明确：选择条数之后，触发了事件令子页面的body高度改变了，因此我们要捕捉到这个事件，即：$("body").resize(function(){}); 2、捕捉到事件后，我们要利用window.parent改变父页面的容器的高度。如：在父页面写个方法
让嵌入的iframe完美自适应宽度、高度
编程者说的博客专栏
12-11 1万+
涉及到系统集成的时候，前端我们经常会用到iframe嵌入，但是嵌入的时候经常有不适应的情况，太长或太宽、滚动条。。。 下面的方法可以做到使嵌入的iframe自适应宽度、高度， 1、嵌入iframe，加入onload事件 <iframe id="bi_iframe" src="http://xx.xx.xx.xx/yourServicePath&para1=xxx" onloa...
真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
热门推荐
巴黎的妖
05-19 21万+
今天有朋友问到我关于“iframe自适应高度”的问题，原本以为是很简单的问题，没想到折腾了20分钟才搞定。期间遇到几个问题，要么是高度自适应了，但是当窗口改变时会出现滚动条。也就是当窗口放大时iframe没有自动跟随变大显得很小，或是当窗口缩小时iframe还是之前那么大就出现了滚动条。还有或是高度不准确，那么就达不到想要的效果了。 为什么需要使用iframe自适应高度呢？其实就是为
【同域】根据iframe中引用的网页的高度来修改父级页面的iframe高度-iframe自适应子页高度
Love.Hope.Faith
12-20 6146
如题。         网上提供了很多方法。但是在进行测试的时候都会出现这样那样的问题。在一个好同学的帮助下，我使用了这种方法来实现了这个功能。         在父级页面iframe元素外部使用一个元素包围住。然后设置的初始高度不需要设置，设置好宽度，然后被包围的iframe的高度宽度均设置为100%；你也可以不用div，直接通过子页中的方法来修改父级页面iframe的高度。      
子窗口操作父窗口自适应高度<iframe></iframe>
wang845252276的专栏
11-18 3408
这不是跨域,且我不喜欢用定时器判断,父窗口load事件已适应子窗口高度,但如果后续操作会改变高度将不会适应新高度,且父窗口的click,mouse事件只有边框能触发,不用定时器去随时判断,那就只有从子窗口着手.$(function(){ var parentHeight = 0;//父窗口iframe高度 var parentFrame = null;//父窗口iframe
页面中自适应iframe高度的问题总结
fisher
05-21 2896
当需要对iframe进行操作，例如获取iframe的高度等，iframe和当前页面需要时同域，跨域情况下是获取不到的； 当动态设置iframe的高度时，iframe的高度一旦变大是不会自动缩小的。 例如： iframe中 a 页面高度为800px，b 页面的高度为500px ，你获取到的iframe高度只会是 800px 反之，a 为 500px，b 为800px，那么从 a 跳转到 b ...
iframe嵌套界面自适应，可高度自由收缩
君哥聊编程
04-01 2万+
iframe嵌套界面自适应，可高度自由收缩           iframe嵌套界面自适应是一个比较常见的功能需求，但是目前网上搜索出来的均不能做到自适应功能，下面是我列出来的解决方案，分享给大家，使用原生的JS编写，适用于chrome,firefox,IE浏览器，下面是代码部分。 HTML: JS： function calcPageHe
iframe 根据内容自适应高度-终极解决方案
不啦草的草原
07-05 6万+
第一中方法： 在子页面加载完毕的时候执行 parent.document.getElementById("iframe").height=0; parent.document.getElementById("iframe").height=document.body.scrollHeight; 第二中方法： 在主页面 iframe onLoad 时间里面写 functi
实现iFrame自适应高度，原来很简单！
CSDN_heyi_2016的博客
09-24 9298
实现iFrame自适应高度，原来很简单！ <iframeid="iFrame1"name="iFrame1"width="100%"onload="this.height=iFrame1.document.body.scrollHeight"frameborder="0"src="index.htm"></iframe>看到了吧，关键就在于onlo...
iframe高度自适应页面
最新发布
09-08
要实现iframe的高度自适应页面，可以采用以下方法。首先，在包含iframe的页面中加入以下脚本。该脚本的基本思想是在iframe加载内容后重新设置高度。在这个过程中，我们可以使用doc.body.scrollHeight和doc....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值