PyQt5 QWebChannel实现python与Javascript双向通信

83 阅读 0 评论 55 点赞

我是靠谱客的博主爱笑指甲油，这篇文章主要介绍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_())

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>

复制代码

1
qwebchannel.js

获取地址：https://doc-snapshots.qt.io/qt5-5.9/qtwebengine-webenginewidgets-markdowneditor-resources-qwebchannel-js.html

功能描述

js => Pyqt5:

运行程序，加载web页面后，点击上面的“点我”按钮，WEB则会调用 Web2PyQt5Value() 函数向python发送信息,类Myshared中的Web2PyQt5Value() 方法用于处理web发送来的信息，弹出消息对话框。

PyQt5 => js：

程序运行5秒后，触发定时器函数 calljs(),通过page().runJavaScript(jscode)运行js代码——调用JS函数PyQt52WebValue()，弹出Alert警告框。

函数具体用法

函数具体用法可参考有用资料一节

官方手册https://www.riverbankcomputing.com/static/Docs/PyQt5/search.html

最后

以上就是爱笑指甲油最近收集整理的关于PyQt5 QWebChannel实现python与Javascript双向通信的全部内容，更多相关PyQt5内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Python接口
浏览次数：83 次浏览
发布日期：2023-09-05 17:25:35
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzo_10_f1_13__23__14_3.html

PyQt5 QWebChannel实现python与Javascript双向通信

由来

测试环境

有用资料

功能描述

函数具体用法

最后

评论列表共有 0 条评论

发表评论取消回复

PyQt5 QWebChannel实现python与Javascript双向通信

由来

测试环境

有用资料

功能描述

函数具体用法

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复