详解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 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
微信小程序实现点击生成随机验证码
Sep 09 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使用内置函数生成图片的方法详解
2016/05/09 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python 从相对路径下import的方法
2018/12/04 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
法定代表人授权委托书范文
2014/08/02 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android