iframe的用法,以及如何让iframe自动适应父及的宽度和高度

145658_h2Wr_2848195.png

自适应宽高:

<iframe name="ifa" src="person-datatext.html" frameborder="0" class="iframea" id="iframepage" scrolling="no" οnlοad="iFrameHeight(this);"></iframe>

调用的方法:

function iFrameHeight(elm) {   
					var ifm= elm || $('#iframepage')[0];
				    var subWeb = document.frames ? elm.document : ifm.contentDocument;
				    if(ifm != null && subWeb != null) {
				        setTimeout(function(){
				            ifm.height = $(subWeb.body).height();
				        },12)
				    }
			    }

必须放到服务器上才能看到效果

转载于:https://my.oschina.net/yanyaya/blog/760082

在HTML中,iframe允许在网页中嵌入其他网页或文档。通常情况下,iframe宽度自适应的,会根据父容器的宽度进行调整。但是有时候,由于iframe内部内容的宽度或其他因素,可能需要我们手动设置iframe宽度以适配页面。 要让iframe适应宽度,有几种常用的方法可以尝试: 1. 使用百分比设置宽度:可以在iframe标签中添加width属性,并设置一个百分比,例如width="100%"。这将使iframe宽度自适应其父容器的宽度。但需要注意的是,如果iframe的父容器没有设置宽度或存在其他限制,可能会导致iframe无法完全适应宽度。 2. 使用CSS进行自适应:可以通过CSS样式来控制iframe宽度。首先,为iframe添加一个特定的class或id属性,然后使用CSS选择器来控制它的宽度。例如:.iframe-container { width: 100%; }。这样设置后,iframe自动适应父容器的宽度。 3. 使用JavaScript进行动态调整:如果以上方法无法满足需求,可以使用JavaScript来实现动态调整iframe宽度。通过获取父容器的宽度,并将其赋值给iframe的width属性,可以实现宽度自适应。 需要注意的是,对于跨域的iframe,由于安全策略的限制,可能无法自适应宽度。在这种情况下,需要与被嵌入的网页的所有者进行协商,以获得适当的宽度设置。 总结来说,iframe宽度可以通过设置百分比、使用CSS样式或JavaScript来实现自适应。选择哪种方法取决于具体的需求和限制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值