使用QWebEngineView打造一款简单浏览器

头像
Fish
     广西南宁市
    阅读 17 分钟

    使用PyQt5的QWebEngineView组件打造一款简单的浏览器
    QWebEngineView是PyQt中的一个可以显示网页的组件，该组件封装了谷歌浏览器内核，功能强大。新手试着实现一下，锻炼自己的编码能力。

    成品图片
    1界面图片

    2界面图片

    首先重写一下QWebEngineView类的createWindow函数
    这个函数在QWebEngineView中点击跳转打开新页面的时候会被调用，如果不重写的话，页面链接跳转到新页面的时候就会没有反应。

    class MyWebView(QWebEngineView):
    
    def __init__(self, my, *args):
        super(MyWebView, self).__init__(*args)
        self.my = my
        # self.view = None

    def createWindow(self, QWebEnginePage_WebWindowType):
        #如果是要在本页面显示的页面则return self
        return self.my.create_view() #创建一个新的容器显示新的页面

    写一个用来装页面以及前进和后退刷新的界面

    class Webbox(QWidget):
    def __init__(self, my, *args):
        super(Webbox, self).__init__(*args)
        self.my = my
        self.setGUI()

    def setGUI(self):
        self.webview = MyWebView(self.my, self)
        self.buttons = []
        self.url_input = QLineEdit(self)
        self.function_group = QButtonGroup(self)
        self.function_group.setExclusive(True)
        self.url_input.setStyleSheet(MyStyle.getInputStyle())
        self.homepage()
        self.webview.loadFinished.connect(self.update_view)
        icon = ['back.png', 'forward.png', 'reload.png', 'home.png']
        for i in icon:
            button = QPushButton(self)
            button.setIcon(QIcon(QPixmap(self.get_resource_path('static/' + i))))
            button.setStyleSheet(MyStyle.getIconButtonStyle())
            self.buttons.append(button)
        self.buttons[1].clicked.connect(lambda: self.webview.forward())
        self.buttons[0].clicked.connect(lambda: self.webview.back())
        self.buttons[2].clicked.connect(lambda: self.webview.reload())
        self.buttons[3].clicked.connect(self.homepage)
        self.url_input.returnPressed.connect(self.init)

    def homepage(self):
        self.webview.load(QUrl('https://www.baidu.com'))
        self.url_input.setText('https://www.baidu.com')

    def resizeEvent(self, a0: QtGui.QResizeEvent) -> None:
        self.buttons[0].setGeometry(5, 5, 45, 30)
        self.buttons[1].setGeometry(50 * 1 + 5, 5, 45, 30)
        self.buttons[2].setGeometry(50 * 2 + 5, 5, 45, 30)
        self.buttons[3].setGeometry(50 * 3 + 5, 5, 45, 30)
        self.url_input.setGeometry(50 * 4 + 5, 5, self.width() - 4 * 50 + 10 - 3 * 35 - 80, 30)
        self.webview.setGeometry(0, 40, self.width(), self.height() - 35)

    def init(self):
        if 'http' in self.url_input.text():
            self.webview.load(QUrl(self.url_input.text()))
        elif self.url_input.text() == '':
            self.zhuye()
        else:
            self.webview.load(QUrl(r'http://' + self.url_input.text()))
        self.url_input.setText(self.webview.url().toString())

    def update_view(self):
        self.url_input.setText(self.webview.url().toString())
        self.url_input.setCursorPosition(0)
        self.my.update_title(self)

    def get_resource_path(self, relative_path):
        if hasattr(sys, '_MEIPASS'):
            return os.path.join(sys._MEIPASS, relative_path)
        return os.path.join(os.path.abspath("."), relative_path)

    创建一个装整个界面的窗口

    class WebView(QWidget):
    def __init__(self, *args):
        super(WebView, self).__init__(*args)
        self.windows = []
        self.buttons = []
        self.setUI()

    def setUI(self):
        self.tabbar = QTabWidget(self)
        self.tabbar.setTabsClosable(True)
        self.tabbar.setStyleSheet(MyStyle.getQTabWidgetStyle())
        self.tabbar.tabCloseRequested.connect(self.close_tab)
        self.setStyleSheet(MyStyle.getQwidgetStyle2())
        # self.tabbar.setAttribute(Qt.WA_StyledBackground)
        self.proxies = QCheckBox('启用代理', self)
        self.proxies.clicked.connect(self.IsProxies)
        self.proxies.setStyleSheet(MyStyle.getCheckBoxStyle())
        view = Webbox(self)
        self.windows.append(view)
        self.tabbar.addTab(view, view.webview.title())
        self.buttonsname = ['shouchang1.png', 'shouchang2.png', 'more.png', 'add.png']
        for i in self.buttonsname:
            button = QPushButton(self)
            button.setIcon(QIcon(QPixmap(self.get_resource_path('static/' + i))))
            button.setStyleSheet(MyStyle.getIconButtonStyle())
            self.buttons.append(button)
        self.buttons[3].setStyleSheet(MyStyle.getButtonStyle2())
        self.buttons[3].setGeometry(self.tabbar.count() * 170, 0, 30, 30)
        self.buttons[3].clicked.connect(self.create_view)

    # 创建一个新的Webobox容器来装新的页面
    def create_view(self):
        try:
            view = Webbox(self)
            self.windows.append(view)
            self.tabbar.addTab(view, view.webview.title())
            self.tabbar.setCurrentWidget(view)
            if self.tabbar.count() * 150 > self.width():
                self.buttons[3].setGeometry(self.width()-40, 0, 30, 30)
            else:
                self.buttons[3].setGeometry(self.tabbar.count() * 170, 0, 30, 30)
            return view.webview
        except Exception as e:
            print(e)


    def close_tab(self, currentIndex):
        currentQWidget = self.tabbar.widget(currentIndex)
        currentQWidget.deleteLater()
        self.windows.remove(currentQWidget)
        self.tabbar.removeTab(currentIndex)
        if self.tabbar.count() * 150 > self.width():
            self.buttons[3].setGeometry(self.width()-40, 0, 30, 30)
        else:
            self.buttons[3].setGeometry(self.tabbar.count() * 170, 0, 30, 30)

    def resizeEvent(self, a0: QtGui.QResizeEvent) -> None:
        self.proxies.move(self.width() - 160, 41)
        self.buttons[0].setGeometry(self.width() - 40 * 3 -80, 7 + 30, 26, 26)
        self.buttons[1].setGeometry(self.width() - 35 * 2, 5 + 30, 30, 30)
        self.buttons[2].setGeometry(self.width() - 40, 5 + 30, 30, 30)
        self.tabbar.setGeometry(0, 0, self.width(), self.height())

    def update_title(self, view):
        self.tabbar.setTabText(self.tabbar.indexOf(view), view.webview.title())
    #这一块代码用于获取代码运行的路径
    def get_resource_path(self, relative_path):
        if hasattr(sys, '_MEIPASS'):
            return os.path.join(sys._MEIPASS, relative_path)
        return os.path.join(os.path.abspath("."), relative_path)

    # 这一块代码只是用于测试，具体功能没有实现
    def IsProxies(self):
        if self.proxies.isChecked():
            proxy = QtNetwork.QNetworkProxy()
            # Http访问代理
            proxy.setType = QtNetwork.QNetworkProxy.HttpProxy
            # 代理ip地址HttpProxy
            proxy.setHostName("127.0.0.1")
            # 端口号
            proxy.setPort(8888)
            proxy.setUser("4")
            proxy.setPassword("1")
            QtNetwork.QNetworkProxy.setApplicationProxy(proxy)

    代码中所用到的图片以及其他类
    一个用来存放QSS样式的类
    因为不想从其他文件夹读取qss文件，所以直接写了一个样式类存放qss样式，如果你只写了一个很简单的窗口，qss样式很少的时候可以使用这种方法，在打包exe的时候可以不用额外打包样式文件。

    class MyStyle():
    @staticmethod
    def getIconButtonStyle():
        return '''
        QPushButton{
            background-color:rgba(0,0,0,0);
            border-radius:3px;
            boder:none;
        }
        QPushButton:hover{
            background-color:rgb(230,230,230);
        }
        QPushButton:pressed{
            background-color:rgb(210,210,210);
        }
        '''
    @staticmethod
    def getButtonStyle2():
        return '''
        QPushButton{
            background-color:rgb(236,245,255);
            font-family:"SimSun";
            funt-size:18px;
            
        }
        QPushButton:hover{
            background-color:rgb(64,158,255);
            color:white;
        }
        QPushButton:pressed{
            background-color:rgb(58,142,230);
        }
        '''

    @staticmethod
    def getInputStyle():
        return '''
        QLineEdit{
            border-radius:3px;
            border-style:solid;
            border-width:1px;
            font-size: 16px;
            padding-right:40px;
            font-family:"Microsoft YaHei";
            border-color:rgb(200,200,200);
            background-color:white;
        }
        QLineEdit:hover{
            border-color:rgb(150,150,150);
        }
        
        QLineEdit:focus{
            border-color:rgb(102,177,255);
        }
        '''

    @staticmethod
    def getQTabWidgetStyle():
        return '''
        QTabWidget{
            background-color:rgb(240,240,240);
        }
        
        QTabBar::tab {
            background-color:rgb(236,245,255);
            height:30px;
            padding-left:10px;
            padding-right:10px;
            margin-top:0px;
            min-width:150px;
            max-width:150px;
         }
        QTabBar::tab:hover{
            color:rgb(64,158,255);
        }
        
        QTabBar::tab:selected{
            color:white;
            background:rgb(64,158,255);
        }
        QTabBar::close-button{
            image: url(static/close.png);
            background-color:rgba(0,0,0,0);
        }
        QTabBar::close-button:hover {
            image: url(static/close2.png);
        }
        '''

    @staticmethod
    def getQwidgetStyle2():
        return'''
        QWidget{
            background-color:rgb(250,250,250);
            border:none;
        }
        '''

    @staticmethod
    def getCheckBoxStyle():
        return '''
        QCheckBox{
            color:rgb(150,150,150);
            Background-color:rgba(0,0,0,0);
        }
        QCheckBox:hover{
            Color:rgb(149,216,255);
        }
        QCheckBox:checked{
            color:rgb(64,158,255);
        }

        '''

    代码中用到的按钮图标
    下载窗口中用到的按钮图标文件请点击这里

    整体代码

    ##!/usr/bin/python3
