父页面代码：

<!DOCTYPE html>

<html>

<head>

    <title>选择位置demo</title>

    <meta charset="utf-8" />

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

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

    <script type="text/javascript" src="dist/jquery-1.7.1.js"></script>

    <script type="text/javascript" src="libs/layer/layer.js"></script>

</head>

<body>

    <iframe id="ifr" src="http://10.100.10.167:8061" style="width: 1200px; height: 800px;"></iframe>

    <script type="text/javascript">

        $("#ifr").load(function () {

            var data = {

                method: "selectLocation",

                url: window.location.href,

                lng: 113.13,

                lat: 23.01

            };

            //给地图页面发消息

            window.ifr.contentWindow.postMessage(JSON.stringify(data), ifr.src);

        });

        //监听消息

        window.addEventListener("message", function (e) {

            var d = eval("(" + e.data + ")");

            if (d.method == "selectLocationComplateCallback") {

                layer.alert(d.lng.toFixed(7) + "," + d.lat.toFixed(7), { title: "信息" });

            }

        });

    </script>

</body>

</html>

子页面JS代码：

//监听父页面发来的消息

window.addEventListener("message", function (e) {

    var d = eval("(" + e.data + ")");

    if (d.method == "selectLocation") {

        if (d.lat && d.lng) drawUtil.setSelectedLocation(d.lng, d.lat); //设置已选择的位置坐标

        selectLocation();

        //选择位置完成回调

        selectLocationComplateCallback = function (lat, lng) {

            var data = {

                method: "selectLocationComplateCallback",

                lat: lat,

                lng: lng

            };

            window.parent.postMessage(JSON.stringify(data), d.url);

        };

    }

});

HTML5 postMessage 跨域跨窗口传递消息的更多相关文章

  1. 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问

    在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...

  2. postMessage解决跨域跨窗口消息传递

    平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 页面和其打开的新窗口的数据传递 页面与嵌套的iframe消息传递 这些问题都有一些解决办法,但html5引入的mes ...

  3. html5 postMessage解决iframe跨协议跨域通信问题

    a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...

  4. CORS跨域、Cookie传递SessionID实现单点登录后的权限认证的移动端兼容性测试报告

    简述 本文仅记录如标题所述场景的测试所得,由于场景有些特殊,且并不需兼容所有浏览器,所以本文的内容对读者也许并无作用,仅为记录. 场景.与实现 需在移动端单点登录 需在移动端跨域访问我们的服务 基于历 ...

  5. HTML5 postMessage 和 localStorage 实现窗口间通信

    LocalStorage(不能跨域) 基本思想:通过localStorage的标准事件storage来实现跨页面通信,即页面A通过写入特定数据触发页面B的storage事件,页面B响应之后再写入数据通 ...

  6. [跨域]跨域解决方法之Ngnix反向代理

    跨域原理:http://www.cnblogs.com/Alear/p/8758331.html 介绍Ngnix之前,我么先来介绍下代理是什么~ 代理相当于中间人,中介的概念 代理分为正向代理和反向代 ...

  7. 跨域跨域跨域，从此say goodbye

    跨域这个问题每个开发者都会遇到,只是时间先后而已,你不搞清楚它他就像狗皮膏药一样粘着你,在你求职生涯中不停的遇到,然后你每次都要做这个功课,终于有一天这个名词已经让我忍无可忍了,下定决心必须搞定它,要 ...

  8. webmvc 拦截器 允许跨域 跨域问题 sessionid不一样

    package cn.com.yitong.ares.filter; import java.io.IOException; import javax.servlet.Filter;import ja ...

  9. html5 postMessage解决跨域、跨窗口消息传递

    一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4. ...

  10. html5 postMessage解决跨域、跨窗口消息传递[转载]

    原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...

随机推荐

  1. mySql中使用命令行建表基本操作

    一:打开命令行启动mysql服务 注意事项:应该使用管理员身份打开命令行键入命令:net start mysql (鼠标右键使用管理员身份打开),否则会出现拒绝访问报错. 二:登陆数据库 登陆命令为& ...

  2. Axure实战应用：Axure设计可视化大屏!

    Axure是一款功能强大的原型设计工具,可以用于设计可视化大屏.设计一个有效的可视化大屏需要考虑多个方面,包括布局规划.信息展示.交互设计等. 以下是一个详细的描述,希望对你有所帮助. 第一部分:可视 ...

  3. Linux笔记01: Linux简介

    1.1 操作系统 计算机系统是由硬件子系统(处理器.内存.硬盘.键盘.鼠标.显示屏等)和软件子系统(如Windows操作系统.Office办公软件等)组成. 操作系统(Operating System ...

  4. 深入 K8s 网络原理（一）- Flannel VXLAN 模式分析

    目录 1. 概述 2. TL;DR 3. Pod 间通信问题的由来 4. 测试环境准备 5. 从 veth 设备聊起 6. 网桥 cni0 6.1 在 Pod 内看网卡信息 6.2 在 host 上看 ...

  5. NetSuite Tips —— 发送邮件未被接收或被退回

    Background: NS 发送的邮件过于频繁被邮箱系统识别为垃圾邮件,被拒收或被拦截 Solution: 添加以下邮箱地址到白名单 system@sent-via.netsuite.com nlm ...

  6. MinIO客户端之tree

    MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc tree 使用树的形式,输出桶内的目录和文件. ./mc tree --files local1/bkt1 ...

  7. 一个WPF版的Layui前端UI库

    前言 相信做.NET后端开发的很多小伙伴都用过Layui前端UI组件库,今天我们分享一个WPF版的Layui前端UI样式库:Layui-WPF. WPF介绍 WPF 是一个强大的桌面应用程序框架,用于 ...

  8. 欢迎 Mixtral - 当前 Hugging Face 上最先进的 MoE 模型

    最近,Mistral 发布了一个激动人心的大语言模型: Mixtral 8x7b,该模型把开放模型的性能带到了一个新高度,并在许多基准测试上表现优于 GPT-3.5.我们很高兴能够在 Hugging ...

  9. Python——第四章：推导式（Comprehensions）

    推导式: 推导式是为了简化代码. 语法: 列表推导式:[数据 for循环 if判断] 集合推导式:{数据 for循环 if判断} 字典推导式:{k:v for循环 if判断} 元组推导式:不存在(因为 ...

  10. 报错信息如下：出现身份验证错误。要求的函数不受支持。可能是由于CredSSP加密数据库修正。

    微软官方已出补丁包:CVE-2018-0886 的 CredSSP 更新 Windows Server 2016, all editions.Windows Server 2012 R2 Standa ...