iframe跨域的几种常用方法


Posted in HTML / CSS onNovember 11, 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自由通信啦。

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

HTML / CSS 相关文章推荐
CSS3 box-sizing属性
Apr 17 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 #HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 #HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 #HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 #HTML / CSS
跨域修改iframe页面内容详解
Oct 31 #HTML / CSS
html如何对span设置宽度
Oct 30 #HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 #HTML / CSS
You might like
php类常量的使用详解
2013/06/08 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
python中使用while循环的实例
2019/08/05 Python
虚拟机下载python是否需要联网
2020/07/27 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
《狐假虎威》教学反思
2014/02/07 职场文书
松材线虫病防治方案
2014/06/15 职场文书
一般党员对照检查材料
2014/09/24 职场文书
2014个人年度工作总结
2014/12/15 职场文书
保卫工作个人总结
2015/03/03 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL