如何根据iframe内嵌页面调整iframe高宽

解决跨域设置iframe高度的两种方法
本文探讨了在不同域名的页面间通过iframe嵌套时,如何动态设置iframe的高度,介绍了两种实现方式:jsonp接口获取页面尺寸信息和通过同域接口操作iframe DOM属性。

问题来自于工作的实例,我的一个域名A的页面,有个iframe,它可能内嵌了另一个域名B的页面,也可能内嵌域名C的页面,但是呢,B和C的页面大小是不一样的,特别是高是不一样的高,那么我如何设置iframe的height属性呢?

这个本质就是跨域设置的问题。

一种解法

B和C提供一个jsonp接口,让有iframe的页面A来调用,这个jsonp接口的目的就是告诉A,我的页面的高宽各是多少。

第二种解法

1 首先给A页面的iframe设置个id,比如id=”aiframe”

2 B和C页面内嵌一段html:

<iframe src=”http://A.com/detail/iframe?height=200&weight=100”></iframe>

3 其中http://A.com/detail/iframe A提供的一个接口,这个接口返回一段js

<script type=”text/javascript”>parent.parent.getElementById(“aiframe”).style.height=”200px”</script>

由于这个接口是动态的,这里返回的200是根据B或者C调用接口的参数返回的。

再由于这个接口和有iframe的A是同域的,所以可以操作iframe的DOM属性。

补充

第二种解法可以做扩充完善:

1 第2步中的B,C内嵌的html可以使用window.innerHeight来自动获取页面

2 第2步中的内嵌html可以替换成一个A的js文件,这个文件做的事情就是append这个A

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值