如何让PyQt5中QWebEngineView与JavaScript交互-偶像资源网

准备工作

开发环境

Python 3.8.1
Windows 10

安装依赖

pip install PyQt5
pip install PyQtWebEngine

Python端

1.使用QWebChannel的registerObject（\”JsBridge名\”,\”JsBridge\”）方法注册回调

JsBridge名：在JavaScript中调用时使用的对象名称
JsBridge：被JavaScript调用的Python对象

2.JsBridge 对象

入参

@QtCore.pyqtSlot(str)
def log(self, message):
  print(message)

出参

@QtCore.pyqtSlot(result=str)
def getName(self):
  return \"hello\"

出入参

@QtCore.pyqtSlot(str, result=str)
def test(self, message):
  print(message)
  return \"ok\"

JavaScript端

在Html的<head>中添加

<script src=\'qrc:///qtwebchannel/qwebchannel.js\'></script>

调用

new QWebChannel(qt.webChannelTransport, function(channel) {
   channel.objects.pythonBridge.test(\"hello\",function(arg) {
     console.log(\"Python message: \" + arg);
     alert(arg);
   });
 });

调试(Chrome DevTools)

Demo

Python

1.JsBridge

from PyQt5 import QtCore

class JsBridge(QtCore.QObject):
  @QtCore.pyqtSlot(str, result=str)
  def test(self, message):
    print(message)
    return \"ok\"

2.Application

from PyQt5 import QtCore
from PyQt5 import QtWebEngineWidgets
from PyQt5.QtCore import QDir
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import *

class TestWindow(QMainWindow):
  def __init__(self):
    super().__init__()
    self.webView = QWebEngineView()
    self.webView.settings().setAttribute(
      QtWebEngineWidgets.QWebEngineSettings.JavascriptEnabled, True)

    channel = QWebChannel(self.webView.page())
    self.webView.page().setWebChannel(channel)
    self.python_bridge = JsBridge(None)
    channel.registerObject(\"pythonBridge\", self.python_bridge)
    layout = QVBoxLayout()
    layout.addWidget(self.webView)
    widget = QWidget()
    widget.setLayout(layout)
    self.setCentralWidget(widget)

    self.resize(900, 600)
    self.setWindowTitle(\'Test\')
    qr = self.frameGeometry()
    cp = QDesktopWidget().availableGeometry().center()
    qr.moveCenter(cp)
    self.move(qr.topLeft())
    self.show()
    html_path = QtCore.QUrl.fromLocalFile(QDir.currentPath() + \"/assets/index.html\")
    self.webView.load(html_path)

if __name__ == \'__main__\':
  app = QApplication(sys.argv)
  m = TestWindow()
  sys.exit(app.exec_())

JavaScript

index.html

<!DOCTYPE html>
<html lang=\"zh\">
<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">
  <title>Test</title>
  <script src=\'qrc:///qtwebchannel/qwebchannel.js\'></script>
  <script src=\"https://code.jquery.com/jquery-3.4.1.min.js\"
      integrity=\"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=\"
      crossorigin=\"anonymous\"></script>
</head>
<body>
  <button id=\"test\">test</button>
</body>
<script>
  $(document).ready(function() {
    new QWebChannel(qt.webChannelTransport, function(channel) {
      $(\'#test\').on(\'click\', function() {
        channel.objects.pythonBridge.test(\"hello\",function(arg) {
         console.log(\"Python message: \" + arg);
         alert(arg);
        });
      });
    });
  });
</script>
</html>

本文作者： liaoheng
本文链接： https://liaoheng.me/2019/12/23/PyQt5-QWebEngineView与JavaScript交互/

以上就是如何让PyQt5中QWebEngineView与JavaScript交互的详细内容，更多关于QWebEngineView与JavaScript交互的资料请关注免费资源网其它相关文章！

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

如何让PyQt5中QWebEngineView与JavaScript交互

请登录后发表评论