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组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
随机推荐
- PHP基于phpqrcode类生成二维码的方法详解
前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/2.PHP环境必须开启支持GD2扩展库支持(一般情况下都是 ...
- linux批量检测服务器能否ping通和硬盘容量状态并抛出报警的一个脚本-附详细解释
有一些linux基础,最近刚开始学shell,参考了阿良老师的一个监测服务器硬盘状态的脚本,自己进行了一些扩展,今天比较晚了,后边会把注释放上来,感觉脚本还很不完善,希望大家一起探讨一下,共同学习 2 ...
- 【HDU 3037】Saving Beans(卢卡斯模板)
Problem Description Although winter is far away, squirrels have to work day and night to save beans. ...
- Laravel(4.2)-->whereHas/ whereDoesntHave
在开发过程中,有时间需要用 wherehas 联合查询 出想要的结果,但是有的时候想搜索出不在关联表中出现的数据 whereDoesntHave(例:搜索出开卡的用户和没有开卡的用户)if($is_o ...
- PS学习笔记(04)
Photoshop滤镜的安装 Photoshop滤镜的默认格式为.8bf(也有些滤镜为exe格式的可执行文件),如果你下载的是压缩包,请解压之后再安装. 方法一: 如果你下载的滤镜为exe的可执行文件 ...
- CSU 1290 DP解决数学期望问题
题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1290 题目大意: 给定k个数,每次可以生成0-N-1中的任何一个数,k个数中出现不同的整 ...
- WebApi下载附件文件
WebApi下载附件文件 1. [RoutePrefix("down")] public class FilesController : ApiController { [GET( ...
- Iahub and Permutations(codeforces 314c)
题意:给出一组排列,某些位置不知道(-1),要求求出有多少种还原方式,使得所有a[i]!=i /* 这是一道关于排列的动态规划,这种体大都可以当作棋盘来做,如果把i这个数放到第j个位置,那么就将棋盘的 ...
- 那些“不务正业”的IT培训公司
Before First 大四下期了,现在准备找一份Java开发的实习工作,于是在各大网站上投递简历-智联招聘.51job.拉勾网,慧眼识真金的我必然会把培训机构给过滤掉,对于重庆来说招聘实习的公司少 ...
- 【webstorm 系列之一】快捷键很好用啊
书签 bookmarks , 在多文件中调试很方便 断点只能在js文件中用,而bookmark可以在所有文件中使用 书签开关 F11 (给光标所在行加书签) 显示书签 Shift + F11 书签号 ...