当前位置: 首页 > news >正文

使用 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,如需转载请自行联系原作者

相关文章:

  • 一起谈.NET技术,Silverlight 游戏开发小技巧:升级和传送点特效1
  • TFS创建团队项目(三)
  • 【编译打包】tengine 1.5.1 SRPM
  • Android中文API(130) —— Html
  • PHP7 学习笔记(十)会话控制
  • 压力测试的轻量级具体做法
  • 朝着微服务的方向去做一次数据库拆分
  • apache 开机自启动
  • MongoDB的监控首选:mongostat
  • 采用交换机和HUB连接局域网有什么区别?
  • 进行高效数字化转型工作的7个习惯
  • Microsoft Dynamics AX 2012 正式版虚拟机
  • Python学习笔记-实现探测Web服务质量
  • 隐藏文件无法取消隐藏属性的解决[转]
  • 缓存DNS
  • 《Javascript数据结构和算法》笔记-「字典和散列表」
  • Angularjs之国际化
  • gitlab-ci配置详解(一)
  • js如何打印object对象
  • Laravel 菜鸟晋级之路
  • Python利用正则抓取网页内容保存到本地
  • vue-cli3搭建项目
  • 分类模型——Logistics Regression
  • 京东美团研发面经
  • 使用Gradle第一次构建Java程序
  • 数组的操作
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 一起参Ember.js讨论、问答社区。
  • Hibernate主键生成策略及选择
  • Spring Batch JSON 支持
  • TPG领衔财团投资轻奢珠宝品牌APM Monaco
  • ​3ds Max插件CG MAGIC图形板块为您提升线条效率!
  • ​力扣解法汇总946-验证栈序列
  • ​人工智能书单(数学基础篇)
  • #HarmonyOS:基础语法
  • (1综述)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (附源码)springboot太原学院贫困生申请管理系统 毕业设计 101517
  • (免费分享)基于springboot,vue疗养中心管理系统
  • (四)c52学习之旅-流水LED灯
  • (转)使用VMware vSphere标准交换机设置网络连接
  • .NET Core实战项目之CMS 第十二章 开发篇-Dapper封装CURD及仓储代码生成器实现
  • .NET 回调、接口回调、 委托
  • .NET 使用 JustAssembly 比较两个不同版本程序集的 API 变化
  • .NET 中选择合适的文件打开模式(CreateNew, Create, Open, OpenOrCreate, Truncate, Append)
  • .NET6 开发一个检查某些状态持续多长时间的类
  • .NET开发人员必知的八个网站
  • @Bean注解详解
  • @SuppressWarnings注解
  • @开发者,一文搞懂什么是 C# 计时器!
  • [ 攻防演练演示篇 ] 利用通达OA 文件上传漏洞上传webshell获取主机权限
  • [AutoSar]BSW_Memory_Stack_003 NVM与APP的显式和隐式同步
  • [C#]OpenCvSharp结合yolov8-face实现L2CS-Net眼睛注视方向估计或者人脸朝向估计
  • [ESP32] 编码旋钮驱动
  • [hibernate]基本值类型映射之日期类型