# -*- coding: utf-8 -*-
# @Author : Tang Shimeng

import os
import sys

from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5 import QtNetwork, QtGui
from PyQt5.QtCore import QUrl
from PyQt5.QtGui import QPixmap, QIcon
from PyQt5.QtWidgets import QWidget, QTabWidget, QApplication, QButtonGroup, QLineEdit, QPushButton, QCheckBox


class MyStyle():
    @staticmethod
    def getIconButtonStyle():
        return '''
        QPushButton{
            background-color:rgba(0,0,0,0);
            border-radius:3px;
            boder:none;
        }
        QPushButton:hover{
            background-color:rgb(230,230,230);
        }
        QPushButton:pressed{
            background-color:rgb(210,210,210);
        }
        '''
    @staticmethod
    def getButtonStyle2():
        return '''
        QPushButton{
            background-color:rgb(236,245,255);
            font-family:"SimSun";
            funt-size:18px;
            
        }
        QPushButton:hover{
            background-color:rgb(64,158,255);
            color:white;
        }
        QPushButton:pressed{
            background-color:rgb(58,142,230);
        }
        '''

    @staticmethod
    def getInputStyle():
        return '''
        QLineEdit{
            border-radius:3px;
            border-style:solid;
            border-width:1px;
            font-size: 16px;
            padding-right:40px;
            font-family:"Microsoft YaHei";
            border-color:rgb(200,200,200);
            background-color:white;
        }
        QLineEdit:hover{
            border-color:rgb(150,150,150);
        }
        
        QLineEdit:focus{
            border-color:rgb(102,177,255);
        }
        '''

    @staticmethod
    def getQTabWidgetStyle():
        return '''
        QTabWidget{
            background-color:rgb(240,240,240);
        }
        
        QTabBar::tab {
            background-color:rgb(236,245,255);
            height:30px;
            padding-left:10px;
            padding-right:10px;
            margin-top:0px;
            min-width:150px;
            max-width:150px;
         }
        QTabBar::tab:hover{
            color:rgb(64,158,255);
        }
        
        QTabBar::tab:selected{
            color:white;
            background:rgb(64,158,255);
        }
        QTabBar::close-button{
            image: url(static/close.png);
            background-color:rgba(0,0,0,0);
        }
        QTabBar::close-button:hover {
            image: url(static/close2.png);
        }
        '''

    @staticmethod
    def getQwidgetStyle2():
        return'''
        QWidget{
            background-color:rgb(250,250,250);
            border:none;
        }
        '''

    @staticmethod
    def getCheckBoxStyle():
        return '''
        QCheckBox{
            color:rgb(150,150,150);
            Background-color:rgba(0,0,0,0);
        }
        QCheckBox:hover{
            Color:rgb(149,216,255);
        }
        QCheckBox:checked{
            color:rgb(64,158,255);
        }

        '''

