PyQt - JavaScript 交互

PyQt - JavaScript 交互

先上图看效果

1. Python中定义QWebChannel对象

• 槽函数
  接收js发射的信号

• 信号
  在js中绑定一个js方法

class TInteractObj(QObject):
    """
    一个槽函数供js调用(内部最终将js的调用转化为了信号),
    一个信号供js绑定,
    这个一个交互对象最基本的组成部分.
    """

    # 定义信号,该信号会在js中绑定一个js方法.
    sig_send_to_js = pyqtSignal(str)

    def __init__(self, parent=None):
        super().__init__(parent)
        # 交互对象接收到js调用后执行的回调函数.
        self.receive_str_from_js_callback = None

    # str表示接收str类型的信号,信号是从js发出的.
    @pyqtSlot(str)
    def receive_str_from_js(self, str):
        self.receive_str_from_js_callback(str)

2. Python中注册QWebChannel对象

注册方法

    def init_channel(self):
        """
        为webview绑定交互对象
        """
        self.interact_obj = TInteractObj(self)
        self.interact_obj.receive_str_from_js_callback = self.receive_data

        channel = QWebChannel(self.webview.page())
        # interact_obj 为交互对象的名字,js中使用.
        channel.registerObject("interact_obj", self.interact_obj)

        self.webview.page().setWebChannel(channel)

3. html中引入交互文件

<script type="text/javascript" src="qwebchannel.js"></script>

4. js页面加载事件(windows.onload)中进行绑定

1. 获取交互对象
2. 绑定

• 事件->交互对象->对象上的槽函数
• 交互对象->信号-> js 函数

<script type="text/javascript">
        window.onload = function () {
            new QWebChannel(qt.webChannelTransport, function (channel) {
                // 获取qt中绑定的交互对象
                window.pyjs = channel.objects.interact_obj

                // js 绑定qt中的信号
                pyjs.sig_send_to_js.connect(function (str) {
                    document.getElementById("output").value = str;
                });

                // 按钮点击事件
                document.getElementById("send").onclick = function () {
                    var text_area = document.getElementById("output");
                    if (!text_area.value) {
                        return;
                    }
                    // js调用qt中的方法
                    pyjs.receive_str_from_js(text_area.value)
                    text_area.value = "";
                }
            });
        }
    </script>

5. Demo

main.py

import os
import sys

from PyQt5.QtCore import QUrl, pyqtSlot, QObject, pyqtSignal
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtWidgets import QMainWindow, QApplication

from Ui_main import Ui_MainWindow


class TInteractObj(QObject):
    """
    一个槽函数供js调用(内部最终将js的调用转化为了信号),
    一个信号供js绑定,
    这个一个交互对象最基本的组成部分.
    """

    # 定义信号,该信号会在js中绑定一个js方法.
    sig_send_to_js = pyqtSignal(str)

    def __init__(self, parent=None):
        super().__init__(parent)
        # 交互对象接收到js调用后执行的回调函数.
        self.receive_str_from_js_callback = None

    # str表示接收str类型的信号,信号是从js发出的.
    @pyqtSlot(str)
    def receive_str_from_js(self, str):
        self.receive_str_from_js_callback(str)


class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)

        self.index = (os.path.split(os.path.realpath(__file__))[0]) + "/index.html"
        self.webview.load(QUrl.fromLocalFile(self.index))
        self.init_channel()

    def init_channel(self):
        """
        为webview绑定交互对象
        """
        self.interact_obj = TInteractObj(self)
        self.interact_obj.receive_str_from_js_callback = self.receive_data

        channel = QWebChannel(self.webview.page())
        # interact_obj 为交互对象的名字,js中使用.
        channel.registerObject("interact_obj", self.interact_obj)

        self.webview.page().setWebChannel(channel)

    def receive_data(self, data):
        self.textBrowser.setText(data)

    @pyqtSlot()
    def on_pushButton_clicked(self):
        if not self.textBrowser.toPlainText():
            return
        # 这个信号是在js中和一个js方法绑定的,所以发射这个信号时会执行对应的js方法.
        self.interact_obj.sig_send_to_js.emit(self.textBrowser.toPlainText())
        self.textBrowser.clear()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    ui &