PyQt5 QWebChannel實現python與Javascript雙向通信

由來

Pyqt項目需要嵌入百度地圖API,需要PyQt5與Javascript進行數據交互;網上的資料少切新舊不一,出於人人爲我,我爲人人的目的寫下記錄,希望後來人少走彎路。(替代方案:WebSocket實現通信,該技術比較新,後面再玩)。

測試環境

Python3.6、PyQt5.11

有用資料

測試例程:

需三個文件: 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 οnclick="Web2PyQt5Value()">點我</button>
</body>
</html>
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

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章