iframe根据内容自动伸缩

最新推荐文章于 2018-06-08 09:57:34 发布
最新推荐文章于 2018-06-08 09:57:34 发布 · 173 阅读 · 0
文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript动态调整iframe元素高度的方法。通过监听iframe加载完成事件并获取其内部文档的高度信息来实现自适应调整。适用于需要iframe内容自适应高度的网页布局。

function SetCwinHeight()
{
var cwin=document.getElementById("cwin");
if (document.getElementById)
{
if (cwin && !window.opera)
{
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
cwin.height = cwin.contentDocument.body.offsetHeight;
else if(cwin.Document && cwin.Document.body.scrollHeight)
cwin.height = cwin.Document.body.scrollHeight;
}
}
}


最后，加入iframe,不能丢掉onload属性，当然了，id也必须也函数中的cwin匹配


<iframe width="778" align="center" height="200" id="cwin" name="cwin" onload="Javascript:SetCwinHeight()" frameborder="0" scrolling="no"></iframe>

iteye_18285
关注
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
例如，可以将父容器设置为一个Flex容器，然后让iframe根据内容自动伸缩。这种方法不涉及JavaScript，但在老旧浏览器中可能不兼容。 ```css .parent-container { display: flex; } .iframe-wrapper { flex: 1; } ....
自动伸缩iframe高度
10-31 470
在编写网页的时候，很多时候要用到自动伸缩iframe高度 ，假如ifram中嵌入的是一个列表，那么增加数据后，刷新列表，iframe高度会自动伸长。删除数据后，iframe高度要自动缩短。将下一段代码拷贝到iframe所在那个html或者jsp页面。在标签后，调用此函数即可。    autoAdjustWindow();//自动调整iframe的高度,自适应树的展开
JavaScript] 让iframe框架网页在任何浏览器下自动伸缩
weixin_34082177的博客
06-08 140
很多朋友都在使用iframe中遇到过不能自动随页面伸缩，特别是动态读取页面的时候，会出现滚动条，影响美观，今天研究一下了，发现了一个简单解决的办法，可以在IE，FIREFOX，OPERA下使用，方法如下，将2段代码照提示保存。 请保存为mainframe.htm 程序代码 &lt;html&gt; &lt;body&gt; &lt;div&gt; &lt;iframe ...
让iframe框架网页在任何浏览器下自动伸缩
zgqtxwd的专栏
05-01 795
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
iframe框架页伸缩功能的实现方法与案例分析
iframe框架页的伸缩功能指的是允许iframe标签内的内容根据浏览器窗口大小或者用户的操作进行调整，以适应不同的显示需求。这需要通过JavaScript等前端技术对iframe的高度或者宽度进行动态控制。在实际应用中，可以...
我要配置一个iframe标签，如何通过不写function的方式让我实现根据iframe内容窗口的大小来自适应高度？
最新发布
11-07
`flex: 1 1 auto`让iframe根据内容自动伸缩，同时保持最小高度[^2][^4]。 --- #### 方法四：aspect-ratio宽高比（固定比例） ```html <iframe src="your-page.html" style="width: 100%; aspect-ratio: 16/9"> ...
首页自动伸缩广告的JavaScript实现代码
“首页自动伸缩广告JS代码”这一主题涉及前端开发中的动态网页交互技术，主要聚焦于使用JavaScript实现广告模块在网页加载或用户行为触发时的自动伸缩效果。这种功能广泛应用于现代网站的首页设计中，尤其常见于电商...
使Iframe能够了根据内容自动伸缩
人生就得折腾
08-25 318
 1.在IE中一定要有以下代码 iframe自动伸缩时还要加上&lt;meta http-equiv="X-UA-Compatible" content="IE=7" /&gt; 2.然后实现下面的函数，在iframe的load时候调用&lt;script type="text/javascript"&gt;var iframeids=["test"]var iframehide="
iframe根据内容自动调整长度.
shiro558的专栏
06-14 1586
由于公司战略的需求,使用iframe(本人还是喜欢include),在使用中发现,随着页面数据的增多,iframe会出现下拉框,长度不够,但是设置足够长的长度时,当数据较少时,页面下方会出现空白域,在google搜索了很久,终于找到了一个代码,使iframe可以根据内容自动调整长度function f_frameStyleResize(targObj){ var targWin = targObj
iframe根据内容自适应
小楼一夜听春雨
03-07 4002
使用iframe的时候，往往因为高度的问题发愁，一般情况下，我们都要让iframe进行自适应才能使得页面展示体验更好，如何自适应了？首先我们要先得到资源的文档流的高度和脱离文档流的高度，便可以做到根据内容的高度进行动态改变iframe的高度，从而实现自适应。 文档流的高度很容易获取到： let h1 = iframe.contentWindow.document....
iframe根据内容自适应高度
qq_42413925的博客
06-08 1402
方法一：function IFrameReSize(iframename) { var pTar = iframename; if (pTar) { //ff if (pTar.contentDocument &amp;&amp; pTar.contentDocument.body.offsetHeight) { pTar.height =...
ifram块不随内容拉伸问题
kaidishi的专栏
09-09 865
加入以下代码块 function reinitIframe(){ var iframe = document.getElementById("frmDeptList"); try{ iframe.height = iframe.contentWindow.document.documentElement.sc
iframe嵌套界面自适应，可高度自由收缩
热门推荐
君哥聊编程
04-01 2万+
iframe嵌套界面自适应，可高度自由收缩           iframe嵌套界面自适应是一个比较常见的功能需求，但是目前网上搜索出来的均不能做到自适应功能，下面是我列出来的解决方案，分享给大家，使用原生的JS编写，适用于chrome,firefox,IE浏览器，下面是代码部分。 HTML: JS： function calcPageHe
Iframe 自动适应页面的高度
dao_net的专栏
02-26 787
function SetCwinHeight(obj) { var cwin = obj; if (document.getElementById) { if (cwin && !window.opera) { if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值