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. 配置c3p0-config.xml数据库连接池，jdbcurl配置项报错Type The reference to entity "useUnicode" must end with the ';' delimiter.

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE xml> <c3p0-confi ...

  2. 【转载】Sql语句用left join 解决多表关联问题（关联套关联，例子和源码）

    csdn中高手帮我给解决了,其实就是别名,给自己上了一堂别名的课,所谓别人是高手,其实就是自己是菜鸟吧! 表1:------------------------------ [人事表]     表名: ...

  3. 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...

  4. SV学习之interface

    普通的模块使用法:注意我们这里只实现了部分功能....不是完全的读写模块....     module mem_core(   input logic wen,  input logic ren,   ...

  5. C#中对泛型List进行分组输出元素

    背景:在输出列表时,往往需要按照某一字段进行分组,比如在输出城市列表时,按照首字母进行分组,输出学生列表时,按照年级进行分组,然后再对分组的结果按照其他的字段进行排序. 如存在以下STU学生类,代码如 ...

  6. python基础——2（基本数据类型及运算符）

    目录 为何数据要区分类型? 一.数字类型 1.整型int 2.浮点型float 二.字符串str 三.列表类型list 四.字典类型 五.布尔类型 运算符的介绍 一.算术运算符 二.比较运算符 三.赋 ...

  7. LR性能测试问题解决方法

    一.Error -27727: Step download timeout (120 seconds)has expired when downloading resource(s). Set the ...

  8. hls简述(HTTP live Streaming)

    hls官方地址:https://developer.apple.com/streaming/ IDR: Instantaneous Decoding Refresh (IDR) start code ...

  9. 《Shell脚本学习指南》书籍目录

    摘要:Shell脚本与Windows/Dos下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的.但是它比Windows下的批处理更 ...

  10. [luoguP3694] 邦邦的大合唱站队／签到题（状压DP）

    传送门 来自kkk的题解: 70分做法:枚举每个学校顺序,暴力. 100分:状压dp.从队列头到尾DP, 状态:f[i]表示i状态下最小的出列(不一致)的个数. 比如f[1101]表示从头到位为1/3 ...