iframe自适应宽度和高度，没有滚动条

最新推荐文章于 2024-07-24 10:26:30 发布
转载 最新推荐文章于 2024-07-24 10:26:30 发布 · 2.9k 阅读 · 0
标签
#iframe #javascript #firefox #null #border
#浏览器
本文介绍了一种适用于IE和Firefox浏览器的IFrame自适应宽度和高度的方法。通过加入特定的DOCTYPE声明并使用JavaScript函数TuneHeight，可以实现IFrame内容随着窗口大小的变化而变化的效果。

iframe自适应宽度和高度

支持IE和Firefox浏览器的iframe自适应宽度和高度代码，先确定嵌入页和被嵌入网页加入了以下声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    在嵌入页加入以下代码，修改代码中的“test.html”为你的被嵌入页URL即可。

<script type="text/javascript" language="javascript"> 
<!-- 
function TuneHeight(fm_name,fm_id){ 
    var frm=document.getElementById(fm_id); 
    var subWeb=document.frames?document.frames[fm_name].document:frm.contentDocument; 
    if(frm != null && subWeb != null){
        frm.style.height = subWeb.documentElement.scrollHeight+"px";
        //如需自适应宽高，去除下行的“//”注释即可
        frm.style.width = subWeb.documentElement.scrollWidth+"px";
    } 
}
 //-->
</script>

使用方法：
<table style="height: auto; width: 100%; background-color: #cf0000;">
                <tr>
                    <td style="width: 10%; height: 100%; background-color: #cf0000;" valign="top">
                        <iframe  onload="{TuneHeight('left','left');}" src="test1.aspx"  frameborder="0" style="border-left-width: thin; border-top-style: none; border-right-style: none;
                            border-bottom-style: none; background-color: #cf0000;" name="left" id="left"
                            width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="no" src="MainMenu.aspx">
                        </iframe>
                    </td>
                    <td style="background-color: #8c1211; width: 1px">
                        |</td>
                    <td valign="top" style="width: 90%; height: 100%; background-color: #cf0000;">
                        <iframe onload="{TuneHeight('right','right');}" src="test2.aspx"  frameborder="0" style="border-left-width: thin; background-color: #cf0000;"
                            name="right" id="right" width="100%" height="100%" marginwidth="0" marginheight="0"
                            scrolling="no" ></iframe>
                    </td>
                </tr>
            </table>

艾伦之家
关注
自动调节iframe高度，而不显示其滚动条 js
11-23
js脚本： 自动调节iframe高度，而不显示其滚动条
iframe窗口高度自适应的又一个巧妙实现思路
12-10
domainA 中有一个页面index.html，通过iframe嵌套了domainB中的一个页面other.html 由于other.html页面在iframe中显示，而且其页面内容会动态的增加或减少，现在需要去掉iframe的滚动条 由于javascript同源策略的限制，无法进行跨域操作，使得问题比较棘手 参考了一下网上的做法，引入了一个代理页面，或者叫做中介 agent.html，属于domainA 然后，在domainB 中的other.html中，再使用iframe将agent.html进行嵌套 好了，现在情况是这样的： index.html 使用iframe 嵌套 other.h
设置html iframe的高宽自动,html - 让iframe根据内容自动调整高度而不使用滚动条？...
weixin_32050773的博客
06-03 827
html - 让iframe根据内容自动调整高度而不使用滚动条？这个问题在这里已有答案：调整iframe的宽度和高度以适应其中的内容 27个答案例如：frameborder="0" scrolling="no" id="iframe"> ...我希望它能够根据其中的内容调整其高度，而不使用滚动。17个解决方案552 v...
iframe 自适应高度的多种实现方式
u012732909的博客
05-11 6022
iframe高度自适应内容 需求：实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 设置iframe 自适应高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以通过css来给它直接定义一个高度，同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。 一、iframe内容未知，高度可预测 这个时候，我们可以给它添加一个默认的css...
iframe的height自动调整,不出现滚动条
Amethyst
07-20 3986
 2。让iframe的height自动调整以适应里面的内容，不出现滚动条。在父页面中     iframe中页面:function window.onload(){  var div = window.parent.document.getElementById(div1);  div.style.height=document.body.scrollHeight+20;}3.使div在d
