《快速掌握PyQt5》第三十章 网页交互QWebEngineView

已于 2023-04-17 09:14:07 修改
阅读量1w 收藏 61
点赞数 7
分类专栏： 《快速掌握PyQt5》 文章标签： PyQt5 Python PySide GUI开发 qt
于 2018-12-08 21:48:13 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/La_vie_est_belle/article/details/84837174
版权

第三十章 网页交互QWebEngineView

30.1 制作简单浏览器

30.2 小结

《快速掌握PyQt5》专栏已整理成书出版，书名为《PyQt编程快速上手》，详情请见该链接。感谢大家一直以来的支持！祝大家PyQt用得越来越顺！

如果需要在程序中加载并显示网页，那QWebEngineView绝对是最佳的选择。该控件基于Chrome浏览器内核引擎，所提供的功能和方法还是比较强大的。

注：V5.11及更高版本的PyQt5中不包含QWebEngineView，请另外单独下载：

pip install PyQtWebEngine

30.1 制作简单浏览器

本章我们就通过制作下图所示的简单浏览器来了解QWebEngineView的用法：

在输入框中输入网址并敲回车后，QWebEngineView控件加载并显示相应的网址内容。左上方的三个按钮可以允许我们进行前进、后退和刷新操作，右上方的两个按钮可以放大和缩小网页。

下面我们一步步来实现，首先完成浏览器的外观：

import sys
from PyQt5.QtCore import Qt, QUrl
from PyQt5.QtGui import QIcon
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLineEdit, QVBoxLayout, QHBoxLayout


class Demo(QWidget):
    def __init__(self):
        super(Demo, self).__init__()
        self.resize(1000, 600)                  # 1

        self.back_btn = QPushButton(self)       # 2
        self.forward_btn = QPushButton(self)
        self.refresh_btn = QPushButton(self)
        self.zoom_in_btn = QPushButton(self)
        self.zoom_out_btn = QPushButton(self)
        self.url_le = QLineEdit(self)

        self.browser = QWebEngineView(self)

        self.h_layout = QHBoxLayout()
        self.v_layout = QVBoxLayout()

        self.layout_init()
        self.btn_init()
        self.le_init()

    def layout_init(self):                       # 3
        self.h_layout.setSpacing(0)
        self.h_layout.addWidget(self.back_btn)
        self.h_layout.addWidget(self.forward_btn)
        self.h_layout.addWidget(self.refresh_btn)
        self.h_layout.addStretch(2)
        self.h_layout.addWidget(self.url_le)
        self.h_layout.addStretch(2)
        self.h_layout.addWidget(self.zoom_in_btn)
        self.h_layout.addWidget(self.zoom_out_btn)

        self.v_layout.addLayout(self.h_layout)
        self.v_layout.addWidget(self.browser)

        self.setLayout(self.v_layout)

    def btn_init(self):                           # 4
        self.back_btn.setIcon(QIcon('images/back.png'))
        self.forward_btn.setIcon(QIcon('images/forward.png'))
        self.refresh_btn.setIcon(QIcon('images/refresh.png'))
        self.zoom_in_btn.setIcon(QIcon('images/zoom_in.png'))
        self.zoom_out_btn.setIcon(QIcon('images/zoom_out.png'))

    def le_init(self):                            # 5
        self.url_le.setFixedWidth(400)
        self.url_le.setPlaceholderText('Search or enter website name')


if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = Demo()
    demo.show()
    sys.exit(app.exec_())

1. 通过resize()方法来将窗口大小设为1000x600；

2. 实例化按钮控件、输入框控件以及QWebEngineView控件；

3. 完成布局，使用setSpacing()传入参数0代表让各个控件之间不存在间隔(主要想让按钮靠拢)，随后我们在想要的地方使用addStretch()，这样就达到让输入框和按钮分离开来，而按钮之间又是相互靠拢的目的。

4. 给按钮添加图标，图片下载地址如下：

5. 设置输入框宽度为400并设置占位符提示用户在这里输入网址。

此时运行截图如下，QWebEngine还没有显示任何网页：

接下来完成以下功能：在输入框中输入网址并敲击回车后，QWebEngineView加载并显示相应的网址内容：

def keyPressEvent(self, QKeyEvent):
    if QKeyEvent.key() == Qt.Key_Return or QKeyEvent.key() == Qt.Key_Enter:
        if self.url_le.hasFocus():
            self.browser.load(QUrl(self.url_le.text()))

既然涉及到键盘，那肯定要用事件函数来处理了。

