PyQt5 QWebChannel实现python与Javascript双向通信

77 阅读 0 评论 51 点赞

我是靠谱客的博主爱笑指甲油，最近开发中收集的这篇文章主要介绍PyQt5 QWebChannel实现python与Javascript双向通信，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

由来

Pyqt项目需要嵌入百度地图API，需要PyQt5与Javascript进行数据交互；网上的资料少切新旧不一，出于人人为我，我为人人的目的写下记录，希望后来人少走弯路。（替代方案：WebSocket实现通信，该技术比较新，后面再玩）。

测试环境

Python3.6、PyQt5.11

有用资料

PyQt5系列教程（60）：QWebChannel使用举例2
Communicate with html/javascript using QWebEngineView
qwebchannel.js

测试例程：

需三个文件： main.py、web_file1.html、qwebchannel.js

main.py

from PyQt5.QtWidgets import QWidget, QApplication, QMessageBox,QMainWindow
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtCore import pyqtSlot, Qt, QUrl, QFileInfo
from PyQt5.QtCore import pyqtProperty, pyqtSignal

class Myshared(QWidget):

    def __init__(self):
        super().__init__()

    def PyQt52WebValue(self):
        return "666"

    def Web2PyQt5Value(self, str):
        QMessageBox.information(self, "网页来的信息", str)

    value = pyqtProperty(str, fget=PyQt52WebValue, fset=Web2PyQt5Value)

class MainWindow(QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.setWindowTitle('Javascript call PyQt5')
        self.setGeometry(5, 30, 1355, 730)
        self.browser = QWebEngineView()
        # 加载外部的web界面
        url = QUrl(QFileInfo("./web_file1.html").absoluteFilePath())
        self.browser.load(url)
        self.setCentralWidget(self.browser)

    def calljs(self):
        jscode = "PyQt52WebValue('你好web');"
        self.browser.page().runJavaScript(jscode)

import sys
from threading import Timer
if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = MainWindow()
    channel = QWebChannel()
    shared = Myshared()
    channel.registerObject("con", shared)
    win.browser.page().setWebChannel(channel)
    t = Timer(5, win.calljs)
    t.start()

    win.show()
    sys.exit(app.exec_())

web_file1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web channel</title>

    <script src="qwebchannel.js"></script>

    <script language="JavaScript">
        function Web2PyQt5Value() {
            if ( window.con) {
                    window.con.value = "你好 Pyqt5";
                }
            }
            function PyQt52WebValue(value){
                alert(value);
            }

            document.addEventListener("DOMContentLoaded", function () {
                new QWebChannel( qt.webChannelTransport, function(channel) {
                    window.con = channel.objects.con;
                });
            });

    </script>

</head>
<body>
    <button onclick="Web2PyQt5Value()">点我</button>
</body>
</html>