python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法

2024-12-22 07:49:01

PyQt5浏览器控件QWebEngineView

PyQt5使用QWebEngineView控件来展示HTML页面，对老版本的QWebView类不在进行维护，因为QWebEngineView使用CHromium内核可以给用户带来更好的体验

QWebEngineView类中常用方法

方法	描述
load(QUrl url)	加载指定的URL并显示
setHtml（QString&html）	将网页视图的内容设置为指定的HTML内容

QWebEngineView控件使用load（）函数加载一个Web页面，实际上就是使用HTTP Get方法加载web页面，这个控件可以加载本地的web页面，也可以加载外部的WEb页面，其核心代码如下

view=QWebEngineView（）
view.load(QUrl('https://www.jb51.net'))
view.show()

QWebEngineView加载显示外部的web页面实例

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *

class MainWindow(QMainWindow):
  def __init__(self):
    super(MainWindow, self).__init__()
    self.setWindowTitle('加载外部网页的例子')
    self.setGeometry(5,30,1355,730)
    self.browser=QWebEngineView()
    #加载外部的web界面
    self.browser.load(QUrl('https://www.jb51.net'))
    self.setCentralWidget(self.browser)
if __name__ == '__main__':
  app=QApplication(sys.argv)
  win=MainWindow()
  win.show()
  app.exit(app.exec_())

运行效果图如下

在这里，我输入的url是我的博客地址，所以加载的也就是这个网址请求的web界面

QWebEngineView加载并显示嵌入的HTML代码

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *

class MainWindow(QMainWindow):
  def __init__(self):
    super(MainWindow, self).__init__()
    self.setWindowTitle('加载本地网页的例子')
    self.setGeometry(5,30,1355,730)
    self.browser=QWebEngineView()
    # #加载外部的web界面
    # url=r'index.html'
    # self.browser.load(QUrl(url))

    self.browser.setHtml('''<!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <title>Title</title>
                </head>
                <body>
                <h1>Hello PyQt5</h1>
                <h1>Hello PyQt5</h1>
                <h1>Hello PyQt5</h1>
                <h1>Hello PyQt5</h1>
                <h1>Hello PyQt5</h1>

                </body>
                </html>''')
    self.setCentralWidget(self.browser)
if __name__ == '__main__':
  app=QApplication(sys.argv)
  win=MainWindow()
  win.show()
  app.exit(app.exec_())

运行图片如下

注意使用QWebEngineView对象的setHTML（）函数渲染HTml页面时，如果页面中使用的JavaScript代码超过2M，程序渲染就会失败

QWebEngineView调用JavaScript代码实例

通过QWebEnginePage类的runJavaScript（str,Callable）函数可以方便地实现PyQt和HTML、JavaScript的双向通信，也实现了python代码和Html，JavaScript代码的解耦，便于开发人员进行分工协作，在PyQt对象中，访问JavaScript的核心代码如下

QWebEnginePage.runJavaScript(str,Callable)

完整代码

import sys

from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton

# 创建一个 application实例
app = QApplication(sys.argv)
win = QWidget()
win.setWindowTitle('Web页面中的JavaScript与 QWebEngineView交互例子')

# 创建一个垂直布局器
layout = QVBoxLayout()
win.setLayout(layout)

# 创建一个 QWebEngineView 对象
view = QWebEngineView()
view.setHtml('''
 <html>
  <head>
   <title>A Demo Page</title>

   <script language="javascript">
    // Completes the full-name control and
    // shows the submit button
    function completeAndReturnName() {
     var fname = document.getElementById('fname').value;
     var lname = document.getElementById('lname').value;
     var full = fname + '' + lname;

     document.getElementById('fullname').value = full;
     document.getElementById('submit-btn').style.display = 'block';

     return full;
    }
   </script>
  </head>

  <body>
   <form>
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname"></input>
    <br />
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname"></input>
    <br />
    <label for="fullname">Full name:</label>
    <input disabled type="text" name="fullname" id="fullname"></input>
    <br />
    <input style="display: none;" type="submit" id="submit-btn"></input>
   </form>
  </body>
 </html>
''')

# 创建一个按钮去调用 JavaScript代码
button = QPushButton('设置全名')

def js_callback( result ):
  print(result)

def complete_name():
  view.page().runJavaScript('completeAndReturnName();', js_callback)

# 按钮连接 'complete_name'槽，当点击按钮是会触发信号
button.clicked.connect(complete_name)

# 把QWebView和button加载到layout布局中
layout.addWidget(view)
layout.addWidget(button)

# 显示窗口和运行app
win.show()
sys.exit(app.exec_())

代码分析

在本例中，初始化一个QWebEngineView对象，对象名称View，然后通过View。page（）函数获得一个QWebEnginePage对象，就可以访问整个web界面了。这个QWebEnginePage对象有一个异步的runJavaScript（）函数，需要一个回调函数接收结果，其核心代码如下

def js_callback( result ):
  print(result)

def complete_name():
  view.page().runJavaScript('completeAndReturnName();', js_callback)

