iframe嵌入通讯

最新推荐文章于 2025-05-27 21:13:42 发布

qq_2524963996

最新推荐文章于 2025-05-27 21:13:42 发布

阅读量100

点赞数

文章标签： css html 前端 jquery

本文链接：https://blog.youkuaiyun.com/qq_44161703/article/details/129618852

版权

下面是我写的一个小例子：

可以直接复制，我这边把重要点罗列下来

首先场景是：一共有两个系统A和B A系统内要嵌入B系统 B系统要使用iframe标签嵌入
下面模拟一下一个文件中有两个系统

下方是父的系统

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .a {
        width: 100%;
        height: 89vh;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .b {
        width: 30%;
        height: 100%;
        background-color: rebeccapurple;
        font-size: 25px;
        color: #ffffff;
    }

    #b {
        width: 500px;
        height: 500px;
    }

    .c {
        background-color: #ffffff;
    }

    .d {
        width: 100%;
        height: 100%;
    }

    #message {
        font-size: 25px;
        color: red;
    }

    .f {
        opacity: 0;
    }

    .m {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="a">
        <div class="b g">我是父亲左边
            <span id="message"></span>
            <button class="butt">我是给子信息的按钮</button>
            <div id="b"></div>
            <p id="message">我是地图的当前级别：<span id="map-zoom">11</span></p>
        </div>
        <div class="b c">
            地图嵌入式
            <iframe id="dd" class="d" src="zi.html" frameborder='0'></iframe>
        </div>
        <div class="b g">我是父亲右边</div>
    </div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=8e990b742a2f4e168eee432972a9972c"></script>
<script>
    var map = new AMap.Map('b', {
        zoom: 11, //初始地图级别
        center: [121.498586, 31.239637], //初始地图中心点
    });

    window.onload = function () {
        let i = 0
        document.querySelector(".butt").addEventListener('click', function () {
            i++
            document.getElementById("dd").contentWindow.postMessage(`主页面消息发送个子页面${i}`, "*")

        })

        function logMapinfo() {
            var zoom = map.getZoom(); //获取当前地图级别
            // var center = map.getCenter(); //获取当前地图中心位置

            document.querySelector("#map-zoom").innerText = zoom;
            document.getElementById("dd").contentWindow.postMessage(`地图的层级${zoom}`, "*")
            // document.querySelector("#map-center").innerText = center.toString();
        };
        //传递层级 父亲给儿子
        map.on('zoomend', logMapinfo);

    }
    window.addEventListener("message", function (e) {

        document.getElementById("message").innerHTML = '收到子' + e.origin + "消息" + e.data
        let nus = parseInt(e.data)

        if (nus >= 11) {
            $(".g").addClass("f")
            $("#dd").addClass("m")
        } else if (nus == '0') {
            $(".g").removeClass("f")
        } else {
            $(".g").removeClass("f")
            $("#dd").removeClass("m")
        }
    }, false)
</script>

</html>

下方是子系统的代码

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }

        #map-zoom,
        #map-center {
            font-size: 20px;
            color: red;
        }

        #message {
            font-size: 20px;
            color: red;
        }
    </style>
    <title>地图级别与中心点</title>
</head>

<body>
    <div id="container"></div>
    <div class="info">
        <h1>子页面</h1>
        <h3>接收到的消息</h3>
        <span id="message"></span>
        <button class="butt">我是给父亲信息的按钮点击11下</button>
        <button class="butts">我是给父亲信息的按钮恢复原先的状态</button>
        <!-- <h4>获取地图级别与中心点坐标</h4> -->
        <p>当前级别：<span id="map-zoom"></span></p>
        <h1>当子页面大于等于11的时候，隐藏旁边的两个</h1>
        <h1>当子页面小于11的时候，显示旁边的两个</h1>
        <!-- <p>当前中心点：<span id="map-center">121.498586,31.239637</span></p>   -->
    </div>
    <script src="https://webapi.amap.com/maps?v=2.0&key=8e990b742a2f4e168eee432972a9972c"></script>
    <!-- <script src="map-api-1.4.14.js"></script> -->
    <script>

        let i = 0
        let y = 0
        document.querySelector(".butt").addEventListener('click', function () {
            i++
            window.top.postMessage(`${i}`, "*")

        })
        document.querySelector(".butts").addEventListener('click', function () {
            // i++
            window.top.postMessage(`${y}`, "*")

        })
        window.addEventListener("message", function (e) {

            document.getElementById("message").innerHTML = '收到' + e.origin + "消息" + e.data

        }, false)
        //初始化地图
        var map = new AMap.Map('container', {
            zoom: 11, //初始地图级别
            center: [121.498586, 31.239637], //初始地图中心点
        });

        // 显示地图层级与中心点信息
        function logMapinfo() {
            var zoom = map.getZoom(); //获取当前地图级别
            // var center = map.getCenter(); //获取当前地图中心位置

            document.querySelector("#map-zoom").innerText = zoom;
            // document.querySelector("#map-center").innerText = center.toString();
            window.top.postMessage(`${zoom}`, "*")

        };

        //绑定地图移动与缩放事件
        // map.on('moveend', logMapinfo);
        map.on('zoomend', logMapinfo);
    </script>
</body>

</html>