如何让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 相关文章推荐
windows下Python实现将pdf文件转化为png格式图片的方法
Jul 21 Python
Python实现计算圆周率π的值到任意位的方法示例
May 08 Python
python 实现对文件夹中的图像连续重命名方法
Oct 25 Python
使用python获取电脑的磁盘信息方法
Nov 01 Python
对python调用RPC接口的实例详解
Jan 03 Python
Python使用paramiko操作linux的方法讲解
Feb 25 Python
Django Rest framework权限的详细用法
Jul 25 Python
Django CSRF跨站请求伪造防护过程解析
Jul 31 Python
浅谈Pytorch中的torch.gather函数的含义
Aug 18 Python
pytorch中的自定义数据处理详解
Jan 06 Python
Python绘制动态水球图过程详解
Jun 03 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
Jun 28 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
php开发工具有哪五款
2015/11/09 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python的print用法示例
2014/02/11 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
Python如何判断数独是否合法
2016/09/08 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python实现内存监控系统
2021/03/07 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
人事专员岗位职责范本
2014/03/04 职场文书
治超工作实施方案
2014/05/04 职场文书
化妆品活动策划方案
2014/05/23 职场文书
青年教师听课心得体会
2016/01/15 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript