详解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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
用javascript实现分割提取页面所需内容
May 09 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
js 自动播放的实例代码
Nov 19 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 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发电子邮件
2006/10/09 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
JS实现小米轮播图
2020/09/21 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
pytorch 共享参数的示例
2019/08/17 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
税务干部鉴定材料
2014/02/11 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书