想在“当前位置”获取子页面的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进行跨越传值的更多相关文章

  1. Vue中常用的几种传值方式

    Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...

  2. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  3. Vue中常用的三种传值方式

    父传子 父子组件的关系可以总结为prop向下传递,事件向上传递.父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息. 父组件: <template> <div> ...

  4. vue中this.$router.push()路由传值和获取的两种常见方法

    1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...

  5. vue中兄弟组件间 的传值 bus(可以理解为公共交通)

    点击大儿子(头部组件的年月日,下面的都要变化) 就相当于点击了年月日之后,下面的组件重新调接口,参数变化       1.首先随便哪儿写个bus.js 内容如下: import Vue from 'v ...

  6. vue中 props 多层组件嵌套传值

    如:三层嵌套. 父组件=>子组件=>孙子 1. 父组件引用子组件component11 , isShow传值给子组件component11 2. 子组件用  props 接受父组件的值, ...

  7. 解决在VUE中绑定WebSocket事件无法传值的问题

    this.webSocket.onerror =(env)=>{ this.onError(env) }; https://jsfiddle.net/dko6g9a4/1/

  8. vue中prop传值时加不加v-bind(冒号:)

    前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形 ...

  9. 深度剖析Vue中父给子、子给父、兄弟之间传值!

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

随机推荐

  1. DirectX11--HLSL编译着色器的三种方法

    前言 本教程不考虑Effects11(FX11),而是基于原始的HLSL. 目前编译与加载着色器的方法如下: 使用Visual Studio中的HLSL编译器,随项目编译期间一同编译,并生成.cso( ...

  2. shell 生成文件统计信息

    #!/bin/bash #file name : filestat.sh if [ $# -ne 1 ]; then echo "Usage is $0 basepath"; ex ...

  3. css实现背景模糊,但不影响背景上的内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ueditor复制文本有多余的空行问题

    今天从ueditor中复制文本,粘贴到记事本中发现每一行后面都多了一个空行. Ueditor中的文本如图: 本来只有三行,全选复制所有内容,再粘贴到记事本中发现有每一行文本后面都有多余的空行: 如果我 ...

  5. 「JavaScript面向对象编程指南」闭包

    闭包 JS只有函数作用域,函数外为全局变量,函数内为局部变量 绿圆是函数fn的作用域,在这范围内可访问局部变量b和全局变量a,橙圆是fn内部函数inner的作用域,此范围内可访问自身作用域内的变量c, ...

  6. 手把手使用Git?

    下载和安装:Git下载和安装教程 学习使用Git:学习Git 安装TortoiseGit:教程 TortoiseGit与Git生成SSH密钥添加到GitHub账号的简单方法:解决方法

  7. python 字符串转化为json、post请求

    在json模块有2个方法, loads():将json数据转化成dict数据 dumps():将dict数据转化成json数据 load():读取json文件数据,转成dict数据 dump():将d ...

  8. 云栖社区用机器人爬CSDN的文章?

    这个云栖社区的文章https://yq.aliyun.com/ziliao/539322 这篇文章是我13年写的,不知道咋插入图片,见谅. 下面是我的文件记录 分享XAML图标的网站 原创 2013年 ...

  9. LNMP安装目录及配置文件位置

    LNMP相关软件安装目录 Nginx 目录: /usr/local/nginx/ MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/usr/local/mysql/v ...

  10. python使用正则解析网络地址的各个部分

    参考文章: https://www.cnblogs.com/ingd/p/6182571.htmlimport re def resolveAddress(url): ""&quo ...