Pywebview自定义顶部栏关闭按钮点击无响应问题求助

开发Pywebview应用时，自定义了带有最小化、关闭按钮的顶部控制栏，未隐藏原生顶部栏，编写了对应HTML页面、点击处理JS文件及Python接口类，但点击自定义关闭按钮无响应，以下是问题排查及修正方案：

原代码情况 #

HTML文件（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://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文件（js/header.js） #

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

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

Python接口文件（ui_api.py） #

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)

问题排查及修正 #

1. 核心错误：类实例化方式错误 #

main.py中实例化类的写法错误，类名本身是ui_header_api_handler，无需重复调用类名的属性，正确实例化方式应为：

api_handler = ui_header_api_handler()

原写法会导致找不到对应属性，JS调用pywebview.api.close_window()时会因api不存在而无响应。

2. 关闭窗口方法优化 #

sys.exit(0)属于强制退出，不符合Pywebview的窗口生命周期管理，建议使用官方提供的destroy()方法：

def close_window(self):
    webview.windows[0].destroy()

3. JS调用添加错误捕获（可选） #

为方便调试，可给JS调用添加try-catch捕获错误，在控制台查看具体问题：

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

close_button.onclick = async function () {
    try {
        await pywebview.api.close_window();
    } catch (error) {
        console.error("关闭窗口失败:", error);
    }
}

修正后的完整代码 #

修正后的main.py #

import webview
from ui_api import ui_header_api_handler

api_handler = ui_header_api_handler()

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

修正后的ui_api.py #

import webview

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

    def close_window(self):
        webview.windows[0].destroy()

内容的提问来源于stack exchange，提问作者Lerck