window.postMessage（图片介绍）：

发送方（图片介绍）：

接收方（图片介绍）：

个人测试一（iframe）：

发送方，地址为：http://localhost:63342/HelloHBuilder/html2/postmessage.html?_ijt=cdirh338ca9a8sbhrjg5ti9odk   ，页面内容如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>postmessage</title>

</head>

<body>

<h1>iframe:</h1>

<iframe id="iframe" src="http://localhost:63342/HelloHBuilder/html2/onmessage.html" style="width: 100%; height: 300px;"></iframe>

 <input id="msg" type="text" placeholder="请输入要发送的消息">

 <button id="send">发送</button>

<script>

    window.onload =function() {

        document.getElementById('send').onclick = function() {

            var msg = document.getElementById('msg').value;

            var iframeWindow = document.getElementById('iframe').contentWindow;

            iframeWindow.postMessage(msg, "http://localhost:63342/HelloHBuilder/html2/onmessage.html");

        }

    }

</script>

</body>

</html>

接收方：地址为：http://localhost:63342/HelloHBuilder/html2/onmessage.html?_ijt=bis6jq7vbn70k1vfeoeqbbb83n，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onmessage</title>

</head>

<body>

<div>

    <h2>target.html,以下是接收到的消息：</h2>

         <p id="msg"></p>

     </div>

    <script>

        window.onload = function() {

            if(window.addEventListener){

                window.addEventListener("message", handleMessage, false);

            }

            else{

                window.attachEvent("onmessage", handleMessage);

            }

            function handleMessage(event) {

                event = event || window.event;

                if (event.origin === 'http://localhost:63342') {

                    document.getElementById('msg').innerHTML = event.data;

                }

            }

        }

    </script>

</body>

</html>

实验结果，在页面发送message后，内嵌的iframe可以接收到参数。当发送方和接收方在浏览器的不同Tab标签页时，接收方无法接收message.

个人测试二（window.open）：

发送方：http://localhost:63342/HelloHBuilder/html2/postMessage(window_open)/postMessage.html?_ijt=lj53j6mmfto33p5ufv35jd5s4e

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>postMessage</title>

</head>

<body>

<script>

    window.onload = function () {

        var popup = window.open('http://localhost:63342/HelloHBuilder/html2/postMessage(window_open)/onMessage.html?_ijt=s34sf7dgctrlurfdubbn9i3ibg');

        popup.onload = function () {  //必须要有onload

            // 假设当前页面没有改变location，这条语句会成功添加message到发送队列中去（targetOrigin设置对了）

            popup.postMessage("hello there!", "http://localhost:63342/HelloHBuilder/html2/postMessage(window_open)/onMessage.html?_ijt=s34sf7dgctrlurfdubbn9i3ibg");

            function receiveMessage(event) {

                if (event.origin !== "http://localhost:63342") {

                    return;

                }

                console.log(event.data);

            }

            window.addEventListener("message", receiveMessage, false);

        }

    };

</script>

</body>

</html>

接收方：http://localhost:63342/HelloHBuilder/html2/postMessage(window_open)/onMessage.html?_ijt=s34sf7dgctrlurfdubbn9i3ibg

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>on message</title>

</head>

<body>

<h1>this is a new tab, crate by <code>window.open()</code></h1>

<script>

    document.onreadystatechange = function(e) {

        if (document.readyState === 'complete') {

            window.addEventListener('message', receiveMessage, false);

        }

    };

    function receiveMessage(event) {

        if (event.origin !== "http://localhost:63342") {

            return;

        }

        console.log('message', event.data);

        console.log('origin', event.source);

        document.write(event.data);

        // 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把enent.source

        // 作为回信的对象，并且把event.origin作为targetOrigin

        event.source.postMessage("hi there yourself!  the secret response " + "is: rheeeeet!", event.origin);

    }

</script>

</body>

</html>

注：子视窗必须要在父窗口的onload事件执行之前添加message事件监听。

参考：https://www.cnblogs.com/milo-xie/p/6569017.html    https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage     https://www.cnblogs.com/MarcoHan/p/5245519.html

html5 window.postMessage 传递数据的使用的更多相关文章

  1. H5中用postMessage传递数据，解决localStorage不能跨域问题

    localStorage不能跨域,所以在A域名下用localStorage.YourKey方式存储的值,在B域名下是不能取到的. 所以需要转变思路,目前主要使用的两种方式: 一种方式:在A.B两个页面 ...

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

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

  3. 用HTML5里的window.postMessage在两个网页间传递数据

    说明 window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间. 通常情况下,不同页面上 ...

  4. HTML5 window/iframe跨域传递消息 API

    原文地址:HTML5′s window.postMessage API 在线示例:Using HTML5's window.postMessage(请打开控制台看日志) 原文日期: 2010年09月0 ...

  5. HTML5之worker开启JS多线程模式及window.postMessage跨域

    worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前 ...

  6. 利用HTML5的window.postMessage实现跨域通信

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postM ...

  7. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  8. 使用window.name 进行数据跨域传递

    其中要点, Stpe1,浏览器在Iframe中加载一个异域的页面,这个页面返回 <script>window.name="任何数据"</script>,这时 ...

  9. HTML5的postMessage使用记要

    HTML5提出了一个新的用来跨域传值的方法,即postMessage(这个名字太通俗了所以你最好看看是不是自己写过一个同名的把它覆盖了).幸运的是IE8就开始支持了. 我们假设有两个网站,1.com与 ...

随机推荐

  1. 什么是AWVS

    什么是AWVS Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞,现已更新到10.(下 ...

  2. （转）linux如何获取鼠标相对位置信息

    #include <stdio.h> #include <stdlib.h> #include <linux/input.h> #include <fcntl ...

  3. C++扬帆远航——6（三色球）

    /* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:sanseqiu.cpp * 作者:常轩 * 完成日期:2016 ...

  4. 设计模式-09装饰模式(Decorator Pattern)

    1.模式动机 一般有两种方式可以实现给一个类或对象增加行为: 继承机制:使用继承机制是给现有类添加功能的一种有效途径,通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法.但是这种方法是 ...

  5. 何用Java8 Stream API进行数据抽取与收集

    上一篇中我们通过一个实例看到了Java8 Stream API 相较于传统的的Java 集合操作的简洁与优势,本篇我们依然借助于一个实际的例子来看看Java8 Stream API 如何抽取及收集数据 ...

  6. 小技巧（一）：将文本文件txt或网页快捷方式固定到win10开始菜单

    win10不知道怎么回事不支持将文本文件和网页快捷方式固定到开始菜单 解决方法: 利用cmd 创建一个快捷方式: 路径:cmd /A /C  C:\Users\Admin\Desktop\test.t ...

  7. React的路由react-router

    意思是:当你写一个web应用时候,应噶install的是react-router-dom,同样的,当你想写一个Native应用时候,需要install的是react-router-native,这两个 ...

  8. OpenCV3入门（十四）图像特效—挤压、哈哈镜、扭曲

    一.图像挤压特效 1.原理 图像压效果本质的图像坐标的非线性变换,将图像向内挤压,挤压的过程产生压缩变形,从而形成的效果. 挤压效果的实现是通过极坐标的形式,设图像中心为O(x,y),某点距离中心O的 ...

  9. MATLAB神经网络（4） 神经网络遗传算法函数极值寻优——非线性函数极值寻优

    4.1 案例背景 \[y = {x_1}^2 + {x_2}^2\] 4.2 模型建立 神经网络训练拟合根据寻优函数的特点构建合适的BP神经网络,用非线性函数的输入输出数据训练BP神经网络,训练后的B ...

  10. python基础(初识)

      Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...