如何将JavaScript变量传递到PyQt5 Python脚本中？

问题背景 #

使用PyQt5搭建GUI时嵌入了他人编写的HTML/JS脚本，需要将JS中获取的gender值传递回Python，用于后续创建用户配置等操作。目前JS端已能获取值并弹窗显示，但无法传递到Python。

解决方案 #

通过PyQt5的JavaScript-Python桥接机制实现数据传递，核心是将Python对象暴露给JavaScript，让JS可以直接调用Python方法传递数据。

步骤1：修改HTML/JS代码 #

在JS获取gender值后，调用Python暴露的方法传递数据：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $("#new_butt").click(function(){
        $("#para").hide();
        var gender = $(this).attr('value');
        // 调用Python端的方法传递gender值
        window.pyBridge.sendGender(gender);
      });
      $("#other_butt").click(function(){
        $("#para").show();
        var gender = $(this).attr('value');
        window.pyBridge.sendGender(gender);
      });
    });
</script>
</head>
<body>

<h1>My First Heading</h1>
<p id="para">My first paragraph.</p>

<button id="new_butt" for="Gender_1" value=1>  Click me please!</button>
<button id="other_butt" for="Gender_2" value=25>  Click me please!</button>

</body>
</html>

步骤2：修改Python代码 #

创建桥接类接收JS传递的数据，并将其注册到WebEngineView中：

from PyQt5.QtWidgets import QApplication, QMainWindow
from PyQt5 import QtWebEngineWidgets
from PyQt5.QtCore import QObject, pyqtSlot
from pathlib import Path
import sys

class JSBridge(QObject):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.user_gender = None  # 存储从JS传递的gender值

    @pyqtSlot(str)  # 声明该方法可被JS调用，接收字符串参数
    def sendGender(self, gender):
        self.user_gender = gender
        print(f"Python收到gender值：{self.user_gender}")
        # 此处可添加后续业务逻辑，比如创建用户配置文件
        # create_user_profile(self.user_gender)

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        
        self.view = QtWebEngineWidgets.QWebEngineView()
        # 初始化桥接实例
        self.js_bridge = JSBridge()
        # 将桥接对象注册到JS的window对象，命名为pyBridge
        self.view.page().addJavaScriptObject("pyBridge", self.js_bridge)

        html_path = Path('stack overflow_pass_test/pyqtwebtest1.html')
        html = html_path.read_text(encoding="utf8")
        self.view.setHtml(html)
    
        self.setCentralWidget(self.view)

        # 后续可通过self.js_bridge.user_gender获取传递的值，用于其他业务逻辑

app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()

关键说明 #

• JSBridge类：继承自QObject，确保能被Qt的信号槽机制识别。sendGender方法通过@pyqtSlot(str)装饰，声明为可被JS调用的槽函数，负责接收并存储JS传递的gender值。
• 注册桥接对象：通过addJavaScriptObject方法将Python对象注入到JS的window对象中，JS即可通过window.pyBridge调用Python方法。
• 数据使用：传递的gender值保存在self.js_bridge.user_gender中，后续Python代码可直接读取该变量用于创建用户配置等操作。

内容的提问来源于stack exchange，提问作者Jaimee-lee Lincoln