父子窗口消息传递

最新推荐文章于 2023-11-24 21:27:55 发布

置顶「已注销」

最新推荐文章于 2023-11-24 21:27:55 发布

阅读量190

点赞数 1

分类专栏： layui js 文章标签： javascript

本文链接：https://blog.csdn.net/mbinn/article/details/108773474

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

layui

1 篇文章 1 订阅

订阅专栏

基于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">&#xe61f; </i><cite>打开</cite>
        </button>
    </div>
    <!-- 加载js文件 -->
    <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>
    <!-- 加载js文件 -->
    <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>

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父子窗口消息传递

基于layui 的两个窗口消息传递。父页面用window.open()打开新页面。通用接口layui.define('jquery', function(exports) { var $ = layui.$; // 我们需要将此方法使用顶层 layui // 这样可以确保每个子层都可以使用 // 我们需要获取顶层 layui 对象 var MODULE_NAME = 'event_handler' var isTop = top === self
复制链接

扫一扫