标准的键盘上是有两个回车键的，Key_Return为大回车，Key_Enter为小回车(这里我们把两种都考虑进来)如下图所示：

加上if self.url_le.hasFocus():判断是为了只有在输入框被编辑的状态下敲击回车才会让网页实现跳转(读者也可以去使用下市面上的浏览器看下是否是这样)。

条件都满足的话，就调用load()方法并传入一个QUrl类型参数即可(不能单单传入字符串，需要用QUrl()把字符串转为QUrl对象)。

虽然QWebEngineView已经提供了很多有用的方法，但是许多方面还是需要我们开发人员进行完善。比如用户如果只输入"baidu.com"的话，那QWebEngineView其实是识别不出来的，也就无法加载和显示网页了(会跳转到空白页)。

市面上的浏览器在用户只输入"baidu.com"的情况下，会自动在最前面加上"http://"或者“https://”，我们接下来完善下代码：

def keyPressEvent(self, QKeyEvent):
    if QKeyEvent.key() == Qt.Key_Return or QKeyEvent.key() == Qt.Key_Enter:
        if self.url_le.hasFocus():
            if self.url_le.text().startswith('https://') or self.url_le.text().startswith('http://'):
                self.browser.load(QUrl(self.url_le.text()))
            else:
                self.browser.load(QUrl('https://'+self.url_le.text()))

调用startswith()方法判断用户输入的网址字符串是否是以"https://"或者“http://”开头的，如果是的话，则采用用户输入的网址；如果不是，则在前面加上"https://"。这样的话QWebEngineView就可以正常显示了。

接下来完成以下功能：首次运行程序时，QWebEngineView显示百度网页。

def browser_init(self):
    self.browser.load(QUrl('https://baidu.com'))

非常简单，只需要在类初始化函数中调用以上函数即可。

到目前为止，程序代码如下：

import sys
from PyQt5.QtCore import Qt, QUrl
from PyQt5.QtGui import QIcon
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLineEdit, QVBoxLayout, QHBoxLayout


class Demo(QWidget):
    def __init__(self):
        super(Demo, self).__init__()
        self.resize(1000, 600)

        self.back_btn = QPushButton(self)
        self.forward_btn = QPushButton(self)
        self.refresh_btn = QPushButton(self)
        self.zoom_in_btn = QPushButton(self)
        self.zoom_out_btn = QPushButton(self)
        self.url_le = QLineEdit(self)

        self.browser = QWebEngineView()

        self.h_layout = QHBoxLayout()
        self.v_layout = QVBoxLayout()

        self.layout_init()
        self.btn_init()
        self.le_init()
        self.browser_init()

    def layout_init(self):
        self.h_layout.setSpacing(0)
        self.h_layout.addWidget(self.back_btn)
        self.h_layout.addWidget(self.forward_btn)
        self.h_layout.addWidget(self.refresh_btn)
        self.h_layout.addStretch(2)
        self.h_layout.addWidget(self.url_le)
        self.h_layout.addStretch(2)
        self.h_layout.addWidget(self.zoom_in_btn)
        self.h_layout.addWidget(self.zoom_out_btn)

        self.v_layout.addLayout(self.h_layout)
        self.v_layout.addWidget(self.browser)

        self.setLayout(self.v_layout)

    def browser_init(self):
        self.browser.load(QUrl('https://baidu.com'))

    def btn_init(self):
        self.back_btn.setIcon(QIcon('images/back.png'))
        self.forward_btn.setIcon(QIcon('images/forward.png'))
        self.refresh_btn.setIcon(QIcon('images/refresh.png'))
        self.zoom_in_btn.setIcon(QIcon('images/zoom_in.png'))
        self.zoom_out_btn.setIcon(QIcon('images/zoom_out.png'))

    def le_init(self):
        self.url_le.setFixedWidth(400)
        self.url_le.setPlaceholderText('Search or enter website name')

    def keyPressEvent(self, QKeyEvent):
        if QKeyEvent.key() == Qt.Key_Return or QKeyEvent.key() == Qt.Key_Enter:
            if self.url_le.hasFocus():
                if self.url_le.text().startswith('https://') or self.url_le.text().startswith('http://'):
                    self.browser.load(QUrl(self.url_le.text()))
                else:
                    self.browser.load(QUrl('https://'+self.url_le.text()))


if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = Demo()
    demo.show()
    sys.exit(app.exec_())

我们运行一下，发现两个问题：

1. 程序首次运行时，输入框文本并没有显示百度网址。

2. 当我们在输入框中输入"python.org"并敲击回车后，网页可以加载，但是输入框并没有显示当前应该要显示的“https://www.python.org/”。

