iframe任何浏览器下自动伸缩

最新推荐文章于 2023-04-29 16:20:05 发布
最新推荐文章于 2023-04-29 16:20:05 发布
阅读量670 收藏
点赞数
文章标签： iframe 浏览器 firefox opera border ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/showz_y/article/details/3989177
版权

很多朋友都在使用iframe中遇到过不能自动随页面伸缩，特别是动态读取页面的时候，会出现滚动条，影响美观，今天研究一下了，发现了一个简单解决的办法，可以在IE，FIREFOX，OPERA下使用，方法如下，将2段代码照提示保存。
请保存为mainframe.htm

程序代码 程序代码

<html>  
<body>  
<div>  
<iframe marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"
id="frametb"  scrolling="no" src="frame.htm"  
οnlοad="style.width=this.contentWindow.document.all.formfra.offsetWidth;"
+"style.height=this.contentWindow.document.all.formfra.offsetHeight"></iframe>  
</div>  
</body>  
</html>



请保存为frame.htm

程序代码 程序代码

<html>  
<body  leftmargin="0"  topmargin="0">  
<table  id=formfra  width=200  border=0  bgcolor=green>  
<tr><td>  
胡东平在线空间
<p/>
sfsfere
</td></tr>  
</table>  
</body>  
</html>  


执行mainframe.htm就可以看到效果了。
套用修改的时候要注意mainframe.htm和frame.htm里面定义表格的ID，然后记得在frame语句中修改相对应的调用文件名称和路径，并且注意下面这句：

程序代码 程序代码

οnlοad="style.width=this.contentWindow.document.all.formfra.offsetWidth;"
+"style.height=this.contentWindow.document.all.formfra.offsetHeight"


做相应修改

程序代码 程序代码

this.contentWindow.document.all.调用页面表格ID.offsetWidth
this.contentWindow.document.all.调用页面表格ID.offsetHeight


记住，一定要定义表格ID。

