VUE组件如何与iframe通信问题
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通信问题的更多相关文章
- vue组件中使用iframe元素
需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...
- vue 组件 子向父亲通信用自定义方法用事件监听
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...
- vue组件父子之间相互通信案例
- vue、html与iframe html事件相互调用
一.html文件中引入的iframe标签 1.在父html中调用子iframe html 中的事件 通过contentwindow属性 document.getElementById("my ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- vue组件通信&&v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
- vuex-- Vue.的中心化状态管理方案（vue 组件之间的通信简化机制）
vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...
- vue组件间通信六种方式（完整版）
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
随机推荐
- perl学习之：@_ $_
question 1 :数组@xxx调用时,每个元素应该用$xxx[0]/$xxx[1]... 来表示所以$_[0]表示@_的一个元素,和默认缺省变量$_无关,是两个东西请查阅数组元素调用相关章节 ...
- perl学习之：use and require
本文和大家重点学习一下Perl use和require用法对比,这两个函数都是一个意思,加载和引用Perl的模块,或者是子程序,区别在于Perl use是在当前默认的里面去寻找,一旦模块不在指定的区域 ...
- npm start问题
问题:在执行命令npm start 是出现下列问题: npm [] WARN invalid config loglevel="notice" [] npm WARN invali ...
- OI中的小智慧
反正不会咕咕的. sort之类没+1的问题不说 双向边n*2的问题不说 变量n+5的问题不说 1.先生成后判断 (见NOIP 2016 pj t2回文日期) 这个思想在这道题体现的不明显,记得洛谷上面 ...
- 在JavaScript中获取Map集合中的key和value值（前提是：既不知道key为什么值，也不知道value有哪些值）
- 安装mysql后无法找到临时密码的解决方案
安装mysql后无法找到临时密码的解决方案 一.环境 系统:CentOS7mysql:5.7.20 二.解决步骤 step1:修改/etc/my.cnf添加: skip-grant-tables ...
- 什么是TLS？
最近在Istio实验中经常遇到HTTP,HTTPS,TLS等名词,感觉忘得差不多,需要复习一下计算机网络的知识了. 本文参考 http://www.techug.com/post/https-ss ...
- POJ 2420 A Star not a Tree？【爬山法】
题目大意:在二维平面上找出一个点,使它到所有给定点的距离和最小,距离定义为欧氏距离,求这个最小的距离和是多少(结果需要四舍五入)? 思路:如果不能加点,问所有点距离和的最小值那就是经典的MST,如果只 ...
- bzoj3142[Hnoi2013]数列 组合
Description 小 T最近在学着买股票,他得到内部消息:F公司的股票将会疯涨.股票每天的价格已知是正整数,并且由于客观上的原因,最多只能为N.在疯涨的K天中小T观察 到:除第一天外每天的股价都 ...
- 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 ...