class MyWebView(QWebEngineView):

    def __init__(self, my, *args):
        super(MyWebView, self).__init__(*args)
        self.my = my
        # self.view = None

    def createWindow(self, QWebEnginePage_WebWindowType):
        return self.my.create_view()


class Webbox(QWidget):
    def __init__(self, my, *args):
        super(Webbox, self).__init__(*args)
        self.my = my
        self.setGUI()

    def setGUI(self):
        self.webview = MyWebView(self.my, self)
        self.buttons = []
        self.url_input = QLineEdit(self)
        self.function_group = QButtonGroup(self)
        self.function_group.setExclusive(True)
        self.url_input.setStyleSheet(MyStyle.getInputStyle())
        self.homepage()
        self.webview.loadFinished.connect(self.update_view)
        icon = ['back.png', 'forward.png', 'reload.png', 'home.png']
        for i in icon:
            button = QPushButton(self)
            button.setIcon(QIcon(QPixmap(self.get_resource_path('static/' + i))))
            button.setStyleSheet(MyStyle.getIconButtonStyle())
            self.buttons.append(button)
        self.buttons[1].clicked.connect(lambda: self.webview.forward())
        self.buttons[0].clicked.connect(lambda: self.webview.back())
        self.buttons[2].clicked.connect(lambda: self.webview.reload())
        self.buttons[3].clicked.connect(self.homepage)
        self.url_input.returnPressed.connect(self.init)

    def homepage(self):
        self.webview.load(QUrl('https://www.baidu.com'))
        self.url_input.setText('https://www.baidu.com')

    def resizeEvent(self, a0: QtGui.QResizeEvent) -> None:
        self.buttons[0].setGeometry(5, 5, 45, 30)
        self.buttons[1].setGeometry(50 * 1 + 5, 5, 45, 30)
        self.buttons[2].setGeometry(50 * 2 + 5, 5, 45, 30)
        self.buttons[3].setGeometry(50 * 3 + 5, 5, 45, 30)
        self.url_input.setGeometry(50 * 4 + 5, 5, self.width() - 4 * 50 + 10 - 3 * 35 - 80, 30)
        self.webview.setGeometry(0, 40, self.width(), self.height() - 35)

    def init(self):
        if 'http' in self.url_input.text():
            self.webview.load(QUrl(self.url_input.text()))
        elif self.url_input.text() == '':
            self.zhuye()
        else:
            self.webview.load(QUrl(r'http://' + self.url_input.text()))
        self.url_input.setText(self.webview.url().toString())

    def update_view(self):
        self.url_input.setText(self.webview.url().toString())
        self.url_input.setCursorPosition(0)
        self.my.update_title(self)

    def get_resource_path(self, relative_path):
        if hasattr(sys, '_MEIPASS'):
            return os.path.join(sys._MEIPASS, relative_path)
        return os.path.join(os.path.abspath("."), relative_path)



