父页面代码:
<!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); }; } });