PyQt5에서 QWebEngineView를 JavaScript와 상호 작용하는 방법

준비 작업
개발 환경

Python 3.8.1

Windows 10

설치 종속


pip install PyQt5
pip install PyQtWebEngine

파이썬단
1. QWebChannel의 register Object("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의 에 추가


<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)

구성 환경 변수: QTWEBENGINE_REMOTE_DEBUGGING = port

Chromium 커널의 브라우저를 사용하여 주소를 엽니다.http://127.0.0.1:port

PyCharm을 사용하면 실행 구성(Run/Debug Configurations)의 Environment variables에 환경 변수를 추가할 수 있습니다.번호가 분리된 후에 바로 운행할 수 있다

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-QWebEngineViewJavaScript와 상호 작용 /
다음은 PyQt5에서 QWebEngineView와 JavaScript의 상호작용에 대한 상세한 내용입니다. QWebEngineView와 JavaScript의 상호작용에 대한 더 많은 자료는 저희의 다른 관련 글을 주목해 주십시오!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

PyQt5에서 QWebEngineView를 JavaScript와 상호 작용하는 방법

준비 작업 개발 환경 Python 3.8.1 Windows 10 설치 종속 파이썬단 1. QWebChannel의 register Object("JsBridge 이름", "JsBridge") 방법으로 콜백 등록 JsB...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

PyQt5에서 QWebEngineView를 JavaScript와 상호 작용하는 방법

좋은 웹페이지 즐겨찾기