在Pywebview中处理点击关闭按钮以退出应用

前端开发 2026-07-09

最近遇到一个问题：我需要创建一个pywebview应用，但我想自定义顶部控制栏，即放置最小化和关闭应用按钮的区域。首先，为了验证可行性，我在window.start() 的参数中没有隐藏顶部栏的情况下实现了它。我创建了以下HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="global.css">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="header.css">
</head>
<body>
    <header class="top_frame">
        <svg class="collapse_button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://w3.org">
            <path d="M19 13H5V11H19V13Z" fill="currentColor"/>
        </svg>
        <a><svg class="open_in_full_screen_button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
        </svg></a>
        <div class="close_button__wrapper">
        <svg class="close_button" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://w3.org">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
        </div>
    </header>
    <script src="js/header.js"></script>
</body>
</html>

接着我创建了一个JS文件来处理点击叉号的事件，但它没有起作用。

const close_button = document.querySelector(".close_button");

close_button.onclick = function () {
    pywebview.api.close_window()
}

接下来，我在一个单独的.py文件中为close_window() 函数编写了实现，并从我启动窗口的主文件中导入了它。

import sys
import webview

class ui_header_api_handler():
    def minimize_window(self):
        webview.windows[0].minimize()

    def close_window(self):
        sys.exit(0)

main.py

import webview
from ui_api import ui_header_api_handler

ui_header_api_handler = ui_header_api_handler.ui_header_api_handler()

webview.create_window("Main Window", "index.html", js_api=ui_header_api_handler)
webview.start(debug=True)

如果有人知道我的程序出了什么问题，请告诉我。

提前感谢！

解决方案

我用你的代码创建了“最小可运行代码”，并在 def close_window(self) 的 print() 处添加了 print()，当我点击SVG关闭按钮时它会显示这段文本。所以它可以工作。问题只在于 sys.exit(0)，它不会结束程序。

但当我添加 window.destroy 时，对我来说就能工作。

webview.windows[0].destroy()

它需要同时具备 .destroy() 和 sys.exit()

    def close_window(self):
        #print("UiHeaderApiHandler: close_window()")
        webview.windows[0].destroy()
        sys.exit(0)

最小可运行代码 - 所有按钮都能工作。

main.py
（所有Python代码放在一个文件里）

import sys
import webview


class UiHeaderApiHandler:  # PEP8: `CamelCaseNames` for classes

    def minimize_window(self):
        print("UiHeaderApiHandler: minimize_window()")
        webview.windows[0].minimize()

    def maximize_window(self):
        print("UiHeaderApiHandler: maximize_window()")
        webview.windows[0].maximize()

    def close_window(self):
        print("UiHeaderApiHandler: close_window()")
        webview.windows[0].destroy()
        sys.exit(0)


# --- main ---

ui_header_api_handler = UiHeaderApiHandler()

webview.create_window("Main Window", "index.html", js_api=ui_header_api_handler)
webview.start(debug=True)

js/header.js
（必须放在子文件夹 js/）

const close_button = document.querySelector(".close_button");

close_button.onclick = function () {
    pywebview.api.close_window()
}

const minimize_button = document.querySelector(".collapse_button");

minimize_button.onclick = function () {
    pywebview.api.minimize_window()
}

const maximize_button = document.querySelector(".open_in_full_screen_button");

maximize_button.onclick = function () {
    pywebview.api.maximize_window()
}

index.html
（不做改动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="global.css">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="header.css">
</head>
<body>
    <header class="top_frame">
        <svg class="collapse_button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://w3.org">
            <path d="M19 13H5V11H19V13Z" fill="currentColor"/>
        </svg>
        <a><svg class="open_in_full_screen_button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
        </svg></a>
        <div class="close_button__wrapper">
        <svg class="close_button" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://w3.org">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
        </div>
    </header>
    <script src="js/header.js"></script>
</body>

PEP 8 -- Python代码风格指南

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。