或者在点击页面中的“Downloads”跳转到另一个页面后，输入框的文本也应该要相应地变为“https://www.python.org/downloads/”。

根据以上问题我们知道接下来应该把输入框的文本设置为QWebEngineView所加载的网址。QWebEngineView控件有一个信号urlChanged，该信号会在每次要加载的网址发生变化时发射。那我们其实可以把这个信号和槽函数连接起来，在槽函数中我们把输入框的文本设置为变化后QWebEngineView要加载的网址即可(其他信号例如loadStarted, loadFinished等其实也可以)。

我们只需要在browser_init()函数中加一行信号和槽函数连接的代码即可：

def browser_init(self):
    self.browser.load(QUrl('https://baidu.com'))
    self.browser.urlChanged.connect(lambda: self.url_le.setText(self.browser.url().toDisplayString()))

调用QWebEngineView的url()方法获取QUrl对象，但这个不是字符串类型，所以还需要调用toDisplayString()方法来获取url文本字符串。现在再来运行下就会发现输入框的文本会跟随QWebEngineView当前加载的网址改变而改变了。

接下来我们完善按钮功能，首先是左上角的后退、前进和刷新。查看文档我们很容易就会发现QWebEngineView有几个槽函数可以实现这三个功能：

back()方法实现后退功能，forward()方法实现前进功能而reload()方法实现刷新功能。我们接下来只需要在btn_init()函数中加几行信号和槽函数连接的代码即可：

def btn_init(self):
    self.back_btn.setIcon(QIcon('images/back.png'))
    self.forward_btn.setIcon(QIcon('images/forward.png'))
    self.refresh_btn.setIcon(QIcon('images/refresh.png'))
    self.zoom_in_btn.setIcon(QIcon('images/zoom_in.png'))
    self.zoom_out_btn.setIcon(QIcon('images/zoom_out.png'))

    self.back_btn.clicked.connect(self.browser.back)
    self.forward_btn.clicked.connect(self.browser.forward)
    self.refresh_btn.clicked.connect(self.browser.reload)

此时运行下程序，就会发现程序可以像一个真正的浏览器一样后退、前进和刷新了。

最后是放大缩小功能，要实现这种功能我们需要用到zoomFactor()方法和setZoomFactor()方法。前者获取当前缩放值，后者设置缩放值。那也就是说我们每当用户点击放大或缩小按钮时，只需要先获取到当前的缩放值，然后放大的话就增加缩放值，缩小就减小缩放值。首先实现槽函数，代码如下：

def zoom_in_func(self):
    self.browser.setZoomFactor(self.browser.zoomFactor()+0.1)

def zoom_out_func(self):
    self.browser.setZoomFactor(self.browser.zoomFactor()-0.1)

然后在btn_init()函数中再加两行信号和槽函数连接的代码：

def btn_init(self):
    self.back_btn.setIcon(QIcon('images/back.png'))
    self.forward_btn.setIcon(QIcon('images/forward.png'))
    self.refresh_btn.setIcon(QIcon('images/refresh.png'))
    self.zoom_in_btn.setIcon(QIcon('images/zoom_in.png'))
    self.zoom_out_btn.setIcon(QIcon('images/zoom_out.png'))

    self.back_btn.clicked.connect(self.browser.back)
    self.forward_btn.clicked.connect(self.browser.forward)
    self.refresh_btn.clicked.connect(self.browser.reload)
    self.zoom_in_btn.clicked.connect(self.zoom_in_func)
    self.zoom_out_btn.clicked.connect(self.zoom_out_func)

现在运行下程序，点击放大缩小按钮，页面就会相应的放大缩小：

但是放大和缩小的范围是有限定的：

根据文档我们可以知道范围为0.25-5.0，默认值是1.0。

完整代码如下：

import sys
from PyQt5.QtCore import Qt, QUrl
from PyQt5.QtGui import QIcon
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLineEdit, QVBoxLayout, QHBoxLayout


