如何根据iframe内嵌页面调整iframe高宽
问题来自于工作的实例,我的一个域名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
本文转自轩脉刃博客园博客,原文链接:http://www.cnblogs.com/yjf512/p/3456637.html,如需转载请自行联系原作者

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
如何根据iframe内嵌页面调整iframe高宽续篇
接着昨天的工作如何根据iframe内嵌页面调整iframe高宽来说,按照文章中说的第二种方法实现代码如下: 实现 A.com/detail/view 页面的iframe代码如下: 1 <iframe id= "thirdiframe" src= "http://B.com/location/testiframe" width= "100%" scrolling= "no" frameborder= "0" height= "900" ></iframe> B.com是第三方的域名,所以要求在B.com/location/testiframe的页面增加下面的html 1 2 3 <iframe id= "aiframe" src= "#" style= "display:none" ></iframe> <script type= "text/javascript" >this.document.getElementById( "aiframe" ).src= "http://A.com/detail/iframe?height...
-
下一篇
使用注解属性绑定
大家应该知道在Spring中有一个注解@Value,他可以帮助我们来讲Spring加载的配置文件(*.perperties)文件中的信息自动的注入到我们的非静态属性中的。 一般情况下我们会这样使用: 1.首先在Spring的配置文件中加载属性文件: 1 <context:property-placeholder location= "classpath:component.properties" ignore-unresolvable= "true" /> 然后在Java代码中使用@Value注解就可以注入值了,比如: 1 2 @Value ( "${open_office_install_home}" ) private String openOfficeInstallHome; 当然属性如果是static的话是不能注入的。 其实这个自动注入的过程实现起来比较简单,我们下面通过一个例子来大致描述一下这个原理吧,这个例子是我写的,并不代表Spring的源码就是这么实现的。但是原理是一样的。 1.我们先自定义一个注解: 1 2 3 4 5 6 7 8 9 10 11 ...
相关文章
文章评论
共有0条评论来说两句吧...