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组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
随机推荐
- luogu P1455 搭配购买
题目描述 明天就是母亲节了,电脑组的小朋友们在忙碌的课业之余挖空心思想着该送什么礼物来表达自己的心意呢?听说在某个网站上有卖云朵的,小朋友们决定一同前往去看看这种神奇的商品,这个店里有n朵云,云朵已经 ...
- LinkedList集合（JDK1.8）
简述 按照上篇笔记ArrayList集合继续进行介绍list的另一个常见子类LinkedList ?LinkedList介绍 1.数据结构 说明:linkedlist的底层数据结构是个双向链表结构,也 ...
- Linux的硬件时间、校正Linux系统时间及系统时间调用流程
第一部分: 一)概述: 事实上在Linux中有两个时钟系统,分别是系统时间和硬件时间 UTC是协调世界时(Universal Time Coordinated)英文缩写,它比北京时间早8个小时. ...
- Ubuntu配置SSH服务器
SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SSH 是目前较可靠,专为远 ...
- (十六)python 3 全局变量局部变量
全局变量和局部变量 全局变量与局部变量两者的本质区别就是在于作用域. 用通俗的话来理解的话,全局变量是在整个py文件中声明,全局范围内都可以访问.局部变量是在某个函数中声明的,只能在该函数中调用它,如 ...
- 学习PyQuery库
学习PyQuery库 好了,又是学习的时光啦,今天学习pyquery 来进行网页解析 常规导入模块(PyQuery库中的pyquery类) from pyquery import PyQuery as ...
- 对于单片机工程.h头文件的管理
最近工程管理过于混乱,学习了一些工程头文件管理的方法,现在做一个记录,也分享给大家. 目前有两种管理文件的方式: 1.每一个功能模块对应一个文件夹,里面包含一个.c和一个.h文件如下图所示 这样做的好 ...
- 【HDU 2028】Lowest Common Multiple Plus
Problem Description 求n个数的最小公倍数. Input 输入包含多个测试实例,每个测试实例的开始是一个正整数n,然后是n个正整数. Output 为每组测试数据输出它们的最小公倍数 ...
- python 监控oracle 数据库
import cx_Oracle import os db = cx_Oracle.connect('**********') print "Show Oracle Version: &qu ...
- bzoj 2463 [中山市选2009]谁能赢呢？ 博弈
[中山市选2009]谁能赢呢? Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 3014 Solved: 2165[Submit][Status][D ...