父子窗口消息传递

电玩女神 2022-12-10 07:07 163阅读 0赞

基于layui 的两个窗口消息传递。父页面用window.open()打开新页面。

## 通用接口 ##

layui.define('jquery', function(exports) {
        var $ = layui.$;
        // 我们需要将此方法使用顶层 layui
        // 这样可以确保每个子层都可以使用
        // 我们需要获取顶层 layui 对象
        var MODULE_NAME = 'event_handler'
        var isTop = top === self
        var _layui = isTop ? layui : top.layui
            /**
             * 不同iframe 之间通过事件监听通讯
             * 示例：
             * 向特定iframe发送消息
             * EventHandler.$emit('on-children', { message: 'from father: ' + message })
             *  })；
             * 监听某个iframe发送来的特定消息
             * EventHandler.$on('on-children', function(data) {
             * 	 * $('#lay-output').html(data.message)
             * })
             */
        var EventHandler = {
            // 事件监听=
            $on: function(eventType, callback) {
                return _layui.onevent.call(this, MODULE_NAME, eventType, callback)
            },
    
            // 事件响应
            $emit: function(eventType, params) {
                _layui.event.call(this, MODULE_NAME, eventType, params)
            }
        }
           exports("EventHandler", EventHandler);
    
    });

## 例 ##

父页面 demo.html

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>测试</title>
        <link rel="stylesheet" type="text/css" href="/layui.css" media="all">
    </head>
    <body>
        <div class="layui-fluid larry-wrapper">
            <div>父页面</div>
            <button id="add" class="layui-btn layui-btn-xs">
                <i class="layui-icon"> </i><cite>打开</cite>
            </button>
        </div>
        
        <script type="text/javascript" src="/layui.js"></script>
        <script>
            layui.use(['jquery', 'layer', 'EventHandler'], function() {
                var $ = layui.jquery,
                    layer = layui.layer,
                    EventHandler = layui.EventHandler;
    
    
                $("#add").click(function() {
                    fff = window.open("demo1.html");
                })
                //子页面准备好了，通知父页面
                EventHandler.$on('on-demo1-init-ready', function(data) {
                        alert(data.message);
                    })
            })
        </script>
    </body>
    
    </html>

子页面demo1.html

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>测试</title>
        <link rel="stylesheet" type="text/css" href="/layui.css" media="all">
    </head>
    <body>
        <div class="layui-fluid larry-wrapper">
            <div>子页面</div>
        </div>
        
        <script type="text/javascript" src="/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="/layui.js"></script>
        <script>
            layui.use(['jquery', 'layer'], function() {
                var $ = layui.jquery,
                    layer = layui.layer;
                   $(document).ready(function() {
                   //获取打开本页面的对象，即谁打开的我使用 window.opener
                     window.opener.layui.EventHandler.$emit('on-demo1-init-ready', {
                         message: '我是子页面我准备ok'
                   });
               })
        </script>
    </body>
    
    </html>