vue组件内嵌一个iframe,现在想要在iframe内获取父vue组件内信息,由于本人技术有限,采用的是H5新特性PostMessage来解决跨域问题。

postMessage内涵两个API:

onMessage:消息监听

postMessage:消息发送

举个栗子,比如我要改变iframe内字体变成跟父级一样,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> </head> <body> <div id="father" class="father" style="width: 100px;height: 100px;border: solid 1px #333;color: blue;" onclick="sentPost()">
<div>father</div>
</div> <iframe src="son.html" id="son"></iframe> <script type="text/javascript">
function sentPost() {
var iframeWin = document.getElementById('son').contentWindow;
iframeWin.postMessage(document.getElementById("father").style.color, "*");
}
window.addEventListener("message",function(event){
console.log(event,event.data);
},false);
</script>
</body>
</html>

以上代码将父级字体的颜色发送到子iframe;

子iframe代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container" style="width: 200px;height: 200px;color: red;">son</div>
<script type="text/javascript">
window.addEventListener("message", function(event){
console.log(event);
var color = event.data;
document.getElementById("container").style.color = color;
},false);
</script>
</body>
</html>

子iframe将监听消息然后渲染字体

VUE组件如何与iframe通信问题的更多相关文章

  1. vue组件中使用iframe元素

    需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...

  2. vue 组件 子向父亲通信用自定义方法用事件监听

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...

  3. vue组件父子之间相互通信案例

  4. vue、html与iframe html事件相互调用

    一.html文件中引入的iframe标签 1.在父html中调用子iframe html 中的事件 通过contentwindow属性 document.getElementById("my ...

  5. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  6. vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  7. vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制)

    vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...

  8. vue组件间通信六种方式(完整版)

    本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...

  9. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

随机推荐

  1. perl学习之:@_ $_

    question 1 :数组@xxx调用时,每个元素应该用$xxx[0]/$xxx[1]...   来表示所以$_[0]表示@_的一个元素,和默认缺省变量$_无关,是两个东西请查阅数组元素调用相关章节 ...

  2. perl学习之:use and require

    本文和大家重点学习一下Perl use和require用法对比,这两个函数都是一个意思,加载和引用Perl的模块,或者是子程序,区别在于Perl use是在当前默认的里面去寻找,一旦模块不在指定的区域 ...

  3. npm start问题

    问题:在执行命令npm start 是出现下列问题: npm [] WARN invalid config loglevel="notice" [] npm WARN invali ...

  4. OI中的小智慧

    反正不会咕咕的. sort之类没+1的问题不说 双向边n*2的问题不说 变量n+5的问题不说 1.先生成后判断 (见NOIP 2016 pj t2回文日期) 这个思想在这道题体现的不明显,记得洛谷上面 ...

  5. 在JavaScript中获取Map集合中的key和value值(前提是:既不知道key为什么值,也不知道value有哪些值)

  6. 安装mysql后无法找到临时密码的解决方案

    安装mysql后无法找到临时密码的解决方案 一.环境 系统:CentOS7mysql:5.7.20 二.解决步骤 step1:修改/etc/my.cnf添加: skip-grant-tables   ...

  7. 什么是TLS?

    最近在Istio实验中经常遇到HTTP,HTTPS,TLS等名词,感觉忘得差不多,需要复习一下计算机网络的知识了. 本文参考   http://www.techug.com/post/https-ss ...

  8. POJ 2420 A Star not a Tree?【爬山法】

    题目大意:在二维平面上找出一个点,使它到所有给定点的距离和最小,距离定义为欧氏距离,求这个最小的距离和是多少(结果需要四舍五入)? 思路:如果不能加点,问所有点距离和的最小值那就是经典的MST,如果只 ...

  9. bzoj3142[Hnoi2013]数列 组合

    Description 小 T最近在学着买股票,他得到内部消息:F公司的股票将会疯涨.股票每天的价格已知是正整数,并且由于客观上的原因,最多只能为N.在疯涨的K天中小T观察 到:除第一天外每天的股价都 ...

  10. Codeforces Round #294 (Div. 2) D. A and B and Interesting Substrings [dp 前缀和 ]

    传送门 D. A and B and Interesting Substrings time limit per test 2 seconds memory limit per test 256 me ...