showz_y
关注
html表格展开收缩,HTML 自动伸缩的表格Table js实现
weixin_32260275的博客
05-31 875
HTML 自动伸缩的表格Table js实现发布于 2016-12-16 09:23:59 | 105 次阅读 | 评论: 0 | 来源: 网友投递JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的...
web前端基础教程之“画中画”效果-谈Iframe标记的使用
前端基础入门学习线路
02-21 1253
纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？ 　　答案很肯定：应用Iframe标记！ 　　一、Iframe标记的使用 　　提起...
让iframe框架网页在任何浏览器下自动伸缩
12-03
方法如下，将2段代 码照提示保存。 请保存为mainframe.htm 代码如下: <html>  <body>  <div>  <iframe marginwidth=”0″ marginheight=”0″ hspace=”0″ vspace=”0″ frameborder=”0″  id=”frametb” scrolling=”no” src=”frame.htm”  onload=”style.width=this.contentWindow.document.all.formfra.offsetWidth;” +”style.height=this.contentWindow.d
JavaScript] 让iframe框架网页在任何浏览器下自动伸缩
weixin_34082177的博客
06-08 105
很多朋友都在使用iframe中遇到过不能自动随页面伸缩，特别是动态读取页面的时候，会出现滚动条，影响美观，今天研究一下了，发现了一个简单解决的办法，可以在IE，FIREFOX，OPERA下使用，方法如下，将2段代码照提示保存。 请保存为mainframe.htm 程序代码 &lt;html&gt; &lt;body&gt; &lt;div&gt; &lt;iframe ...
自动伸缩iframe高度
10-31 412
在编写网页的时候，很多时候要用到自动伸缩iframe高度 ，假如ifram中嵌入的是一个列表，那么增加数据后，刷新列表，iframe高度会自动伸长。删除数据后，iframe高度要自动缩短。将下一段代码拷贝到iframe所在那个html或者jsp页面。在标签后，调用此函数即可。    autoAdjustWindow();//自动调整iframe的高度,自适应树的展开
iframe根据内容自动伸缩
淡泊以明志，宁静以致远.
08-01 903
function SetCwinHeight(){var cwin=document.getElementById("cwin");if (document.getElementById){if (cwin && !window.opera){if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)cwin.height
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
例如，可以将父容器设置为一个Flex容器，然后让iframe根据内容自动伸缩。这种方法不涉及JavaScript，但在老旧浏览器中可能不兼容。 ```css .parent-container { display: flex; } .iframe-wrapper { flex: 1; } ....
2023高薪前端面试题（一、前端基础——HTTP/HTML/浏览器）
最新发布
iaz999的博客
04-29 3248
语义化就是构成HTML结构的标签要有意义。比如有这样的标签：header表示页面头部main表示页面主题footer表示页面底部那么这些标签构成的HTML结构就是有意义的，也是语义化的。​ 如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。
frame缩放 iframe随浏览器缩放
liuxueyi521的专栏
12-14 1万+
---引入iframe： src="******" id="luke" name="luke" height="100%" width="100%" frameborder="0" onLoad="iFrameHeight()">   //---当窗口变化时设置iframe的宽度为100%，这样就可以随意缩放；//---如果采用reload也是可以的，但是有时会造成死循环。因为reloa
自适应窗口大小，兼容各浏览器
07-31
自适应窗口大小，兼容各浏览器,高度没有被限制，不会出现水平滚动条哦
iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题
06-03
Iframe自动根据类容改变自己的大小，解决Iframe设置高度后无法缩小！拜一个高人所赐，特表示感谢！
Js+Css 控制iframe内容自动缩放
Admans的专栏
05-19 9878
竖屏横屏效果&lt;div class="h5box"&gt; &lt;iframe src="http://www.sina.com" frameborder="0" width="1280px" height="720px"&gt;&lt;/iframe&gt; &lt;/div&gt;
html遮罩层全屏自适应,iframe自适应缩放始终保持16:9
weixin_36141019的博客
06-01 2605
问题描述不管怎么拖动浏览器窗口，看到的iframe窗口保持16:9，并且看到的iframe页面是一个完整的页面。并且在浏览器窗口中还要垂直水平居中问题出现的环境背景及自己尝试过哪些方法现有的方法可以实现垂直水平居中，但是在resize窗口时候iframe里面看到的只是局部，不是完整的是否要transform:scale()缩放实现相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)*{mar...
html scale 缩放iframe,html - How can I scale the content of an iframe? - Stack Overflow
weixin_32746931的博客
06-16 64
After struggling with this for hours trying to get it to work in IE8, 9, and 10 here's what worked for me.This stripped-down CSS works in FF 26, Chrome 32, Opera 18, and IE9 -11 as of 1/7/2014:.wrap{w...
html缩放 iframe页面大小,html – 为响应式设计缩放iframe仅限CSS
weixin_35960434的博客
06-04 847
解决方案是嵌套的div.我知道,有点hackey,但对于有太多解决方案的问题,这是一个非常简单的解决方案.在此示例中,Youtube视频的宽高比保持为16：9.您的HTML应如下所示：你的样式表：#outer{max-width: 640px;max-height: 360px;width: 100%;height: 100%;}#inner{height: 0px;padding-bottom:...
如何将引入的iframe页面缩小，适应当前页面
前端小贤
11-29 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, m
iframe嵌套界面自适应，可高度自由收缩
weixin_43832556的博客
07-25 1151
最近在做网页时需要使iframe高度自适应，以提高用户体验，网上找了挺多都很复杂，后来在CSDN看到的这段代码简介而有效，故此记录下，感谢博主。
iframe标签控制视频大小及自动播放
热门推荐
Mangojjx的博客
04-12 1万+
项目中问题：quill富文本中插入的视频，表单发送给后台是iframe标签；所以前端拿到的视频为后台直接返回数据渲染，如下： <iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.yinyueriji.net/square/video/26e59459-66fd-0f60-50ba-c...
JavaScript实现跨浏览器自动调整IFrame高度
"该资源提供了一段JavaScript代码，用于实现跨浏览器的IFrame高度自动适应功能，特别是针对IE 6及更高版本、Firefox和Chrome等主流浏览器。代码中定义了一个名为`dyniframesize`的函数，该函数通过获取IFrame元素并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值