iframe跨域通信方案

概述

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:

首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:

对于主域相同子域不同的通信方法这里不一一列举了,这里主要讲解一下跨主域的通信问题。

postMessage方法

window.postMessage 是一个用于安全的使用跨源通信的方法。通常,不同页面上的脚本只在这种情况下被允许互相访问,当且仅当执行它们的页面所处的位置使用相同的协议(通常都是 http)、相同的端口(http默认使用80端口)和相同的主机(两个页面的 document.domain 的值相同)。 在正确使用的情况下,window.postMessage 提供了一个受控的机制来安全地绕过这一限制。

兼容性

http://caniuse.com/#search=postMessage

具体用法

  • 发送消息:destination.postMessage(message, targetOrigin);

    • destination: 目标窗口
    • message:发送的消息
    • targetOrigin: 定义发送消息的范围
  • 监听接受消息:window.addEventListener(‘message’,callback,false);

已知问题

  1. 部分版本IE8/9浏览器只支持iframe通信,不支持tabs之间通信。
  2. IE8/9不能传输对象,只能传输string。

参考资料

window.navigator(适用于ie6/7)

ie6/7有个漏洞,父窗口与所有的iframe共享window.navigator对象,可以利用这个漏洞,由于ie6/7不支持postMessage,所以可以利用这个漏洞对ie6/7做兼容跨域通信支持。

具体用法

途中A过程和B过程都是初始化监听事件,类似于onmessage事件。只不过实现方法不一样而已。

按执行顺序来描述的话,如下:

  • B: 父窗口向window.navigator添加一个监听函数,并打上父窗口的戳。
  • A: 子窗口向window.navigator添加一个监听函数,并打上子窗口的戳。
  • C: 父窗口执行post的时候,调用原先子窗口添加在navigator里的监听函数,并将要传输的数据作为函数参数传入。
  • D: 子窗口执行post的时候,调用原先父窗口添加在navigator里的监听函数,并将要传输的数据作为函数参数传入。

注意:子窗口和父窗口要找到对方的监听函数必须得事先知道对方在添加监听函数的时候打上的戳

时间: 2024-10-17 08:45:44

iframe跨域通信方案的相关文章

[HTML5_WebWorkers]利用HTML5的window.postMessage实现跨域通信

由于同源策略的限制,JavaScript跨域的问题,一直是一个颇为棘手的问题,为了解决js的跨域,web开发人员是煞费苦心,研究了各种跨域方案,如果有机会的话,明河以后会一一展示给各位,今天明河重点介绍下html5新引入的postMessage跨域方案. 1.哪些场景要考虑跨域问题? 明河这二周在处理淘宝添加收藏夹的重构,里面就有一个非常经典的跨域问题.添加收藏弹出层外层是淘宝商城页面域名是tmall.com,而弹出层内部的页面域名却是taobao.com,接下来的问题就是我现在希望弹出层内部的

非常全的跨域实现方案

由于同源策略的限制,满足同源的脚本才可以获取资源.虽然这样有助于保障网络安全,但另一方面也限制了资源的使用. 那么如何实现跨域呢,以下是实现跨域的一些方法. 一.jsonp跨域 原理:script标签引入js文件不受跨域影响.不仅如此,带src属性的标签都不受同源策略的影响. 正是基于这个特性,我们通过script标签的src属性加载资源,数据放在src属性指向的服务器上,使用json格式. 由于我们无法判断script的src的加载状态,并不知道数据有没有获取完成,所以事先会定义好处理函数.服

使用 <Iframe>实现跨域通信

什么是iframe iframe就是我们常用的iframe标签:<iframe>.iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容. iframe的用法有很多,接下来说一下iframe的其中一个比较实用的用法----跨域通信 假设现在有两个系统A,B:A系统的某个页面有一部分显示的内容是B系统的,怎么办? <div class="modal-body" id="

【JavsScript】父子页面之间跨域通信的方法

由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主域名相同的情况,可以设置domain来解决问题,今天就不讨论这种情况了. 对于其他跨域通信的问题,我想又可以分成两类: 其一(第一种情况)是a.com下面的a.

【JavaScript】父子页面之间跨域通信的方法

由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主域名相同的情况,可以设置domain来解决问题,今天就不讨论这种情况了. 对于其他跨域通信的问题,我想又可以分成两类: 其一(第一种情况)是a.com下面的a.

跨域通信/跨域上传浅析

web项目跨域问题主要包括跨域通信和跨域上传,下面对这两方面分别做一个分析,具体项目中用哪个方案要看项目具体需求. 跨域通信 jsonp hash server proxy window.name cors postmessage redirect jsonp 原理:发起一个GET请求,回调函数带到请求参数中,把数据发送过去 坏处:服务器需要支持jsoncallback参数 好处:业界比较通用的方案,包括打点等操作都可以用类似技术 浏览器支持:chrome/firefox/safari/oper

跨域通信方法总结

本文总结了5种较常见的跨域通信方法,如下: 1)jsonp 2)CORS(Cross OriginResource Sharing,跨源资源共享) 3)主域相同可以设置document.domain 4)利用window.name实现跨域 5)利用window.name实现跨域 jsonp 讲解jsonp之前先看一个例子:假设域A.com上有一个页面a.html,代码如下: var dosomething= function(data){ alert('我是A.com域上的页面,可以被跨域的re

父子页面之间跨域通信的方法

作者: lyndon  来源: 腾讯大讲堂  发布时间: 2014-08-08 08:59  阅读: 5025 次  推荐: 20   原文链接   [收藏] 由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 其中编号6.7两种情况同属于主

[转]父子页面之间跨域通信的方法

父子页面之间跨域通信的方法 2014/08/08 · Web前端 由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时还是有些不够明白的地方,深入了解之后,这里给大家补充一点更具体的做法. 先来看看哪些情况下才存在跨域的问题: 编号 URL 说明 是否允许通信 1 http://www.a.com/a.js http://www.a.com/b.js