一 postMessage应用于主页面和iframe之间进行数据的传递

1  子iframe页面向主页面进行数据传递；

// 多个子iframe需要将自己的计数统计到主页面进行数据上报

window.parent.postMessage({

    count:count(),

    id:'1'

},'*');

// 主页面进行接收

window.onmessage = (e)=>{

    if(!e.data.id) return;

    var id = e.data.id;

    var count = e.data.count;

    // 根据收到的子页面的数据进行更新的操作 通过id判断具体是哪个页面

    updateCountMessage(id,count);

};

2  主页面向子页面进行数据的下发，比如需要将初始计数的数据分发到各个iframe

// 给各个iframe添加加载事件 以vue框架为例

// template

<iframe :ref="item.id" @load="loadandpostmessage" :data-id="item.id" :data.init="item.init">

// script

loadandpostmessage(event) {

    event.target.contentWindow.postMessage({

        id: event.target.dataset.id,

        init: event.target.dataset.init,

        oper: 'whole'

    },'*');

}

// 可以根据列表的某一项分别的更新数据

opener(item){

    this.$refs[vm.curId][0].contentWindow.postMessage({

        id:item.id,

        init: item.init,

        oper: 'seperate'

    },'*');

}

// 子页面进行数据的接收 ，可以同时对多个信息进行接收 ，只是需要不同的标记进行区别

window.onmessage = function(e){

    if(!e.data.id) return;

    if(e.data.oper=='whole'){

       console.log('方式1接收到多个消息')

    }else{

       console.log('方式2接收到单独的主页面消息');

    }

};

注意：

　　1 当使用webpack时 webpack自身会发送postMessage，注意监听message时区分具体是自己发来的message还是webpackOK ;

　　2 Q ：在本地开启静态服务器（利用lite-server）时，在主页面和多个iframe页面之间数据传递调用相应的函数，会存在在不同的iframe页面内同一函数都被执行了的问题；

　　　A： lite-server开启的静态服务器共享了实例导致不同页面的同一个函数都被执行，我们换一个server既可，如使用vs打开 之后选择要运行的文件在右下角功能栏最左侧有Go Live 既可在浏览器中打开页面

二 postMessage应用于js主线程和worker多线程之间进行数据传递,下面对比原生和webworker的不同

html文件内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="main-wrap"></div>

    <div class="method">原生js获取获取数列第40项</div>

</body>

<script>

    document.querySelector('.method').onclick = function(event){

        console.log('hello world');

    }

    function fibonacci(n){

        return n<2?n:arguments.callee(n-1)+arguments.callee(n-2);

    }

    console.log('原生js获取'+fibonacci(40));

    // 利用worker 可以实现js的异步调用 这样避免了js文件因为数据等问题造成的页面的卡顿假死的现象；

    // var myWorker = new Worker('./worker.js');

    // myWorker.postMessage(40);

    // myWorker.onmessage = function(event){

    //     var data = event.data;

    //     console.log('worker 40获取'+data);

    // }

    // myWorker.onerror= function(event){

    //     console.log(event.fileName, event.lineo,event.message);

    // }

</script>

</html>　

将js内容分别注释体验html页面的加载情况；

self.onmessage = function(event){

    var data = event.data;

    var ans = fibonacci(data);

    this.postMessage(ans);

}

function fibonacci(n){

    return n<2?n:arguments.callee(n-1)+arguments.callee(n-2);

}

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

关于webWorker可以参考：

　　http://www.ruanyifeng.com/blog/2018/07/web-worker.html

　　https://developer.mozilla.org/zh-CN/docs/Web/API/Worker

