HTML5 postMessage 跨域跨窗口传递消息

  • A+
所属分类:Web前端
摘要

父页面代码:子页面JS代码: 

父页面代码:

HTML5 postMessage 跨域跨窗口传递消息HTML5 postMessage 跨域跨窗口传递消息

<!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>

View Code

子页面JS代码:

HTML5 postMessage 跨域跨窗口传递消息HTML5 postMessage 跨域跨窗口传递消息

//监听父页面发来的消息 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);         };     } });

View Code