详解iframe跨域的几种常用方法(小结)


Posted in Javascript onApril 29, 2019

背景

随着业务的发展,自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同,所以这个公共组件就不能方便地被引用了。为解决这个问题,我们把这个组件写成了单独的页面挂到一个域名下,其他项目采用iframe或者webview的方式去加载这个页面,从而实现功能的简单复用。

不过这过程中也产生了很多问题,单是跨域就会出现好几次了。以下我将会介绍我遇到的跨域问题以及一些解决方法。

为什么会跨域

为了保证用户信息的安全,95年的时候Netscape公司引进了同源策略,里面的同源指的是三个相同:协议、域名、端口。
违反了同源策略就会出现跨域问题,主要表现为以下三方面:

  • 无法读取cookie、localStorage、indexDB
  • DOM无法获得
  • ajax请求无法发送

场景

最近在做一个需求,需要用iframe引入一个别人封装好的类似视频播放器的东西。iframe里面有一个全屏的按钮,点击后需要页面让iframe全屏,由于受到同源策略的限制,iframe无法告诉页面全屏。

解决办法

设置domain

document.domain作用是获取/设置当前文档的原始域部分,同源策略会判断两个文档的原始域是否相同来判断是否跨域。这意味着只要把这个值设置成一样就可以解决跨域问题了。

在此我将domain设置为一级域名的值,a页面url为a.demo.com,a页面中iframe引用的b页面url为b.demo.com,具体设置为

document.domain = 'demo.com'

设置完之后,在a页面的window上挂载使iframe全屏的方法

// a页面
window.toggleFullScreen = () => {
 // do something
}

在b页面上可以直接获取到a页面的window对象并直接调用

// b页面
window.parent.toggleFullScreen()

但是这个值的设置也有一定限制,只能设置为当前文档的上一级域或者是跟该文档的URL的domain一致的值。如url为a.demo.com,那domain就只能设置为demo.com或者a.demo.com。因此,设置domain的方法只能用于解决主域相同而子域不同的情况。

使用中间页面

我们还可以使用一个与a页面同域名但不同路由的c页面作为中间页面,b页面加载c页面,c页面调用a页面的方法,从而实现b页面调用a页面的方法。具体操作如下:

在a页面的node层新开一个路由,此路由加载一个c页面作为中间页面,c页面的url为a.demo.com/c。c页面只是一个简单的html页面,在window的onload事件上调用了a页面的方法。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
 <script>
  window.onload = function () {
   parent.parent.toggleFullScreen();
  }
 </script>
</body>
</html>

由于c页面和a页面是符合同源策略的,所以可以避开跨域问题,执行全屏的方法。

postmessage

window.postMessage方法可以安全地实现跨源通信,写明目标窗口的协议、主机地址或端口就可以发信息给它。

// b页面
parent.postMessage(
 value,
 "http://a.demo.com"
);
// a页面
window.addEventListener("message", function( event ) {
 if (event.origin !== 'http://b.demo.com') return;
 toggleFullScreen()
 });

为了安全,收到信息后要检测下event.origin判断是否要收信息的窗口发过来的。

总结

通过以上的方法,我们就可以和iframe自由通信啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 #Javascript
实例详解vue中的$root和$parent
Apr 29 #Javascript
微信网页登录逻辑与实现方法
Apr 29 #Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 #Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 #Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 #Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 #Javascript
You might like
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
php绘制一个矩形的方法
2015/01/24 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
python搭建简易服务器分析与实现
2012/12/15 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Django model select的多种用法详解
2019/07/16 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
python 伯努利分布详解
2020/02/25 Python
python3排序的实例方法
2020/10/20 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
大学校庆邀请函
2014/01/11 职场文书
高中生操行评语
2014/04/25 职场文书
标准单位租车协议书
2014/09/23 职场文书
单位未婚证明范本
2014/11/25 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis