Vue中iframe 结合 window.postMessage 实现跨域通信

目录
  • 一、前言
  • 二、应用场景
    • 2.1 嵌入页面
    • 2.2 postMessage 实现父子页面通信
    • 2.3 子页面向父页面传值
    • 2.4父页面代码：

一、前言

什么是iframe？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

什么是postMessage？

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

二、应用场景

在一个项目的页面中嵌入另一个项目的页面，需要实现父子，子父页面的通信。

2.1 嵌入页面

iframe使用如下（端口为8080）：

<iframe id="myframe" name="myframe" :src="src" ref="iframe" scrolling="no" width="350px" height="350px" frameborder="0"></iframe>

在data中定义src引入端口号为8081的页面：

src:"http://127.0.0.1:8081/#/Login",

那么问题就来了，嵌入的登录模块属于子页面（另一个项目，端口号8081）的东西，如何能让我自己的页面知道用户点击了蓝色按钮，达到登录后隐藏登录框的效果呢？在这里，postMessage就派上了用场。

2.2 postMessage 实现父子页面通信

window.postMessage中的window在iframe中是指什么呢？

我们首先要获取到iframe的contentWindow属性放到mounted钩子函数中。

mounted() {
  this.iframeWin = this.$refs.iframe.contentWindow;
},

目标源写成 * ，具备了两个必要参数，我们就可以开始使用postMessage了。

2.3 子页面向父页面传值

在这个项目中，我需要在点击login按钮（子页面），并且登陆成功后在父页面中隐藏登录模块。

父页面如何才能知道用户点击了子页面按钮？

postMessage只是一个沟通的桥梁。

子页面说话，父页面需要听到。所以我们在父页面的mounted函数中写一个监听。

mounted() {
    window.addEventListener('message', this.handleMessage);
    this.iframeWin = this.$refs.iframe.contentWindow;
},

下面为完整代码

子页面代码：

 submit() {
   // 向父vue页面发送信息
   window.parent.postMessage({
     data: {
       code:"success",
       test:"我是子页面的test！"
     }
   }, '*');
 }

 submit() {
   // 向父vue页面发送信息
   window.parent.postMessage({
     data: {
       code:"success",
       test:"我是子页面的test！"
     }
   }, '*');
 }

父页面代码：

<div class="login" v-if="!loginStatus">
   <iframe id="myframe" name="myframe" :src="src" ref="iframe" scrolling="no" width="350px" height="350px"  frameborder="0"></iframe>
</div>
 methods: {
     handleMessage (event) {
       const data = event.data.data
        if(data.code === "success"){
            alert(data.test)
        }
     }
}

mounted() {
    window.addEventListener('message', this.handleMessage);
    this.iframeWin = this.$refs.iframe.contentWindow;
},

2.4父页面代码：

sendMessage () {
   // 外部vue向iframe内部传数据
   this.iframeWin.postMessage({
   cmd: 'success',
   data: "我是来自父页面的data!"
}, '*')

子页面监听同理。

三、拓展阅读 《Vue进阶（九十二）：窗口间通信postMessage》

赞 (0)

相关推荐

  • 客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解

    客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解

    本篇博客主要说明: 前后端框架(本例中是vue和koa)如何发送请求?获取响应? 以及跨域问题如何解决? vue部分: import App from './App.vue' import Axios from 'axios' new Vue({ el: '#app', render: h => h(App), mounted(){ Axios({ method: 'get', url: 'http://localhost:3000', }).then((response) => { cons

  • 解决vue跨域axios异步通信问题

    在项目中,常常需要从后端获取数据内容.特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点.好在解决方案很多. 在vue中,在开发中,当前使用较多的是axios进行跨域请求数据,但不少人遇到如下问题: •异步通信,无法同步执行 •无法集中管理 •不便阅读 •还未请求成功就调转了 •then里面的逻辑越来越繁杂 以往的网络请求的写法如下: // main.js // 引入axios import axios from 'axios' Vue.prototype.$axi

  • Vue 使用postMessage 实现父子跨域通信

    目录 一.跨域通信 二.示例 三.拓展阅读 vue项目中postMessage的使用总结 postMessage简介 项目搭建 一.跨域通信 1.子向父通信parent.html // 页面销毁前,务必去除监听器,否则会造成资源泄露! beforeDestory () { window.removeEventListener('message', this.listenerFun) } mounted() { window.addEventListener('message',this.list

  • vue中iframe使用以及结合postMessage实现跨域通信

    目录 使用场景 需求 iframe使用 基本使用 常用属性 iframe高度自适应 获取iframe的内容 同域下获取父级/子级内容 iframe跨域 postMessage通信 在vue中使用 使用场景 需求 在一个H5项目的页面中以url的方式嵌入另一个项目的页面.(不得不使用iframe) 而为了兼容移动端api(封装的一个移动端api,iframe内嵌页面不生效),需要实现父子页面的通信 (使用postMessage). iframe使用 基本使用 直接在页面嵌套iframe标签指定sr

  • vue内嵌iframe跨域通信的实例代码

    目录 vue内嵌iframe跨域通信 1.Vue组件中如何引入iframe? 2.vue如何获取iframe对象以及iframe内的window对象? 3.vue如何向iframe内传送信息? 4.iframe内如何向外部vue发送信息? vue内嵌iframe跨域通信 1.Vue组件中如何引入iframe? <template> <div class="act-form"> <iframe :src="src"></ifr

  • Vue中iframe 结合 window.postMessage 实现跨域通信

    目录 一.前言 二.应用场景 2.1 嵌入页面 2.2 postMessage 实现父子页面通信 2.3 子页面向父页面传值 2.4父页面代码: 一.前言 什么是iframe? iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 什么是postMessage? window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数

  • JavaScript使用HTML5的window.postMessage实现跨域通信例子

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同: 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动

  • vue中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

  • vue中proxy代理的用法(解决跨域问题)

    目录 声明 1. 首先我们应该知道 2. 跨域,什么是跨域呢? 问题 跨域的解决方案 代理服务器是如何解决跨域的? proxy配置 以vue cli3.0为例 总结 声明 1. 首先我们应该知道 前端axios在本地发送的请求如果你不把路径写全,它都是会默认加上自己项目所在的端口,就比如说: axios.get('/login') axios.get('/hello') 当我点击发送按钮之后,以上两行代码实际为: http://localhost:8080/login http://localh

  • 使用postMessage实现iframe跨域通信的示例代码

    使用postMessage实现iframe跨域通信的示例代码

    1.父页面内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>主页面</h1> <iframe id="child" src="http://10.0.0.159:8080"></i

  • vue中iframe的使用及说明

    目录 关于iframe的使用 获取iframe里面的内容 CDM跨域 使用iframe的总结 代码展示 关于iframe的使用 iframe在同域时能自由操作iframe和父框架的内容(DOM),在跨域时可以实现页面跳转. <iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder=&quo

  • 利用iframe实现ajax跨域通信的实现原理(图解)

    利用iframe实现ajax跨域通信的实现原理(图解)

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

随机推荐