vue中使用postMessage进行跨越传值
想在“当前位置”获取子页面的title属性,但是main页面和子页面在不同的端口上,直接获取会出现:
“Blocked a frame with origin from accessing a cross-origin frame”跨域问题
于是改用postMessage进行跨域访问;
子页面中:
mounted(){
this.frameInfo();
},
methods: {
frameInfo(){
var data = document.title;
console.log(data)
console.log(basepPath)
parent.postMessage(data, '*');//data为传递内容,*修改为具体域名或者ip
},
}
父页面中监听子页面传递来的“message”事件,刚开始我把监听事件放在了,iframe的load事件中监听,每次需要点击两次以上才能获取到
message的监听事件,于是搜索一通, https://segmentfault.com/q/1010000006937415
最后把监听事件放在<script>最底部去执行,就能正常获取了;
……
window.addEventListener('message', function(messageEvent) {
var data = messageEvent.data;
console.info('message from child:', data);
vue.menuTitle = data;
},false);
/*]]>*/
</script>
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage#Example
vue中使用postMessage进行跨越传值的更多相关文章
- Vue中常用的几种传值方式
Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- Vue中常用的三种传值方式
父传子 父子组件的关系可以总结为prop向下传递,事件向上传递.父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息. 父组件: <template> <div> ...
- vue中this.$router.push()路由传值和获取的两种常见方法
1.路由传值 this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...
- vue中兄弟组件间 的传值 bus(可以理解为公共交通)
点击大儿子(头部组件的年月日,下面的都要变化) 就相当于点击了年月日之后,下面的组件重新调接口,参数变化 1.首先随便哪儿写个bus.js 内容如下: import Vue from 'v ...
- vue中 props 多层组件嵌套传值
如:三层嵌套. 父组件=>子组件=>孙子 1. 父组件引用子组件component11 , isShow传值给子组件component11 2. 子组件用 props 接受父组件的值, ...
- 解决在VUE中绑定WebSocket事件无法传值的问题
this.webSocket.onerror =(env)=>{ this.onError(env) }; https://jsfiddle.net/dko6g9a4/1/
- vue中prop传值时加不加v-bind(冒号:)
前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形 ...
- 深度剖析Vue中父给子、子给父、兄弟之间传值!
本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...
随机推荐
- Hadoop大数据通用处理平台
1.简介 Hadoop是一款开源的大数据通用处理平台,其提供了分布式存储和分布式离线计算,适合大规模数据.流式数据(写一次,读多次),不适合低延时的访问.大量的小文件以及频繁修改的文件. *Hadoo ...
- 074、如何安装和配置Rex-Ray?(2019-04-19 周五)
参考https://www.cnblogs.com/CloudMan6/p/7607705.html Rax-Ray 是一个优秀的Docker volume driver ,本节将学习其安装和配置 ...
- CORS跨域 Ajax headers 问题
今天我们遇到了一个CORS跨域的问题Ajax如下 var url = "http://localhost:11980/api/Demo/GetString"; //api地址 $. ...
- 使用JQuery实现图片轮播效果
[效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用f ...
- 简单的Web日志处理细节
- return *this和return this有什么区别?
return *this返回的是当前对象的克隆或者本身(若返回类型为A, 则是克隆, 若返回类型为A&, 则是本身 ). return this返回当前对象的地址(指向当前对象的指针). 转: ...
- Linux initramfs说明
1.前言 最近在尝试对手头的开发板进行移植,此处记录initramfs挂载的基本流程,记录一下,以备后查.分析时是基于linux3.4.2 2. rootfs的挂载 start_kernel-> ...
- input子系统 KeyPad-Touch上报数据格式与机制【转】
转自:https://www.cnblogs.com/0822vaj/p/4185634.html -------------------------------------------------- ...
- 某喷码机品牌U盘存储的配置文件简记
U盘下的 KadexMicro 文件夹是喷码机生成的. 其配置文件存储在如上图位置,后缀 .mjt 实为 xml 文件. 内容如: <?xml version="1.0" e ...
- php中trait的使用
1.php中的trait是啥? 看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait是一种代 ...