如何让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实现中文输出的两种方法
May 09 Python
Python中List.index()方法的使用教程
May 20 Python
pandas ix &amp;iloc &amp;loc的区别
Jan 10 Python
python lxml中etree的简单应用
May 10 Python
python找出一个列表中相同元素的多个索引实例
Jun 11 Python
解决Django一个表单对应多个按钮的问题
Jul 18 Python
18个Python脚本可加速你的编码速度(提示和技巧)
Oct 17 Python
Python socket聊天脚本代码实例
Jan 02 Python
python实现人机猜拳小游戏
Feb 03 Python
使用Pycharm分段执行代码
Apr 15 Python
Python中的面向接口编程示例详解
Jan 17 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
Jun 25 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
PHP高级OOP技术演示
2009/08/27 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
js 匿名调用实现代码
2009/06/19 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
详解ES6 Symbol 的用途
2018/10/14 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
Python抽象和自定义类定义与用法示例
2018/08/23 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
python中字典增加和删除使用方法
2020/09/30 Python
用python写PDF转换器的实现
2020/10/29 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
大学生实习思想汇报
2014/01/12 职场文书
实习生求职自荐信
2014/02/07 职场文书
党的群众路线学习材料
2014/05/16 职场文书
初中学校对照检查材料
2014/08/19 职场文书
流动人口婚育证明
2014/10/19 职场文书
瘦西湖导游词
2015/02/03 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS