秦代吧 关注:25,664贴子:170,997
  • 1回复贴,共1

js之iframe子页面与父页面通信

只看楼主收藏回复

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。


IP属地:陕西1楼2016-05-20 09:09回复
    二、跨域父子页面通信方法
    如果iframe所链接的是外部页面,因为安全机制就不能使用同域名下的通信方式了。
    父页面向子页面传递数据
    实现的技巧是利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data就可以了,例如:
    1. 在子页面中通过setInterval方法设置定时器,监听location.href的变化即可获得上面的data信息
    2. 然后子页面根据这个data信息进行相应的逻辑处理
    子页面向父页面传递数据
    实现技巧就是利用一个代理iframe,它嵌入到子页面中,并且和父页面必须保持是同域,然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe,然后由于代理的iframe和主页面是同域的,所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。


    星座王
    点亮12星座印记,去领取
    活动截止:2100-01-01
    去徽章馆》
    IP属地:陕西3楼2016-05-20 09:10
    回复