使用 <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文件之间就可以“交互”了。










本文转自 xinsir999 51CTO博客,原文链接:http://blog.51cto.com/xinsir/1858731,如需转载请自行联系原作者
相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
18天前
|
移动开发 前端开发 安全
iframe实现跨域通信的方法
iframe实现跨域通信的方法
25 6
|
4月前
|
JavaScript
iframe 跨域通信和不跨域通信
iframe 跨域通信和不跨域通信
|
JavaScript 安全 前端开发
浏览器原理 31 # 同源策略:为什么XMLHttpRequest不能跨域请求资源?
浏览器原理 31 # 同源策略:为什么XMLHttpRequest不能跨域请求资源?
90 0
浏览器原理 31 # 同源策略:为什么XMLHttpRequest不能跨域请求资源?
|
Web App开发 JavaScript 安全
如何基于 iframe 解决跨域?
一般跨域听得比较多的方案是 Nginx 代理,CORS,而 JSONP 和 iframe 的跨域解决往往只在背八股文的时候出现,而且老是只给 JSONP 的实际操作手段,老是找不着 iframe 的实际操作,所以这篇文章就是介绍如何基于 iframe 解决跨域
|
Web App开发 移动开发 安全
「趣学前端」关于iframe跨域通信
用技术实现梦想,用梦想打开创意之门。之前开发遇到了iframe跨域通信的问题,今天分享一下解决方案,顺便总结一波知识点。
835 1
「趣学前端」关于iframe跨域通信
window.postMessage()实现跨域通信和页面间数据通信
window.postMessage()实现跨域通信和页面间数据通信
240 0
|
JavaScript
iframe通信案例
vue项目中使用iframe通信的代码示例
134 0
|
前端开发 安全 算法
Iframe通信指南🧭
Iframe通信指南🧭
590 0
Iframe通信指南🧭
|
Web App开发 JavaScript 前端开发
浏览器同源策略,及跨域解决方案
一、Origin(源) 源由下面三个部分组成: 域名 端口 协议 两个 URL ,只有这三个都相同的情况下,才可以称为同源。 下来就以 "http://www.example.com/page.html" 这个链接来比较说明: 对比URL 结果 原因 http://m.
2192 0
iframe跨域解决方案
    公司某个功能用的是iframe,由于跨域的原因,我们不能直接设置父级页面iframe的高度,所以用了一个中间页home来完成父级页面iframe的高度设置,这种中间页其实很多时候不好用,因为涉及到页面跳转和刷新,每次都得刷一下页面,而消息发送成功页的一个定位到顶部的功能,就是由于页面刷了一次导致体验不好,除了体验,这种中间页跳转的做法也很蹩脚和繁琐。
1403 0