PyQt5子类化QWebEngineView运行后无网页内容显示问题排查

simple_browser.py #

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'simple_browser.ui'
#
# Created by: PyQt5 UI code generator 5.15.7
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(749, 453)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.gridLayout = QtWidgets.QGridLayout(self.centralwidget)
        self.gridLayout.setObjectName("gridLayout")
        self.web_frame = QtWidgets.QFrame(self.centralwidget)
        self.web_frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.web_frame.setFrameShadow(QtWidgets.QFrame.Raised)
        self.web_frame.setObjectName("web_frame")
        self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.web_frame)
        self.verticalLayout_2.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout_2.setObjectName("verticalLayout_2")
        self.gridLayout.addWidget(self.web_frame, 0, 0, 1, 1)
        MainWindow.setCentralWidget(self.centralwidget)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

run_me_2.py #

from PyQt5 import QtCore, QtGui, QtWidgets
from simple_browser import Ui_MainWindow
import sys
import traceback

from PyQt5.QtCore import pyqtSlot
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEnginePage

from PyQt5.QtCore import QUrl



class Run_me:

    def __init__(self):
        self.app = QtWidgets.QApplication(sys.argv)
        self.MainWindow = QtWidgets.QMainWindow()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self.MainWindow)
        self.MainWindow.show()

        self.view = Web_View(self)

        #close action
        self.MainWindow.closeEvent = lambda event:self.closeEvent(event)


        sys.exit(self.app.exec_())
        
    def closeEvent(self,event):
        try:
            
            event.accept()
        except:
            error_message = str(traceback.format_exc())
            print(error_message)

class Web_View(QWebEngineView):

    def __init__(self,parent,*args, **kwargs):
        try:
            super().__init__(parent.ui.web_frame,*args, **kwargs)

            # setup a page with my html
            self.setPage(WebEnginePage(self))
            self.load(QUrl("http://www.in.gr/"))
            #self.setGeometry(0,0,770,80)
            self.setParent(parent.ui.web_frame)
            self.show()
            parent.ui.verticalLayout_2.addWidget(self)
            
            parent.ui.web_frame.update()

            # setup channel
            #self.channel = QWebChannel()
            #self.channel.registerObject('backend', self)
            #self.page().setWebChannel(self.channel)
        except Exception as e:
            print(e)


class WebEnginePage(QWebEnginePage):

    def javaScriptConsoleMessage(self, level, message, lineNumber, sourceID):
        print("-----")
        print(level)
        print(message)
        print(lineNumber)
        print(sourceID)
        print("-----")


if __name__=="__main__":
    program = Run_me()

执行命令 python3 run_me_2.py 启动程序后，窗口中没有网页内容输出，运行效果截图如下：

以下是安装PyQt5环境使用的命令：

#install pyqt5
sudo apt-get -y install python3-pyqt5
sudo apt-get -y install qtcreator pyqt5-dev-tools
sudo apt-get -y install qttools5-dev-tools
sudo apt install -y qtcreator qtbase5-dev qt5-qmake cmake
python3 -m pip install PyQt5==5.13.1 --use-feature 2020-resolver
python3 -m pip install PyQt5-sip

sudo apt-get -y install python3-dev
sudo apt-get -y install python3-pyqt5
sudo apt-get -y install qtcreator pyqt5-dev-tools
sudo apt-get -y install qttools5-dev-tools

一共两个核心问题：

• 依赖缺失：PyQt5从5.12版本开始，把QWebEngine相关的网页渲染组件拆分为独立的PyQtWebEngine包，上述安装命令里没有安装这个包，是网页无法加载渲染的最主要原因。执行python3 -m pip install PyQtWebEngine==5.13.1安装对应版本的依赖即可解决环境问题，注意版本要和已安装的PyQt5==5.13.1保持一致，避免版本不兼容。
• 代码逻辑冗余：Web_View类初始化时，已经在super().__init__()里传入了parent.ui.web_frame作为父控件，后续又重复调用setParent(parent.ui.web_frame)；Qt布局会自动管理加入其中的子控件显示状态，不需要手动调用show()，重复设置父控件、手动调用show容易引发布局渲染异常。直接删除冗余的self.setParent(parent.ui.web_frame)、self.show()、parent.ui.web_frame.update()几行代码即可。

修复后验证：安装完缺失的WebEngine依赖、删掉冗余代码后重新启动程序，即可正常加载网页内容。

内容的提问来源于stack exchange，提问作者Chris P