iframe结合postMessage，子窗体触发父窗体事件打开弹窗

最新推荐文章于 2023-07-04 12:21:03 发布

海边、lucky

最新推荐文章于 2023-07-04 12:21:03 发布

阅读量430

点赞数

分类专栏： js iframe 文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_37338658/article/details/110798314

版权

js 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

iframe

1 篇文章 0 订阅

订阅专栏

子窗体触发父窗体事件打开弹窗

项目示例如图
在这里插入图片描述

a为父窗体，通过iframe嵌套了b、c，b、c为子窗体，其中b窗体有个按钮点击可向父窗体触发事件弹出子窗体c
a.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父级页面</title>
    <style>

        .wrapper {
            overflow: hidden;
        }

        .left-content {
            width: 300px;
            height: 600px;
            background-color: #eee;
            float: left;
        }

        .main-content {
            width: 960px;
            height: 600px;
            background-color: pink;
            float: left;
        }

        .main-content iframe {
            width: 960px;
            height: 600px;
        }

        .window-content {
            position: fixed;
            z-index: 2000;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(51, 51, 51, 0.5);
        }

        .window-content iframe {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 10px 10px rgba(153, 153, 153, 0.5);
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5);
            }

            80% {
                transform: translate(-50%, -50%) scale(1.1);
            }

            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="left-content"></div>
        <div class="main-content">
            <!-- http://127.0.0.1:8080/express.html -->
            <iframe src="./b.html" frameborder="0"></iframe>
        </div>
    </div>
    <div class="window-content" style="display: none;">
        <iframe frameborder="0" id="iframe1"></iframe>
    </div>
    <script>
        var iframe1 = document.querySelector('#iframe1')
        var iwcontent = document.querySelector('.window-content')
        function openWindow(src) {
            iframe1.setAttribute('src', src)
            // setWindow({
            //     height: window.screen.height,
            //     width: window.screen.width
            // })
            iwcontent.style.display = 'block'
            iframe1.onerror = function (e) {
                alert('iframe组装失败', e)
            }
        }
        function closeWindow() {
            iwcontent.style.display = 'none'
        }
        function setWindow(data) {
            iframe1.height = data.height
            iframe1.width = data.width
        }
        var strategy = {
            resize: function (data) {
                setWindow(data)
            },
            close: function () {
                closeWindow()
            },
            open: function(data) {
                openWindow(data.url)
            }
        }
        // 主页面监听message事件,
        window.addEventListener('message', function (e) {
            try {
                let data = JSON.parse(e.data)
                strategy[data.type](data)
            } catch (e) {
                console.log(e)
            }
        }, false);

    </script>
</body>

</html>

b.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页面</title>
</head>

<body>
    <input type='button' id="btna" onclick="openParentWindow()" value="在父级弹出窗口">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script>
        function openParentWindow() {
            var data = {
                type: "open",
                url: './c.html'
            };
            // 向父页面触发事件
            window.parent.postMessage(JSON.stringify(data), "*");
        }
    </script>
</body>

</html>

c.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗页面</title>
    <style>
        .popup {
            width: 1200px;
            height: 500px;
            background-color: red;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 2001;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="popup">
        sdsdasadsadasdsasadasdassdsdasadsadasdsasadasdassdsdasadsadasdsasadasdassdsda
        sadsadasdsasadasdassdsdasadsadasdsasadasdassdsdasadsadasdsasadasdassdsdasadsa
        dasdsasadasdassdsdasadsadasdsasadasdassdsdasadsadasdsasadasdassdsdasadsadasds
        asadasdassdsdasadsadasdsasadasdassdsdasadsadasdsasadasdassdsdasadsadasdsasadas
        dassdsdasadsadasdsasadasdassdsdasadsadasdsasadasdassdsdasadsadasdsasadasdassds
        dasadsadasdsasadasdassdsdasadsadasdsasadasdassdsdasadsadasdsasadasdassdsdasads
        adasdsasadasdassdsdasadsadasdsasadasdassdsdasadsadasdsasadasdassdsdasadsadasds
        asadasdassdsdasadsadasdsasadasdas
    </div>
    <script>
        window.onload = function () {
            let popup = document.querySelector('.popup')
            let data = {
                type: 'resize',
                height: popup.offsetHeight,
                width: popup.offsetWidth
            }
            // 向父页面触发事件
            window.parent.postMessage(JSON.stringify(data), '*');
        }
    </script>
</body>

</html>

运行效果，以http-server启动
在这里插入图片描述

海边、lucky

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
iframe结合postMessage，子窗体触发父窗体事件打开弹窗

子窗体触发父窗体事件打开弹窗项目示例如图a为父窗体，通过ifreame嵌套了b、c，b、c为子窗体，其中b窗体有个按钮点击可向父窗体触发事件弹出子窗体ca.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