Nodejs node-webkit Window 监听不到事件

Nodejs node-webkit Window 监听不到事件

我看这个node-webkit 教程,这个视频在解决自定义最大化最小化的时候用window.on(‘maximize’)监听窗口的变化,但是Window的监听函数好像都没有监听到,使得最大化以后不能恢复,不知道为什么,我把源码复制下来还是一样的,一开始我以为是API变了,但是还是没发现什么不同,window.on(‘minimize’)还是没发现能监听成功,-是最小化,o最大化,x是关闭,求助:

<!DOCTYPE html>
<html>
    <head>
        <title>Turbo</title>
        <script>

            var nw = require('nw.gui');
            var win = nw.Window.get();
            win.isMaximized = false;

        </script>

    </head>
    <body>

        <header>
            <ul>
                <li><a href='#' title='Minimize' id='windowControlMinimize'>-</a></li><!--
                --><li><a href='#' title='Maximize' id='windowControlMaximize'>o</a></li><!--
                --><li><a href='#' title='Close'    id='windowControlClose'   >x</a></li>
            </ul>
        </header>

        <script>

        // Min
        document.getElementById('windowControlMinimize').onclick = function()
        {
            win.minimize();
        };

        // Close
        document.getElementById('windowControlClose').onclick = function()
        {
            win.close();
        };

        // Max
        document.getElementById('windowControlMaximize').onclick = function()
        {
            if (win.isMaximized)
                win.unmaximize();
            else
                win.maximize();
        };

        // Listen to the minimize event
        win.on('minimize', function() {
              console.log('Window is minimized');
        });

        win.on('maximize', function(){
            win.isMaximized = true;
        });

        win.on('unmaximize', function(){
            win.isMaximized = false;
        });


        </script>

    </body>
</html>

2 回复

针对问题描述中的“Nodejs node-webkit Window 监听不到事件”的情况，我们可以通过检查和调整代码来解决问题。以下是修改后的HTML和JavaScript代码示例，以及对问题的简要解释。

修改后的代码

<!DOCTYPE html>
<html>
    <head>
        <title>Turbo</title>
        <script>
            var gui = require('nw.gui');
            var win = gui.Window.get();
            win.isMaximized = false;
        </script>
    </head>
    <body>
        <header>
            <ul>
                <li><a href='#' title='Minimize' id='windowControlMinimize'>-</a></li>
                <li><a href='#' title='Maximize' id='windowControlMaximize'>o</a></li>
                <li><a href='#' title='Close' id='windowControlClose'>x</a></li>
            </ul>
        </header>

        <script>
            // Minimize
            document.getElementById('windowControlMinimize').onclick = function() {
                win.minimize();
            };

            // Close
            document.getElementById('windowControlClose').onclick = function() {
                win.close(true);
            };

            // Maximize
            document.getElementById('windowControlMaximize').onclick = function() {
                if (win.isMaximized) {
                    win.unmaximize();
                    win.isMaximized = false;
                } else {
                    win.maximize();
                    win.isMaximized = true;
                }
            };

            // Listen to events
            win.on('minimize', function() {
                console.log('Window is minimized');
            });

            win.on('maximize', function() {
                win.isMaximized = true;
                console.log('Window is maximized');
            });

            win.on('unmaximize', function() {
                win.isMaximized = false;
                console.log('Window is unmaximized');
            });
        </script>
    </body>
</html>

解释

  1. 使用正确的模块引用：

    • 在原始代码中，require('nw.gui') 被误写为 require('nw.gui');。正确的方式是直接使用 gui 对象，如 var gui = require('nw.gui');。

  2. 确保事件监听器正确注册：

    • 确保事件监听器在DOM元素加载后被注册。在当前代码中，事件监听器是在脚本标签内定义的，因此它们会在DOM加载完成后执行。

  3. 调试信息：

    • 添加了更多的console.log语句来帮助调试，确保事件能够被正确触发。

  4. 关闭窗口时的参数：

    • 在关闭窗口时，添加了一个参数 true 给 win.close() 方法，以确保在关闭时能够正常退出应用程序。

通过以上修改，你应该可以解决事件监听不到的问题，并且能够在控制台看到相应的输出信息。如果仍然有问题，请确保你的node-webkit版本是最新的，并且环境配置正确。


在你的代码中，事件监听器 win.on('minimize') 和 win.on('maximize') 等没有正常工作的原因可能是由于这些事件没有被正确触发。你可以尝试使用 nw.Window 的 on 方法来监听这些事件。

下面是修改后的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Turbo</title>
    <script>
        var gui = require('nw.gui');
        var win = gui.Window.get();
        win.isMaximized = false;
    </script>
</head>
<body>

<header>
    <ul>
        <li><a href='#' title='Minimize' id='windowControlMinimize'>-</a></li>
        <li><a href='#' title='Maximize' id='windowControlMaximize'>o</a></li>
        <li><a href='#' title='Close' id='windowControlClose'>x</a></li>
    </ul>
</header>

<script>
// Min
document.getElementById('windowControlMinimize').onclick = function() {
    win.minimize();
};

// Close
document.getElementById('windowControlClose').onclick = function() {
    win.close(true);
};

// Max
document.getElementById('windowControlMaximize').onclick = function() {
    if (win.isMaximized) {
        win.unmaximize();
        win.isMaximized = false;
    } else {
        win.maximize();
        win.isMaximized = true;
    }
};

// Listen to the minimize event
win.on('minimize', function() {
    console.log('Window is minimized');
});

win.on('restore', function() {
    console.log('Window is restored from maximize or minimize');
});

win.on('maximize', function() {
    win.isMaximized = true;
    console.log('Window is maximized');
});

win.on('unmaximize', function() {
    win.isMaximized = false;
    console.log('Window is unmaximized');
});
</script>

</body>
</html>

在这个示例中：

  1. 使用了 nw.gui 来获取窗口实例。
  2. 添加了事件监听器 win.on('minimize')、win.on('maximize')、win.on('unmaximize') 和 win.on('restore') 来处理窗口状态变化。
  3. 在最大化和非最大化的处理中添加了日志输出，以便于调试。

如果问题仍然存在，可能需要检查 Node-Webkit 的版本或环境配置是否有问题。

回到顶部