如何让PyQt5中QWebEngineView与JavaScript交互


Posted in Python onOctober 21, 2020

准备工作

开发环境

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

  1. 配置环境变量:QTWEBENGINE_REMOTE_DEBUGGING = port
  2. 使用Chromium内核的浏览器打开地址:http://127.0.0.1:port
  3. 使用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-QWebEngineView与JavaScript交互/

以上就是如何让PyQt5中QWebEngineView与JavaScript交互的详细内容,更多关于QWebEngineView与JavaScript交互的资料请关注三水点靠木其它相关文章!

Python 相关文章推荐
Python抓取京东图书评论数据
Aug 31 Python
用python读写excel的方法
Nov 18 Python
详解Python中如何写控制台进度条的整理
Mar 07 Python
tensorflow学习笔记之简单的神经网络训练和测试
Apr 15 Python
详解Python安装scrapy的正确姿势
Jun 26 Python
Django框架模板介绍
Jan 15 Python
Python中zip()函数的简单用法举例
Sep 02 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
Dec 11 Python
Python模块 _winreg操作注册表
Feb 05 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
Mar 13 Python
pycharm安装及如何导入numpy
Apr 03 Python
Django自关联实现多级联动查询实例
May 19 Python
Python为何不支持switch语句原理详解
Oct 21 #Python
基于Python爬取素材网站音频文件
Oct 21 #Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
Oct 21 #Python
运行Python编写的程序方法实例
Oct 21 #Python
Python读写csv文件流程及异常解决
Oct 20 #Python
Python脚本打包成可执行文件过程解析
Oct 20 #Python
PyQt5的QWebEngineView使用示例
Oct 20 #Python
You might like
php常用的url处理函数总结
2014/11/19 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python黑魔法之编码转换
2016/01/25 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
python 检查文件mime类型的方法
2018/12/08 Python
python绘制地震散点图
2019/06/18 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python实现梯度法 python最速下降法
2020/03/24 Python
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
自考生自我评价分享
2014/01/18 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
战略合作意向书
2014/07/29 职场文书
《活见鬼》教学反思
2016/02/24 职场文书