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. PHP基于phpqrcode类生成二维码的方法详解

    前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/2.PHP环境必须开启支持GD2扩展库支持(一般情况下都是 ...

  2. linux批量检测服务器能否ping通和硬盘容量状态并抛出报警的一个脚本-附详细解释

    有一些linux基础,最近刚开始学shell,参考了阿良老师的一个监测服务器硬盘状态的脚本,自己进行了一些扩展,今天比较晚了,后边会把注释放上来,感觉脚本还很不完善,希望大家一起探讨一下,共同学习 2 ...

  3. 【HDU 3037】Saving Beans(卢卡斯模板)

    Problem Description Although winter is far away, squirrels have to work day and night to save beans. ...

  4. Laravel(4.2)-->whereHas/ whereDoesntHave

    在开发过程中,有时间需要用 wherehas 联合查询 出想要的结果,但是有的时候想搜索出不在关联表中出现的数据 whereDoesntHave(例:搜索出开卡的用户和没有开卡的用户)if($is_o ...

  5. PS学习笔记(04)

    Photoshop滤镜的安装 Photoshop滤镜的默认格式为.8bf(也有些滤镜为exe格式的可执行文件),如果你下载的是压缩包,请解压之后再安装. 方法一: 如果你下载的滤镜为exe的可执行文件 ...

  6. CSU 1290 DP解决数学期望问题

    题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1290 题目大意: 给定k个数,每次可以生成0-N-1中的任何一个数,k个数中出现不同的整 ...

  7. WebApi下载附件文件

    WebApi下载附件文件 1. [RoutePrefix("down")] public class FilesController : ApiController { [GET( ...

  8. Iahub and Permutations(codeforces 314c)

    题意:给出一组排列,某些位置不知道(-1),要求求出有多少种还原方式,使得所有a[i]!=i /* 这是一道关于排列的动态规划,这种体大都可以当作棋盘来做,如果把i这个数放到第j个位置,那么就将棋盘的 ...

  9. 那些“不务正业”的IT培训公司

    Before First 大四下期了,现在准备找一份Java开发的实习工作,于是在各大网站上投递简历-智联招聘.51job.拉勾网,慧眼识真金的我必然会把培训机构给过滤掉,对于重庆来说招聘实习的公司少 ...

  10. 【webstorm 系列之一】快捷键很好用啊

    书签 bookmarks , 在多文件中调试很方便 断点只能在js文件中用,而bookmark可以在所有文件中使用 书签开关 F11  (给光标所在行加书签) 显示书签 Shift + F11 书签号 ...