跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域、跨域两种情况。
由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错 误:Permission denied to access property 'document'。这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据。这意味着访问一 个web服务的javascript代码通常只有在它也驻留在Web服务本身所在的同一个服务器的时候才有用。
所以在跨域情况下,我们遇到的问题就是:父窗口无法获得被嵌套页面的高度,而且被嵌套页面也无法通过驻留在其服务器上的js修改父窗口Dom节点的属性。所以我们需要一个媒介,来获得被嵌套页面的高度同时又能修改主界面iframe节点的高度。
思路:现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A。 当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后B载入A,并将高度值作为参数赋值给A的 location对象。这样A就可以通过location.hash获得B的高度。(location是javascript里边管理地址栏的内置对象, 比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash 则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以 做一些非常有意义的事情。)。由于A和main页面同域,所以可以修改main的dom节点属性,从而达到我们设置iframe标签高度的目的。
关键代码:
iframe主页面:main.html
<iframe id="iframeB" name="iframeB" src="www.b.com/B.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>
iframe嵌套页面:B.html
<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
hashH = document.documentElement.scrollHeight; //获取自身高度
urlC = "www.a.com/A.html"; //设置iframeA的src
document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递
}
window.onload=sethash;
</script>
中介页面:A.html
<script>
function pseth() {
var iObj = parent.parent.document.getElementById('iframeB');//A和main同域,所以可以访问节点
iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//访问自己的location对象获取hash值
iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
}
pseth();
</script>
同域情况下就不用多说了,直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可。
跨域iframe高度自适应(兼容IE/FF/OP/Chrome)的更多相关文章
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
- [转载]跨域iframe高度自适应
场景: 经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢? 解决: 在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的ifra ...
- 跨域iframe高度计算
一.同域获取iframe内容 这里有两个细节: 1. 取iframe内的文档对象,标准浏览器使用contentDocument属性,IE低版本(IE6,7,8)使用document属性. 2. cal ...
- CSS完美实现iframe高度自适应(支持跨域)
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
- Iframe高度自适应(兼容IEFirefox、同域跨域)
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- Iframe高度自适应(兼容IE/Firefox、同域/跨域)
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- 跨域iframe的高度自适应
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...
随机推荐
- POJ1201Intervals(差分约束系统)
昨天看了下差分约数系统的含义,其实就是如果有n个变量在m个形如aj-ai>=bk条件下,求解的此不等式的方法. 而这种不等式的解法其实就是转化为图论的最小路的算法求解的.我们将上面的不等式边形后 ...
- How to create custom methods for use in spring security expression language annotations
From:http://stackoverflow.com/questions/6632982/how-to-create-custom-methods-for-use-in-spring-secur ...
- cf754 A. Lesha and array splitting
应该是做麻烦了,一开始还没A(幸好上一次比赛水惨了) #include<bits/stdc++.h> #define lowbit(x) x&(-x) #define LL lon ...
- $( document ).ready()&$(window).load()
$( document ).ready() https://learn.jquery.com/using-jquery-core/document-ready/ A page can't be man ...
- java懒汉式单例遇到多线程
单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 在计算机系统中,线程池.缓存.日志对象.对话框.打印机.显卡的驱动程序对象常被设计成单例.这些应用都或多或少具有资源管理器的功 ...
- MFC容器类介绍
我们知道如果是单个的少数几个值弄些int , long,float ,double等类型的变量来装这些值就行了.但如果值太多这样就比较麻烦.当然数据超级多时就直接放数据库里存着去了. 但如果数值不多不 ...
- 收集计算机分区信息,去除列中的重复值(Excel)(空行)
收集计算机分区信息 $servers = gc D:\serverlist.txt $result = $results = $null $results = @() foreach ($server ...
- Python在Windows上的安装
1:下载 http://dlsw.baidu.com/sw-search-sp/soft/6e/17016/python-3.3.5.1395976247.msi 2:直接next安装 3:验证安装是 ...
- Codeforces Round #340 (Div. 2) C. Watering Flowers 暴力
C. Watering Flowers 题目连接: http://www.codeforces.com/contest/617/problem/C Descriptionww.co A flowerb ...
- Java中怎样由枚举常量的ordinal值获得枚举常量对象
Java1.5提供了关键字enum,能够通过该关键字方便得定义自己须要的枚举类型,比方 enum Season { SPRING, SUMMER, AUTUMN, WINTER } 就定义了一个季节枚 ...