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. luogu P3916 图的遍历

    P3916 图的遍历 题目描述 给出 N 个点, M 条边的有向图,对于每个点 v ,求 A(v) 表示从点 v 出发,能到达的编号最大的点. 输入输出格式 输入格式: 第1 行,2 个整数 N,MN ...

  2. Css选择器和JQuery基本编程接口

    使用JQuery之前,首先从官网下载库文件 http://jquery.com/ jquery-2.1.4.js和jquery-2.1.4.min.js,前者是完整无压缩版本,用于开发调试:后者是压缩 ...

  3. Python3使用PyMySQL操作数据库

    1. 安装PyMySQL pip install PyMySQL 关于PyMySQL的详细内容可以查看官方文档  Github 2. 创建表 在某个数据库内,使用以下指令建表 CREATE TABLE ...

  4. EPT和VPID简介

    EPT(Extended Page Tables,扩展页表),属于Intel的第二代硬件虚拟化技术,它是针对内存管理单元(MMU)的虚拟化扩展.EPT降低了内存虚拟化的难度(与影子页表相比),也提升了 ...

  5. markdown pad激活

    <iframe src="></iframe> ---恢复内容开始--- 注册码 Soar360@live.com GBPduHjWfJU1mZqcPM3BikjYK ...

  6. 聊聊svg

    来源:SVG的用法 补充 CANVAS产生的dom数量比SVG要少 SVG可以使用css设置动画样式 对于动画性能来说,不能说svg或canvas谁更优,而是要看情况: SVG 是一种使用 XML 描 ...

  7. python 学习总结2

    温度转换问题 一.温度转换 目前有两种表示温度的方法一种是摄氏度另一种是华氏度,摄氏度的结冰点为0度,沸点为100度将温度等分刻画,华氏度的结冰点为32度,沸点为212度将温度进行等刻度划分. 现需要 ...

  8. LeetCode（15） 3Sum

    题目 Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all ...

  9. CSS知识点之字体大小属性font-size

    管理文本的大小在 web 设计领域很重要.但是,不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落.请始终使用正确的 HTML 标题,比如使用 <h1> - <h6&g ...

  10. httpclient调用webservice接口的方法实例

    这几天在写webservice接口,其他的调用方式要生成客户端代码,比较麻烦,不够灵活,今天学习了一下httpclient调用ws的方式,感觉很实用,话不多说,上代码 http://testhcm.y ...