点击菜单通过iframe的src改变来显示不同的页面。iframe能高度自适应，iframe滚动但是不显示滚动条
肖肖肖丽珠的博客
01-21 1028
当我们不使用任何的框架来写官网，把几个不同的页面怎么能在菜单改变的时候放在一起呢？ 顶部菜单和底部的一般是不变的。变得是中间的内容，那么我们考虑一个总的页面，含有不变的元素，然后变得内容通过iframe的src改变来实现。那么需要考虑下面的两个问题： 1.怎么让iframe能高度自适应，宽度占据100%； 页面的布局是这样的 <div class="head"> <ul class="nav"> <li class="layui-nav-i...
处理iframe自适应高度的js方法
zhzhiqun的专栏
04-07 136
js代码 [code="java"] //taolm 用来处理iframe自适应高度的js方法 //down 参数为iframe的id function dyniframesize(down) { var pTar = null; if (document.getElementById){ pTar = document.getElementById(down);...
JQuery插件第二十四个:自动调节iframe高度
chinet_bridge的专栏
02-12 2055
(function ($) { $.fn.iframeSize = function(options){ var defaults = {} var opts = $.extend(defaults, options); function _dyniframesize(ifr){ var height=0,width=0;
6种iframe高度自适应的方法
web前端开发
03-12 3万+
js自适应高度，实际上就是设置iframe的高度，设置等于内嵌网页的高度，从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度，同样可以...
iframe实现全屏，高度自适应浏览器实现
Java小皮孩
12-15 2万+
iframe <iframe id="iframe" name="iframe" height="100%" width="100%" src="https://www.baidu.com" scrolling="auto" frameborder="0" onload="changeFrameHeight()"> </iframe> iframe的参数 ifra
设置iframe的高度自适应，无滚动条
shzy1988的专栏
01-22 1104
1.html代码如下： 2.在页面添加js方法，setSrc是给iframe的src属性赋值，如果src是固定的，可以在iframe的onload方法调用iframeLoadComplete方法 function setSrc(url){ var $iframe = $("#content_right")[0]; $iframe.src=url; iframeLoadC
iframe不显示滚动条并且设置动态高度、添加内部样式和脚本
生而为人我很抱歉
11-04 1195
【代码】iframe不显示滚动条并且设置动态高度、添加内部样式和脚本。
IFrame自动适应内容高度，不出现滚动条
小黑兔博客
11-30 1630
在页面中想要插入一个IFRAME,但需要这个Iframe随着Iframe里的内容高度自动调整高度，这个时候方法有很多种，在这里只给大家介绍其中一种方法，也是比较实用方便的方法。 代码: 将下面JS代码放在之间: function SetCwinHeight(iframeObj){ if (document.getElementById){ if (iframeObj ...
[经验] 解决iframe标签100%宽高时出现滚动条问题
KyaruChan的博客
02-28 3065
iframe标签满宽高时的滚动条问题
iframe 自适应高度 去掉iframe滚动条 只留外面页面的滚动条
37度2
05-23 1万+
解决方法如下： 在iframe所调用的页面增加如下代码： $(document).ready(function(){   if(window.parent != window){     parent.document.getElementById("mainMenuIframe2").style.height = (document.body.scrollHeight+30)+"px
[前端]解决Iframe即使设置高度100%,但还是显示滚动条scrollbar的问题
最新发布
斯幽柏雷科技
07-24 990
解决iframe触发滚动条问题,overflow:auto;height:100%;
iframe自适应高度
djt的专栏
06-05 2455
来自:http://ued.koubei.com/2008/05/07/iframe-auto-fit-height/这贴比较长，没有耐性的朋友请直接拖到帖子末尾的代码示例，或者直接去玩我提供的Demo。Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html下面开始讲：通过Google搜索iframe 自适应高度，结
让iframe自适应大小 解决方案
热门推荐
小马的专栏
11-13 3万+
 第一种：        onload="this.height =   document.frames[src].document.body.scrollHeight" />例子：1，创建页面 test.html 。 页面中含有一个 iframe，name为 ifrname ，id为 ifrid， src 为 iframe.html页面。  scrolling="">
自动计算iframe的高度，避免滚动条
weixin_42117413的博客
02-28 806
1.于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo(){ var s = ""; s = " 网页可见区域宽：" document.body.clientWidth; s = " 网页可见区域高：" document.body.clientHeight; s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)"; s = " 网页可见区域高：" d.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值