本文详细介绍了PyQt5浏览器控件QWebEngineView的使用方法，包括使用QWebEngineView调用JavaScript代码，更多关于PyQt5浏览器控件QWebEngineView的使用方法请查看下面的相关链接

python GUI库图形界面开发之PyQt5动态加载QSS样式文件

在Qt中经常需要使用样式,为了降低耦合性(与逻辑代码分离),我们通常会定义一个QSS文件,然后编写各种控件(QLabel,QLIneEdit,QPushButton等)的样式,最后使用QApplication或QMainWindow来加载样式,这样就可以让整个应用程序共享一种样式了编写QSS 首先新建一个扩展名为.qss的文件,如style.qss,然后将其加入资源文件(.qrc)中,在style.qss文件中编写样式代码,例如 QMainWindow{ border-image:url(./
python GUI库图形界面开发之PyQt5开发环境配置与基础使用

PyQt5安装在cmd下输入 pip install PyQt5 完成PyQt5安装,再安装qt designer,可以使用pip安装 pip install PyQt5-tools 安装完成后,在python安装目录下可以看到配置PyCharm 配置PyCharm是为了在Pycharm里面实现打开qt designer,然后生成qt文件,然后将qt文件转换成python语言的软件文件. 打开Pycharm,按下图操作打开Extrernal Tools之后,点击上如绿色的+,添加Tools
python GUI库图形界面开发之PyQt5拖放控件实例详解

本篇,我们学习PyQt5界面中拖放(Drag 和Drop)控件. 拖放动作在GUI中,拖放指的是点击一个对象,并将其拖动到另一个对象上的动作.比如百度云PC客户端支持的拖放文件以快速移动文件: 拖放动作能够很直观很方便的在GUI程序中完成一些很复杂或繁琐的操作. 在PyQt中实现拖放在PyQt5中,我们也可以很轻松地使用拖放功能. 使用Qt设计师或者使用API都可以实现.我们先使用Qt设计师将GUI的图形设计出来,在之前的GUI的基础上,我们新建一个选项卡. 我们新建了一个选项卡,然后在里面
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性

QTableWidget介绍 QTableWidget是Qt程序中常用的显示数据表格的控件,类似于c#中的DataGrid.QTableWidget是QTableView的子类,它使用标准的数据模型,并且其单元数据是通过QTableWidgetItem对象来实现的,使用QTableWidget时就需要QTableWidgetItem.用来表示表格中的一个单元格,整个表格就是用各个单元格构建起来的 QTableWidget类中的常用方法方法描述 setROwCount(int row) 设置Q
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例

在默认情况下,我们使用PyQt5创建出来的窗口和部件都是默认的样式,虽然谈不上很丑,但是也毫无美感可言.其实,在PyQt5中,我们可以有较高的自由度来自定义窗口和各种小部件的样式,通过自定义这些样式,以达到美化图形界面的目的. 本篇文章中,我们就通过一个实际的例子,使用QSS和PyQt5的配置属性,实现图形用户界面的美化工作. 首先上效果图: 一.对界面进行布局和组件的布置在图像界面编程中,一个好的布局有助于全局把控界面的形态,而在PyQt5中,有多种布局的方式供我们选择,比较常用的布局有以下
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法

QThread是Qt的线程类中最核心的底层类.由于PyQt的的跨平台特性,QThread要隐藏所有与平台相关的代码要使用的QThread开始一个线程,可以创建它的一个子类,然后覆盖其它QThread.run()函数 class Thread(QThread): def __init __(self): super(Thread,self).__ init __() def run(self): #线程相关的代码 pass 接下来创建一个新的线程 thread = Thread() thread
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法

本文主要列出来python图形开发GUI库pyqt5的窗体,控件属性与方法如果你想看看python图形开发GUI库pyqt5的基础使用方法可以查看我们的另一篇文章 python图形开发GUI库pyqt5的基本使用方法详解基本框架 import sys from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5.QtWidgets import * class Demo(QWidget): def __init__(self):
Python3和pyqt5实现控件数据动态显示方式

最近笔者在做一个pyqt5的界面,由于在日常生活中,一些实际运用的场合都需要对数据进行实时的刷新,例如对某个数值的监控,水温,室温的监控等等,都需要实时的刷新控件显示的数据. 对于实现这样的一种功能,pyqt5在面板生成的同时就固定住了UI中的数据,例如我们产生一个QLineEdit控件,然后布局在面板上,但是控件中的数据是固定的,如果这个数据是实时更新的,想要改变空间中的数据时,就要去刷新面板,pyqt5提供了一个QApplication.processEvents()的命令来刷新整个面板,但
Python GUI库PyQt5图形和特效样式QSS介绍

QSS介绍前言 QSS即Qt样式表,是用来自定义控件外观的一种机制,QSS大量参考了Css的内容,但QSS的功能要比Css弱得多,体现在选择器少,可以使用的QSS属性也少,而且并不是所有的属性都可以应用在PyQt的控件上,QSS使页面美化跟代码层分开,利于维护 QSS的语法规则 QSS的语法规则几乎与CSS相同,QSS样式由两部分组成,其中一部分是选择器(Selector),指定哪些软件会受到影响,另一部分是声明(Declaration),指定哪些属性应该在控件上进行设置,声明部分是一系列的"属
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能

疫情肆虐,憋在家实在无聊,索性写点东西,于是就有了这个极极极极极简的音乐播放器. 这个极极极简的音乐播放器类似于"阅后即焚"的软件,播放器可以随机播放歌曲,获取下一首歌曲,不能重新播放上一首歌曲,不能获取歌曲的名称和演唱者.听过的歌曲,就像过眼云烟,放完即散. 下面来看看如何用Python实现这个音乐播放器软件吧! 一.创建UI界面首先,我们来创建这个播放器的UI界面.这个播放器一共有6个控件: 左上角的程序关闭按钮: 左侧的播放状态标签: 顶部的slogan; 播放/暂停按钮: 下
浅谈PyQt5中异步刷新UI和Python多线程总结

目前任务需要做一个界面程序,PyQt是非常方便的选择,QT丰富的控件以及python方便的编程.近期遇到界面中执行一些后台任务时界面卡死的情况,解决了在这里记录下. PyQt PyQt简介 PyQt是Qt的python接口,PyQt的文档较少,但接口和函数可以完全参照Qt,继承了Qt中大量的控件以及信号机制,十分方便.以下简介一个基本的PyQt程序. - 需要导入的类主要来自三个包 - from PyQt5.QtWidgets import 常用的控件 - PyQt5.QtCore 核心功能类,
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍

信号和槽机制是 QT 的核心机制,要精通 QT 编程就必须对信号和槽有所了解.信号和槽是一种高级接口,应用于对象之间的通信,它是 QT 的核心特性,也是 QT 区别于其它工具包的重要地方. 在linux.windows等 GUI 工具包中,GUI组件都会注册回调函数用于处理组件所触发的动作,通常是注册对应的函数的函数指针.在之前关于Button的文章中提到了信号与槽的机制的使用,通过该机制可以很好的将组件的信号(如button的clocked.toggled.pressed等)和处理该信号的槽关
python如何通过pyqt5实现进度条

这篇文章主要介绍了python如何通过pyqt5实现进度条,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 python太博大精深了,使用场景非常多.最近笔者一直使用PyQt5编一些小程序,顺便就把一些常用的东西列出来,做个记录和积累吧. 进度条是非常常用的东西,今天用的时候,顺便温习了一下,这个东西自己感觉没啥可讲的,最好的办法就是例子来说明:下面给一个简单的例子. 基本进度条使用: 进度条的函数如下: self.pbar = QProgres
python图形开发GUI库pyqt5的基本使用方法详解

一:安装PyQt5 pip install pyqt5 如果你的系统没有安装pip请阅读我们的另一篇文章 windows下python安装pip方法详解二:PyQt5简单使用 #!/usr/bin/python3 # -*- coding: utf-8 -*- """ Py40.com PyQt5 tutorial In this example, we create a simple window in PyQt5. author: Jan Bodnar website:
python GUI库图形界面开发之PyQt5信号与槽基本操作

信号与槽基本操作进入Qt Designer,加入控件,本文以按钮为例. 按F4开始后,选择需要加入信号与槽的按钮,如下图所示该按钮会变红,按住鼠标拉出一条红线,若该按钮需控制旁边的label,则红线连接到label上(图1),若对框体(MainWindow)进行操作,则链接到框体上,会出现一个像物理中"地线"似的符号(图2). 图1 图2 连接后,会弹出如下窗体(图3),左侧界面选择信号,如下图中选择"clicked()"代表点击按钮触发右侧对应槽的操作. 勾选下
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例

窗口背景主要包括,背景色与背景图片,设置窗口背景有三种方法使用QSS设置窗口背景使用QPalette设置窗口背景实现PainEvent,使用QPainter绘制背景 QSS设置窗口背景在QSS中,我们可以使用Background或者background-color的方式来设置背景色,设置窗口背景色之后,子控件默认会继承父窗口的背景色,如果想要为控件设置背景图片或图标,则可以使用setPixmap或则setIcon来完成.关于这两个函数的用法,可以参考本博客下的PyQt5的基础控件分栏实
Python GUI库PyQt5样式QSS子控件介绍

QSS子控件 QSS子控件实际上也是一种选择器,其应用在一些复合控件上,典型的如QComboBox,该控件的外观是,有一个矩形的外边框,右边有一个下拉箭头,点击之后会弹出下拉列表,例如: QComboBox:drop-down {image:url(dropdown.png)} 上面的样式指定所有的QComboBox下拉箭头的图片是自定义的,图片文件为dropdown.png ::drop-down子控件选择器可以与上面提到到的选择器一起联合使用,例如 QComboBox#myQComboBox
Pycharm+Python+PyQt5使用详解

1,打开cmd安装PyQt5 pip install pyqt5 2,PyQt5不再提供Qt Designer等工具,所以需要再安装pyqt5-tools pip install pyqt5-tools 3,打开Pycharm,进入设置,添加外部工具 4,添加QtDesigner,exe的路径在安装目录下C:\Program Files\Python35\Lib\site-packages\pyqt5-tools\designer.exe 5,设置"PyUIC"-- 这个主要是用来将