使用 <Iframe>实现跨域通信

什么是iframe

iframe就是我们常用的iframe标签:<iframe>。iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。

iframe的用法有很多,接下来说一下iframe的其中一个比较实用的用法----跨域通信

假设现在有两个系统A,B:A系统的某个页面有一部分显示的内容是B系统的,怎么办?

<div class="modal-body" id="housekeeperBody">

<iframe src="http://erp.young51.com/user/indexIframe.action"  name="OpenartDialog14577934462321"  frameborder="0" allowtransparency="true" style="width: 900px; height: 565px; border: 0px none;">

//这里就是你要加载的页面

</iframe>
</div>

这里iframe的核心属性就是“src”它表示你要引用的页面一个请求(这里的src实际就是对B系统的一个请求,B将返回你一个HTML,如果B系统是另外一个负责的,那么关于这个请求的另一端你就不必关心了)。和其他html标签一样,它也有一些其他的属性,如该列的name,height,style等等

读到这里会遇到一个问题

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

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

URL

说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js
同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
http://www.cnblogs.com/a.js
http://www.a.com/b.js
不同域名 不允许

第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,

第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。

我的解决方案是:document.domain+iframe的设置

对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain
=
‘a.com’;然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。

时间: 2024-12-19 18:29:56

使用 <Iframe>实现跨域通信的相关文章

使用 postMessage + iframe 实现跨域通信

一.postMessage window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机(两个页面的模数 Document.domain设置为相同的值)时,这两个脚本才能相互通信.window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全. 调用 postMessage() 方法时,向目标窗口派发一个

iframe跨域通信方案

概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象.更详细的说明可以看下表: 对于主域相同子域不同的通信方法这里不一一列举了,这里主要讲解一下跨主域的通信问题. postMessage方法 window.postMe

【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

Html5 跨域通信

H5 跨域通信: 在主页面中通过iframe嵌入外部页面,通过iframe的window对象postMessage方法向iframe页面传递消息. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>跨域通信示例</title> 6 <script type="text/javascript">

跨域通信方法总结

本文总结了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

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

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

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

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