class Demo(QWidget):
    def __init__(self):
        super(Demo, self).__init__()
        self.resize(1000, 600)

        self.back_btn = QPushButton(self)
        self.forward_btn = QPushButton(self)
        self.refresh_btn = QPushButton(self)
        self.zoom_in_btn = QPushButton(self)
        self.zoom_out_btn = QPushButton(self)
        self.url_le = QLineEdit(self)

        self.browser = QWebEngineView()

        self.h_layout = QHBoxLayout()
        self.v_layout = QVBoxLayout()

        self.layout_init()
        self.btn_init()
        self.le_init()
        self.browser_init()

    def layout_init(self):
        self.h_layout.setSpacing(0)
        self.h_layout.addWidget(self.back_btn)
        self.h_layout.addWidget(self.forward_btn)
        self.h_layout.addWidget(self.refresh_btn)
        self.h_layout.addStretch(2)
        self.h_layout.addWidget(self.url_le)
        self.h_layout.addStretch(2)
        self.h_layout.addWidget(self.zoom_in_btn)
        self.h_layout.addWidget(self.zoom_out_btn)

        self.v_layout.addLayout(self.h_layout)
        self.v_layout.addWidget(self.browser)

        self.setLayout(self.v_layout)

    def browser_init(self):
        self.browser.load(QUrl('https://baidu.com'))
        self.browser.urlChanged.connect(lambda: self.url_le.setText(self.browser.url().toDisplayString()))

    def btn_init(self):
        self.back_btn.setIcon(QIcon('images/back.png'))
        self.forward_btn.setIcon(QIcon('images/forward.png'))
        self.refresh_btn.setIcon(QIcon('images/refresh.png'))
        self.zoom_in_btn.setIcon(QIcon('images/zoom_in.png'))
        self.zoom_out_btn.setIcon(QIcon('images/zoom_out.png'))

        self.back_btn.clicked.connect(self.browser.back)
        self.forward_btn.clicked.connect(self.browser.forward)
        self.refresh_btn.clicked.connect(self.browser.reload)
        self.zoom_in_btn.clicked.connect(self.zoom_in_func)
        self.zoom_out_btn.clicked.connect(self.zoom_out_func)

    def le_init(self):
        self.url_le.setFixedWidth(400)
        self.url_le.setPlaceholderText('Search or enter website name')

    def keyPressEvent(self, QKeyEvent):
        if QKeyEvent.key() == Qt.Key_Return or QKeyEvent.key() == Qt.Key_Enter:
            if self.url_le.hasFocus():
                if self.url_le.text().startswith('https://') or self.url_le.text().startswith('http://'):
                    self.browser.load(QUrl(self.url_le.text()))
                else:
                    self.browser.load(QUrl('https://'+self.url_le.text()))

    def zoom_in_func(self):
        self.browser.setZoomFactor(self.browser.zoomFactor()+0.1)

    def zoom_out_func(self):
        self.browser.setZoomFactor(self.browser.zoomFactor()-0.1)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = Demo()
    demo.show()
    sys.exit(app.exec_())

30.2 小结

1. 这个简单的浏览器还可以添加很多功能，或者再进行完善，让它更像一个真正的浏览器。比如程序首次运行时，前进和后退按钮应该都要设置为不可用，而且在无法前进和后退是也要设置为不可用(涉及到history()方法，小伙伴可以自己去实现下)。

2. 还是那句话——多查文档。如果你脑海里有想要实现的功能，你可以去查下文档看看这个控件有没有提供相应的方法。或者你脑海里可能一片空白，那你其实也可以先去读下文档看看某控件提供方法有没有你喜欢的，能给你带来灵感也说不定。

欢迎关注我的微信公众号，发现更多有趣内容：

la_vie_est_belle
关注
专栏目录
PyQt5的QWebEngineView使用示例
12-16
一.支持视频播放 关键代码 self.settings().setAttribute(QWebEngineSettings.PluginsEnabled, True) #支持视频播放 二.支持页面关闭请求 关键代码 self.page().windowCloseRequested.connect(self.on_windowCloseRequested) #页面关闭请求 三.支持页面下载请求 关键代码 self.page().profile().downloadRequested.connect(self.on_downloadRequested) #页面下载请求 完整源码 【如下代
No module named ‘PyQt5.QtWebEngineWidgets‘kn-----已解决
weixin_64338372的博客
11-30 5861
本人在学习PyQt5的时候遇到了报错的情况，原因就是ModuleNotFoundError: No module named 'PyQt5.QtWebEngineWidgets'没有PyQt5.QtWebEngineWidgets，自己总结出了一个很好的办法。
PyQtWebEngine模块，PyQt5用于处理网页渲染和浏览器功能
最新发布
weixin_41978174的博客
08-03 105
PyQtWebEngine 是框架的一个模块，用于在 PyQt5 应用程序中嵌入 Web 引擎功能。它基于 Qt WebEngine 技术，提供了与 Web 内容交互的功能，包括显示网页、执行 JavaScript、处理网络请求等。
PyQt5:使用PyQtWebEngine
ice_bear221的博客
07-23 1783
PyQt5:使用PyQtWebEngine
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
09-17
本文将详细探讨如何在PyQt5中利用QWebEngineView内嵌网页并与Python进行数据交互。 首先，QWebEngineView是用来加载和显示HTML网页的控件，它可以内嵌在PyQt5的窗口应用中，提供类似于浏览器的功能。为了实现Python...
如何让PyQt5中QWebEngineView与JavaScript交互
01-19
pip install PyQt5 pip install PyQtWebEngine Python端 1.使用QWebChannel的registerObject（”JsBridge名”,”JsBridge”）方法注册回调 JsBridge名：在JavaScript中调用时使用的对象名称 JsBridge：被...
pyqt5+OpenCV实现简易交互式图像处理程序
03-11
1.利用pyqt5设计程序界面及交互接口； 2.使用OpenCV库函数及相关算法的具体实现完成简易的数字图像处理； 3.内容涉及图像的平移、缩放、任意角度旋转、平滑、锐化、添加噪声、图像分割等基本处理方法。
pyqt5的QWebEngineView 使用模板的方法
01-20
在PyQT5中，QWebEngineView是用于展示网页内容的核心组件，它是QtWebEngineWidgets模块的一部分，基于Google Chrome的 Blink 渲染引擎。相比于早期的QtWebKit和QtWebKitWidgets，QWebEngineView提供了更现代的网络...
PyQT6的从零开始（三）：在pyqt桌面程序简单内置网页浏览器
zzzznone的博客
04-06 9570
结合自己的毕设需求，要在pyqt的程序中内置一个web浏览器，特此记录
python网页交互引擎_《快速掌握PyQt5》第三十章 网页交互QWebEngineView
weixin_34856035的博客
02-04 1175
如果需要在程序中加载并显示网页，那QWebEngineView绝对是最佳的选择。该控件基于Chrome浏览器内核引擎，所提供的功能和方法还是比较强大的。注：V5.11及更高版本的PyQt5中不包含QWebEngineView，请另外单独下载：pip install PyQtWebEngine30.1 制作简单浏览器本章我们就通过制作下图所示的简单浏览器来了解QWebEngineView的用法：在输...
PyQt5高级界面控件之QWebEngineView(十三)
热门推荐
jia666666的博客
08-14 4万+
QWebEngineView 前言 PyQt5使用QWebEngineView控件来展示HTML页面，对老版本的QWebView类不在进行维护，因为WebEngineView使用Chromium内核可以给用户带来更好的体验 QWebEngineView控件可以使用load（）函数加载一个Web页面，实际上就是使用HTTP Get方法加载Web页面，这个控件既可以加载本地的Web...
PyQt5-widget之QWebEngineView QT网页展示
qq_16729179的博客
03-29 2561
一个使用QWebEngineView的简单demo
pyqt：QWebEngineView的简单使用
z_d_g的博客
02-01 1013
在pyqt中，如果想要显示网页，可以用我的这段代码，不仅成功显示网页，而且适应了不同缩放比例的屏幕，保证了在不同分辨率设备上的观感。
关于PyQt5中PyQtWebEngine的最新使用
cauchy8389的专栏
04-14 1万+
大家知道 用Python做爬虫如遇动态渲染javascript则需要一些框架如PyQt，然而PyQt5 相比4做了很大的改动，似乎难用了许多，没有了findAllElements方法，无法直接查找元素，用lxml加载之后又与原文档失去了关联，那么该如何动态修改页面元素呢？下面给出了我的改进用法，希望对大家有所帮助： import csv import time try: from P...
PYQT5 QWebEngineView 使用HTML+JS 代替GUI开发桌面应用程序
weixin_42042144的博客
04-25 1320
使用QWebChannel，进行PyThon与JavaScript的数据交互，无需再创建http或websocket。此教程适用于熟悉使用前端开发应用界面，并且由于一些需求使用Electron.js无法满足，需要用到python的朋友。
PyQt5 QWebEngineView网页交互
SongYuLong
11-26 1764
【代码】PyQt5 QWebEngineView网页交互。
PyQt5系列教程（58）：Web页面交互初探1（QWebEngineView的小例子）
feifei2864的博客
12-20 1284
文章来源：www.xdbcb8.com，转载请注明出处。上期我们画了一个大大的机器猫。本期我们来一起学习下在PyQt5中如何和Web页面进行交互的。这次的例子我们画一个好看的饼图，蹭一蹭数据可视化这个热点吧。 总体介绍 QWebEngineView类提供了一个用于查看和编辑Web文档的小部件。 Web视图是Qt WebEngine Web浏览模块的主要小部件组件。它可以在各种应用程序中用于从...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

la_vie_est_belle

谢谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值