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代码：

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