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. 用css实现html中单选框样式改变

     我们都知道,input的单选框是一个小圆框,不能直接更改样式.但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式(看上去没啥新意,也比较丑).那么,接下来我将介绍下如何实现该功能. 首先, ...

  2. 访问修饰词--Java

    public(公共的) 权限: 完全公开 protected(受保护的) 权限: 对子类和同包中的其他类公开 default(默认的,可不写) 权限: 对同包中的其他类公开 private(私有的) ...

  3. Android发布apk后解决百度地图不显示的问题

    今天在做Android apk发布时,发现发布后不能显示百度地图,结合网上的信息,及自己的实验,终于可以了.原来在Eclipse上直接run的是测试版本,而发布后是运行版本,两个版本的SHA1值不一样 ...

  4. LeetCode（22）Generate Parentheses

    题目 Given n pairs of parentheses, write a function to generate all combinations of well-formed parent ...

  5. jQuery常用案例总结

    模态对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 大数据学习——redis安装

    用源码工程来编译安装 / 到官网下载最新stable版 / 解压源码并进入目录 .tar.gz -C ./redis-src/ / make 如果报错提示缺少gcc,则安装gcc : yum inst ...

  7. Jmeter接口测试实战-Cookies

    场景: 接口测试时常都需要登录,请求方式(post), 登录常用的方法有通过获取token, 获取session, 获取cookie, 等等. 这几种都有一个共同的特点, 有效期(expires). ...

  8. 1027 stl

    #include<stdio.h> #include<queue> using namespace std; int main() {  int i,n,m,j,k,a[100 ...

  9. [HNOI2015]实验比较 树形dp+组合数学

    在合并的时候有可以加等于,或者继续用小于, 比如siz[x]和siz[y]合并,小于的区间为max(siz[x],siz[y])<=k<=siz[x]+siz[y], 然后就是合并成多少个 ...

  10. 【译】Nodejs最好的ORM

    TypeORM github: https://github.com/typeorm/typeorm这篇译文是从TypeORM github上的使用说明上翻译过来的,已经提交PR并merge到库中了. ...