Python使用Pyqt5實現簡易瀏覽器(最新版本測試過)

阿新 • • 發佈：2020-04-28

準備環境

首先我們需要的是我們的開發環境，我使用的是python 3.8.2和pyqt 5.14.2，因為有強迫症，所以喜歡使用最新版的

安裝QtWebEngineWidgets

這是新版使用的web瀏覽器引擎，更加的貼近谷歌瀏覽器，好像是需要單獨安裝，我就是這樣的

pip3 install QtWebEngineWidgets

多tab頁面

做這個的時候遇到好多坑，比如在多個tab裡面開啟頁面，要使用這個QTabWidget，這個不用我們再去下載了，已經集成了

頁面連結點選無反應

這個搞了我半天，我之前還一直以為是跨域的問題，其實是這個機制的問題，需要重寫createWindow方法

# 建立瀏覽器，重寫重寫createwindow方法實現頁面連線的點選跳轉
class WebEngineView(QWebEngineView):

  def __init__(self,mainwindow,parent=None):
    super(WebEngineView,self).__init__(parent)
    self.mainwindow = mainwindow

  # 重寫createwindow()
  def createWindow(self,QWebEnginePage_WebWindowType):
    new_webview = WebEngineView(self.mainwindow)
    self.mainwindow.create_tab(new_webview)
    return new_webview

然後大體就是一些頁面的佈局，這個可以使用Qt Designer，可以自動轉化成為我們的py程式碼

然後就是一些前進，後退，重新整理，停止的方法

整體程式碼，可執行

# -*- coding: utf-8 -*-
# @Author: dshj
# @Date : 2020/04/26

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


# 建立主視窗
class MainWindow(QMainWindow):
  def __init__(self,*args,**kwargs):
    super().__init__(*args,**kwargs)
    # 設定視窗標題
    self.setWindowTitle('簡易瀏覽器')
    # 設定視窗大小900*600
    self.resize(1300,700)
    self.show()

    # 建立tabwidget（多標籤頁面）
    self.tabWidget = QTabWidget()
    self.tabWidget.setTabShape(QTabWidget.Triangular)
    self.tabWidget.setDocumentMode(True)
    self.tabWidget.setMovable(True)
    self.tabWidget.setTabsClosable(True)
    self.tabWidget.tabCloseRequested.connect(self.close_Tab)
    self.setCentralWidget(self.tabWidget)

    # 第一個tab頁面
    self.webview = WebEngineView(self) # self必須要有，是將主視窗作為引數，傳給瀏覽器
    self.webview.load(QUrl("http://www.baidu.com"))
    self.create_tab(self.webview)

    # 使用QToolBar建立導航欄，並使用QAction建立按鈕
    # 新增導航欄
    navigation_bar = QToolBar('Navigation')
    # 設定圖示的大小
    navigation_bar.setIconSize(QSize(16,16))
    # 新增導航欄到視窗中
    self.addToolBar(navigation_bar)

    # QAction類提供了抽象的使用者介面action，這些action可以被放置在視窗部件中
    # 新增前進、後退、停止載入和重新整理的按鈕
    back_button = QAction(QIcon('icons/houtui.png'),'Back',self)
    next_button = QAction(QIcon('icons/qianjin.png'),'Forward',self)
    stop_button = QAction(QIcon('icons/close.png'),'stop',self)
    reload_button = QAction(QIcon('icons/shuaxin.png'),'reload',self)

    # 繫結事件
    back_button.triggered.connect(self.webview.back)
    next_button.triggered.connect(self.webview.forward)
    stop_button.triggered.connect(self.webview.stop)
    reload_button.triggered.connect(self.webview.reload)

    # 將按鈕新增到導航欄上
    navigation_bar.addAction(back_button)
    navigation_bar.addAction(next_button)
    navigation_bar.addAction(stop_button)
    navigation_bar.addAction(reload_button)

    # 新增URL位址列
    self.urlbar = QLineEdit()
    # 讓位址列能響應回車按鍵訊號
    self.urlbar.returnPressed.connect(self.navigate_to_url)

    navigation_bar.addSeparator()
    navigation_bar.addWidget(self.urlbar)

    # 讓瀏覽器相應url地址的變化
    self.webview.urlChanged.connect(self.renew_urlbar)

  # 顯示地址
  def navigate_to_url(self):
    q = QUrl(self.urlbar.text())
    if q.scheme() == '':
      q.setScheme('http')
    self.webview.setUrl(q)

  # 響應輸入的地址
  def renew_urlbar(self,q):
    # 將當前網頁的連結更新到位址列
    self.urlbar.setText(q.toString())
    self.urlbar.setCursorPosition(0)

  # 建立tab頁面
  def create_tab(self,webview):
    self.tab = QWidget()
    self.tabWidget.addTab(self.tab,"新建頁面")
    self.tabWidget.setCurrentWidget(self.tab)

    # 渲染到頁面
    self.Layout = QHBoxLayout(self.tab)
    self.Layout.setContentsMargins(0,0)
    self.Layout.addWidget(webview)

  # 關閉tab頁面
  def close_Tab(self,index):
    if self.tabWidget.count() > 1:
      self.tabWidget.removeTab(index)
    else:
      self.close() # 當只有1個tab時，關閉主視窗


# 建立瀏覽器，重寫重寫createwindow方法實現頁面連線的點選跳轉
class WebEngineView(QWebEngineView):

  def __init__(self,QWebEnginePage_WebWindowType):
    new_webview = WebEngineView(self.mainwindow)
    self.mainwindow.create_tab(new_webview)
    return new_webview


# 程式入口
if __name__ == "__main__":
  app = QApplication(sys.argv)
  # 建立主視窗
  browser = MainWindow()
  browser.show()
  # 執行應用，並監聽事件
  sys.exit(app.exec_())

結果

可以去點選地址去嘗試

Python使用Pyqt5實現簡易瀏覽器(最新版本測試過)