class WebView(QWidget):
    def __init__(self, *args):
        super(WebView, self).__init__(*args)
        self.windows = []
        self.buttons = []
        self.setUI()

    def setUI(self):
        self.tabbar = QTabWidget(self)
        self.tabbar.setTabsClosable(True)
        self.tabbar.setStyleSheet(MyStyle.getQTabWidgetStyle())
        self.tabbar.tabCloseRequested.connect(self.close_tab)
        self.setStyleSheet(MyStyle.getQwidgetStyle2())
        # self.tabbar.setAttribute(Qt.WA_StyledBackground)
        self.proxies = QCheckBox('启用代理', self)
        self.proxies.clicked.connect(self.IsProxies)
        self.proxies.setStyleSheet(MyStyle.getCheckBoxStyle())
        view = Webbox(self)
        self.windows.append(view)
        self.tabbar.addTab(view, view.webview.title())
        self.buttonsname = ['shouchang1.png', 'shouchang2.png', 'more.png', 'add.png']
        for i in self.buttonsname:
            button = QPushButton(self)
            button.setIcon(QIcon(QPixmap(self.get_resource_path('static/' + i))))
            button.setStyleSheet(MyStyle.getIconButtonStyle())
            self.buttons.append(button)
        self.buttons[3].setStyleSheet(MyStyle.getButtonStyle2())
        self.buttons[3].setGeometry(self.tabbar.count() * 170, 0, 30, 30)
        self.buttons[3].clicked.connect(self.create_view)

    # 创建一个新的Webobox容器来装新的页面
    def create_view(self):
        try:
            view = Webbox(self)
            self.windows.append(view)
            self.tabbar.addTab(view, view.webview.title())
            self.tabbar.setCurrentWidget(view)
            if self.tabbar.count() * 150 > self.width():
                self.buttons[3].setGeometry(self.width()-40, 0, 30, 30)
            else:
                self.buttons[3].setGeometry(self.tabbar.count() * 170, 0, 30, 30)
            return view.webview
        except Exception as e:
            print(e)


    def close_tab(self, currentIndex):
        currentQWidget = self.tabbar.widget(currentIndex)
        currentQWidget.deleteLater()
        self.windows.remove(currentQWidget)
        self.tabbar.removeTab(currentIndex)
        if self.tabbar.count() * 150 > self.width():
            self.buttons[3].setGeometry(self.width()-40, 0, 30, 30)
        else:
            self.buttons[3].setGeometry(self.tabbar.count() * 170, 0, 30, 30)

    def resizeEvent(self, a0: QtGui.QResizeEvent) -> None:
        self.proxies.move(self.width() - 160, 41)
        self.buttons[0].setGeometry(self.width() - 40 * 3 -80, 7 + 30, 26, 26)
        self.buttons[1].setGeometry(self.width() - 35 * 2, 5 + 30, 30, 30)
        self.buttons[2].setGeometry(self.width() - 40, 5 + 30, 30, 30)
        self.tabbar.setGeometry(0, 0, self.width(), self.height())

    def update_title(self, view):
        self.tabbar.setTabText(self.tabbar.indexOf(view), view.webview.title())

    def get_resource_path(self, relative_path):
        if hasattr(sys, '_MEIPASS'):
            return os.path.join(sys._MEIPASS, relative_path)
        return os.path.join(os.path.abspath("."), relative_path)

    def IsProxies(self):
        if self.proxies.isChecked():
            proxy = QtNetwork.QNetworkProxy()
            # Http访问代理
            proxy.setType = QtNetwork.QNetworkProxy.HttpProxy
            # 代理ip地址HttpProxy
            proxy.setHostName("127.0.0.1")
            # 端口号
            proxy.setPort(8888)
            proxy.setUser("4")
            proxy.setPassword("1")
            QtNetwork.QNetworkProxy.setApplicationProxy(proxy)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = WebView()
    window.resize(800, 500)
    window.setMinimumWidth(800)
    window.setWindowTitle('Browser')
    window.setWindowIcon(QIcon(window.get_resource_path("static/ico.png")))
    window.show()
    sys.exit(app.exec_())

    代码逻辑不难，重在参与。

    python
    本文系转载，阅读原文
    https://blog.csdn.net/qq_43755423/article/details/124086866
    Fish
    9 声望2 粉丝
    « 上一篇
    QT5设定QWebEngineView大小
    下一篇 »
    PyQt5 实现状态栏(statusBar）显示和隐藏功能

    引用和评论

    推荐阅读
    头像
    FFmpeg教程（超级详细版）

    Fish赞 5阅读 26.7k

    头像
    将 Python 和 Rust 融合在一起，为 pyQuil® 4.0 带来和谐

    Swift社区赞 4阅读 819

    头像
    Ubuntu20.04 从源代码编译安装 python3.10

    universe_king赞 2阅读 10.7k评论 1

    头像
    Python装饰器：让你的代码优雅又高效的秘密武器

    LLLibra146赞 3阅读 842

    头像
    从javascript到python(一):基本环境搭建

    深圳飘赞 2阅读 4.7k

    头像
    Python编程：创意爱心表白代码集

    唠叨的甘蔗阅读 3.1k

    头像
    你不知道的Requests进阶技巧：用Retry实现完美重试

    LLLibra146赞 1阅读 568

    0 条评论
    得票最新