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组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
随机推荐
- 122. Best Time to Buy and Sell Stock II@python
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- 牛客OI赛制测试赛2（0906）
牛客OI赛制测试赛2(0906) A :无序组数 题目描述 给出一个二元组(A,B) 求出无序二元组(a,b) 使得(a|A,b|B)的组数 无序意思就是(a,b)和(b,a) 算一组. 输入描述: ...
- 0xC00000FD: Stack overflow (parameters: 0x00000000, 0x003E2000).错误
这个错误是“栈溢出”,每个线程的栈空间默认是1MB,局部变量(非静态)都在栈中分配,当使用的局部变量所需空间过多时,就会溢出.你检查一下程序,看看哪些函数中定义了大数组,把大数组改成用new分配,函数 ...
- 2019天梯赛练习题（L1专项练习）
7-1 水仙花数 (20 分) 水仙花数是指一个N位正整数(N≥3),它的每个位上的数字的N次幂之和等于它本身.例如:1. 本题要求编写程序,计算所有N位水仙花数. 输入样例: 3 输出样例: 153 ...
- JDBC-Web项目导入mysql驱动包路径-Eclipse & Myeclipse
初学JAVA,很多都不懂,开始听老师说导入数据库驱动包的时候是: 右键项目 -> Properties -> Java Build Path -> 右侧选项卡选择Libraries ...
- Java方法传递参数传值还是传址的问题
这几天重构项目代码遇到一个疑问:可不可以在方法A中定义一个boolean变量b为false,然后A调用方法C把b传递到C方法中经过一些列业务判断后修改为true,C执行结束后A方法中b的值还是原来的f ...
- JavaScript基础对象---Map
一.创建Map对象 Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值 1.构造函数 语法:new Map([iterable])参数: iterable 可 ...
- Github 多账号配置
1. 不同账户,生成不同密钥ssh-keygen -t rsa -f github1 -C "xxx@163.com"ssh-keygen -t rsa -f github2 -C ...
- PHPTaint-检测xss/sqli/shell注入的php扩展模块[转]
web渗透者习惯采用黑盒或灰盒的方面来检测一款web应用是否存在漏洞,这种检测方法可以屏蔽不少漏洞,特别是程序逻辑中的漏洞.但如果能配合白盒的源码审计(也可以叫漏洞挖掘),效果将会更好,当然人力成本也 ...
- JS获取所有LI中第三个<SPAN>