利用 postMessage 进行数据传递 （iframe 及web worker）及问题的更多相关文章

  1. Android开发探秘之四：利用Intent实现数据传递

    在Android开发过程中,很多人都熟悉Intent,这是个用于在多个View之间共享数据的类.本节主要是继承上节,通过点选ListView中的文本,把文本中的URL加载到一个新的页面上,并且打印出来 ...

  2. Android之利用EventBus进行数据传递

    在项目中,不可避免的要在两个页面之间进行数据的传递,就算不传递,也需要进行刷新之类的,我们根据Google提供的库类方法,也是可以做的,主要有广播broadcastreceiver,startacti ...

  3. 使用Actor模型管理Web Worker多线程

    前端固有的编程思维是单线程,比如JavaScript语言的单线程.浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力.这篇文章简单记录一下搜狗地图WebG ...

  4. html5跨域数据传递（postMessage）

    在html5中有个支持跨域传递的方法postMessage,可是实现iframe之间的数据传递! 代码如下:数据发送页面 <!DOCTYPE HTML> <html lang=&qu ...

  5. iframe跨域数据传递

    项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...

  6. HTML5中window.postMessage，在两个页面之间的数据传递

    HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功 ...

  7. 基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式

    在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...

  8. Android 利用剪切板(clipboardManager )实现数据传递

    首先是系统剪切板的调用服务: ClipboardManager ClipboardManager=getSystemService(Context.CLIPBOARD_SERVICE); 然后是写入, ...

  9. Java WEB中的HttpServletResponse数据传递

    1.什么是HttpServletResponse 2.使用HttpServletResponse向浏览器发送数据及相关实例. 实例1:实现文件下载功能 实例2:实现验证码注册 实例3:实现页面3秒后跳 ...

随机推荐

  1. JS的javascript:void(0)用法

    javascript:void(0)用法如下: <a href="javascript:void(0)"></a> // 执行js函数,0表示不执行函数. ...

  2. css-不固定宽高定位

    position: fixed; top:50%; left: 50%; transform: translate(-50%, -50%);

  3. Unity进阶----AssetBundle_01(2018/10/30)

    AssetBundle作用和定义 1).AssetBundle是一个压缩包包含模型.贴图.预制体.声音.甚至整个场景,可以在游戏运行的时候被加载: 2).AssetBundle自身保存着互相的依赖关系 ...

  4. 选择性计量学（Altmetric）介绍

    不论是对科研人员还是对机构知识库管理者来说,对文章或期刊使用定量数据来评价都是很有意义的.比如,科研人员或论文的作者可以通过这些数据来了解该学科的基本情况,也可以为其个人总结或个人简历补充更为精细.更 ...

  5. 容器—stack

    c++ stl栈stack介绍 C++ Stack(堆栈) 是一个容器类的改编,为程序员提供了堆栈的全部功能,——也就是说实现了一个先进后出(FILO)的数据结构. c++ stl栈stack的头文件 ...

  6. linux之间免密操作

    为了方便分布式集群操作,主机master需要免密操作两个节点slave1和slave2(slave1和slave2在对应机器已经修改hosts文件) 操作步骤: 首先测试连接slave1操作: [ro ...

  7. 百度地图API实时画出动态运行轨迹（一条行驶轨迹），车头实时指向行驶方向，设置角度偏移

    参考网址:https://blog.csdn.net/skywqnan/article/details/79036262 改变车的方向:http://www.cnblogs.com/peixuanzh ...

  8. Java集合List、Set、Map

    集合是 java 基础中非常重要的一部分,同样也是 Java 面试中很重要的一个知识点.所以,给王小整理了这篇关于集合的文章. 1.接口继承关系以及实现 集合类存放于 Java.util 包中,主要有 ...

  9. Java 基础 IO流之序列化

    一,前言 在前面的IO中,我们都是讲数据以字符串的形式保存.能不能将一个数组保存到文件呢,当取出数据时也是一个数组,如果能够实现那就完美了.我们都知道比较通用的有JSON格式的序列化,那java中也有 ...

  10. linux 查看磁盘文件大小

    du -sh : 查看当前目录总共占的容量.而不单独列出各子项占用的容量 du -lh --max-depth=1 : 查看当前目录下一级子文件和子目录占用的磁盘容量 df -h 查看整个服务器的磁盘 ...