PyQt QtWebChannel：实现JavaScript调用Python函数，点击HTML标题触发执行
2026-5-20
使用PyQt5的QWebEngineView和QWebChannel实现HTML与Python交互
我帮你整理好了完整的可运行方案，点击HTML里的<h2>标题就能触发Python端的foo()函数，具体实现如下：
完整Python代码
import sys from PyQt5.QtCore import QObject, pyqtSlot from PyQt5.QtWidgets import QApplication from PyQt5.QtWebChannel import QWebChannel from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEnginePage # 定义Python端的通信对象，暴露可被JS调用的函数 class Bridge(QObject): @pyqtSlot() # 必须用这个装饰器标记为槽函数，JS才能调用 def foo(self): print("HTML触发了Python的foo()函数！") if __name__ == "__main__": app = QApplication(sys.argv) # 创建WebView和Page view = QWebEngineView() page = QWebEnginePage() view.setPage(page) # 初始化WebChannel并注册通信对象 channel = QWebChannel() bridge = Bridge() channel.registerObject("bridge", bridge) # "bridge"是JS端要访问的对象名 page.setWebChannel(channel) # 加载HTML内容 html = ''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="qrc:///qtwebchannel/qwebchannel.js"></script> <script> window.onload = function() { // 建立与Python端的通道连接 new QWebChannel(qt.webChannelTransport, function(channel) { // 获取Python端注册的bridge对象 var pyBridge = channel.objects.bridge; // 给h2标题绑定点击事件，触发Python的foo函数 document.querySelector('h2').addEventListener('click', function() { pyBridge.foo(); }); }); }; </script> </head> <body> <h2 style="cursor: pointer;">点击我触发Python的foo()</h2> </body> </html> ''' view.setHtml(html) view.show() sys.exit(app.exec_())
关键实现要点
- 通信桥梁搭建：通过
QWebChannel实现Python和HTML/JS的双向通信，核心是注册共享对象 - 槽函数标记：Python端要被JS调用的函数必须用
@pyqtSlot()装饰，否则JS无法识别该函数为可调用接口 - JS端通道连接：必须引入Qt内置的
qwebchannel.js（路径固定为qrc:///qtwebchannel/qwebchannel.js），然后通过qt.webChannelTransport建立连接，获取Python端暴露的对象 - 事件绑定：在HTML中给
<h2>元素绑定点击事件，调用Python对象的foo()方法
运行代码后，点击页面上的标题，控制台就会打印出HTML触发了Python的foo()函数！，完美实现你的需求。
内容的提问来源于stack exchange，提问作者MrLoon
