父页面代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>选择位置demo</title>
  5.  
  6.     <meta charset="utf-8" />
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.  
  10.     <script type="text/javascript" src="dist/jquery-1.7.1.js"></script>
  11.     <script type="text/javascript" src="libs/layer/layer.js"></script>
  12. </head>
  13. <body>
  14.     <iframe id="ifr" src="http://10.100.10.167:8061" style="width: 1200px; height: 800px;"></iframe>
  15.  
  16.     <script type="text/javascript">
  17.         $("#ifr").load(function () {
  18.             var data = {
  19.                 method: "selectLocation",
  20.                 url: window.location.href,
  21.                 lng: 113.13,
  22.                 lat: 23.01
  23.             };
  24.  
  25.             //给地图页面发消息
  26.             window.ifr.contentWindow.postMessage(JSON.stringify(data), ifr.src);
  27.         });
  28.  
  29.         //监听消息
  30.         window.addEventListener("message", function (e) {
  31.             var d = eval("(" + e.data + ")");
  32.  
  33.             if (d.method == "selectLocationComplateCallback") {
  34.                 layer.alert(d.lng.toFixed(7) + "," + d.lat.toFixed(7), { title: "信息" });
  35.             }
  36.         });
  37.     </script>
  38. </body>
  39. </html>

子页面JS代码：

  1. //监听父页面发来的消息
  2. window.addEventListener("message", function (e) {
  3.     var d = eval("(" + e.data + ")");
  4.  
  5.     if (d.method == "selectLocation") {
  6.         if (d.lat && d.lng) drawUtil.setSelectedLocation(d.lng, d.lat); //设置已选择的位置坐标
  7.  
  8.         selectLocation();
  9.  
  10.         //选择位置完成回调
  11.         selectLocationComplateCallback = function (lat, lng) {
  12.             var data = {
  13.                 method: "selectLocationComplateCallback",
  14.                 lat: lat,
  15.                 lng: lng
  16.             };
  17.  
  18.             window.parent.postMessage(JSON.stringify(data), d.url);
  19.         };
  20.     }
  21. });

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. （Good topic）哈希表：最长回文串（3.19 leetcode每日打卡）

    给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串. 在构造过程中,请注意区分大小写.比如 "Aa" 不能当做一个回文字符串. 注意: 假设字符串的长度不 ...

  2. mysq数据库查询之分组查询

    一.什么是分组查询分组查询:将查询结果按照指定字段进行分组二.分组查询的基本语法select 查询字段 from 表名 [where 条件] group by 分组字段名 [having 条件表达式] ...

  3. 【Android】无法通过drawable下的selector类型改变背景颜色？

    举例 我在darwable目录下创建了selector文件,并设置了如下内容 <?xml version="1.0" encoding="utf-8"?& ...

  4. 一道入门的java安全题

    [XCTF]Zhuanxv 收获 java题的一般流程 HQL注入 SQL注入 看题 目录扫描 dirsearch扫目录,发现list目录: 一个登录界面,本着尽量不写sql注入题目的原则(因为太菜了 ...

  5. [USACO2007NOVG] Telephone Wire G

    题目描述 Farmer John's cows are getting restless about their poor telephone service; they want FJ to rep ...

  6. 探索 ECMAScript 2023 中的新数组方法

    前言 ECMAScript 2023 引入了一些新功能,以改进语言并使其更加强大和无缝.这个新版本带来了令人兴奋的功能和新的 JavaScript 数组方法,使使用 JavaScript 编程更加愉快 ...

  7. 文心一言 VS 讯飞星火 VS chatgpt （162）-- 算法导论13.1 2题

    二.用go语言,对图13-1中的红黑树,画出对其调用TREE-INSERT 操作插人关键字 36 后的结果.如果插人的结点被标为红色,所得的树是否还是一棵红黑树?如果该结点被标为黑色呢? 文心一言,代 ...

  8. 为什么说数字孪生和GIS高度互补？它们各自从对方那里获得了什么？

    在数字化时代,数字孪生和GIS作为两项重要技术,它们的融合正日益受到人们的关注和认可.数字孪生是将实体世界与数字世界紧密结合的技术,可以创建实时的虚拟副本,对物理系统进行模拟.优化和预测.而GIS则是 ...

  9. 【scikit-learn基础】--『监督学习』之 逻辑回归分类

    逻辑回归这个算法的名称有一定的误导性.虽然它的名称中有"回归",当它在机器学习中不是回归算法,而是分类算法.因为采用了与回归类似的思想来解决分类问题,所以它的名称才会是逻辑回归. ...

  10. c++ 期末编程题

    1. 计算两点之间的距离 #include <iostream> #include <cmath> using namespace std; int main() { int ...