zoukankan      html  css  js  c++  java
  • 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=" 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);
            };
        }
    });
    View Code
  • 相关阅读:
    基于Spring aop写的一个简单的耗时监控
    Intellij Idea 15 旗舰版 破解
    设计模式之工厂模式
    IDE神器intellij idea的基本使用
    [js] js判断浏览器(转)
    java知识大全积累篇
    一些技术大牛的博客集锦(转)
    添加鼠标右击菜单
    java 方法调用绑定
    Android系列--DOM、SAX、Pull解析XML
  • 原文地址:https://www.cnblogs.com/s0611163/p/13442323.html
Copyright © 2011-2022 走看看