自制簡易瀏覽器(Python)

代碼見 https://github.com/skyerhxx/MyBrowser

 

基於PyQt的自制簡易瀏覽器

       底層實現還是藉助PyQt5的QtWebEngine模塊😔

 

開發環境

PyQt 5.12.3

Python 3.7

 

主要思路

主要實現的功能：

（1）可以正常顯示網頁；

（2）設置導航欄，用以實現瀏覽器的前進、後退、停止加載和刷新功能；

（3）設置地址欄，可以實時更新當前網頁的URL，同時支持輸入地址回車訪問功能；

（4）設置標籤頁，可通過雙擊導航欄打開新的標籤頁，從而支持同時訪問多個頁面。

底層傳輸協議等功能的實現方式：

藉助PyQt5的QtWebEngine模塊。

 

QWebEngineView

      PyQt5使用QWebEngineView控件來展示HTML頁面，對老版本的QWebView類不在進行維護，因爲QWebEngineView使用CHromium內核可以給用戶帶來更好的體驗

 

 

MyBrowser.py

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


class WebView(QWebEngineView):
	def __init__(self, parent):
		super().__init__(parent)
	def createWindow(self, webWindowType):
		return main_demo.browser


class MainDemo(QMainWindow):
	def __init__(self, *args, **kwargs):
		super().__init__(*args, **kwargs)
		self.setWindowTitle('My_Browser')
		self.setWindowIcon(QIcon('icons/penguin.png'))
		self.resize(800, 500)
		self.show()
		# 添加URL地址欄
		self.urlbar = QLineEdit()
		# 讓地址欄支持輸入地址回車訪問
		self.urlbar.returnPressed.connect(self.navigate_to_url)
		# 添加標籤欄
		self.tabs = QTabWidget()
		self.tabs.setDocumentMode(True)
		self.tabs.tabBarDoubleClicked.connect(self.tab_open)
		self.tabs.currentChanged.connect(self.current_tab_changed)
		# 允許關閉標籤
		self.tabs.setTabsClosable(True)
		# 設置關閉按鈕的槽
		self.tabs.tabCloseRequested.connect(self.close_current_tab)
		self.add_new_tab(QUrl('https://www.baidu.com/'), 'Homepage')
		self.setCentralWidget(self.tabs)
		new_tab_action = QAction(QIcon('icons/add_page.png'), 'New Page', self)
		new_tab_action.triggered.connect(self.add_new_tab)
		# 添加導航欄
		navigation_bar = QToolBar('Navigation')
		# 設定圖標大小
		navigation_bar.setIconSize(QSize(16, 16))
		self.addToolBar(navigation_bar)
		# 添加前進、後退、停止加載和刷新的按鈕
		back_button = QAction(QIcon('icons/back.png'), 'Back', self)
		forward_button = QAction(QIcon('icons/forward.png'), 'Forward', self)
		stop_button = QAction(QIcon('icons/stop.png'), 'Stop', self)
		reload_button = QAction(QIcon('icons/renew.png'), 'Reload', self)
		back_button.triggered.connect(self.tabs.currentWidget().back)
		forward_button.triggered.connect(self.tabs.currentWidget().forward)
		stop_button.triggered.connect(self.tabs.currentWidget().stop)
		reload_button.triggered.connect(self.tabs.currentWidget().reload)
		# 將按鈕添加到導航欄上
		navigation_bar.addAction(back_button)
		navigation_bar.addAction(forward_button)
		navigation_bar.addAction(stop_button)
		navigation_bar.addAction(reload_button)
		navigation_bar.addSeparator()
		navigation_bar.addWidget(self.urlbar)

	
	# 響應回車按鈕，將瀏覽器當前訪問的URL設置爲用戶輸入的URL
	def navigate_to_url(self):
		current_url = QUrl(self.urlbar.text())
		if current_url.scheme() == '':
			current_url.setScheme('http')
		self.tabs.currentWidget().load(current_url)


	# 將當前網頁的鏈接更新到地址欄
	def renew_urlbar(self, url, browser=None):
		# 非當前窗口不更新URL
		if browser != self.tabs.currentWidget():
			return
		self.urlbar.setText(url.toString())
		self.urlbar.setCursorPosition(0)


	# 添加新的標籤頁
	def add_new_tab(self, qurl=QUrl(''), label='Blank'):
		# 設置瀏覽器
		self.browser = WebView(self)
		self.browser.load(qurl)
		# 爲標籤添加索引方便管理
		i = self.tabs.addTab(self.browser, label)
		self.tabs.setCurrentIndex(i)
		self.browser.urlChanged.connect(lambda qurl, browser=self.browser: self.renew_urlbar(qurl, self.browser))
		# 將標籤標題改爲網頁相關的標題
		self.browser.loadFinished.connect(lambda _, i=i, browser=self.browser: self.tabs.setTabText(i, self.browser.page().title()))
	
	
	# 雙擊標籤欄打開新頁面
	def tab_open(self, i):
		if i == -1:
			self.add_new_tab()
	def current_tab_changed(self, i):
		qurl = self.tabs.currentWidget().url()
		self.renew_urlbar(qurl, self.tabs.currentWidget())
	def close_current_tab(self, i):
		# 若當前標籤頁只有一個則不關閉
		if self.tabs.count() < 2:
			return
		self.tabs.removeTab(i)



if __name__ == '__main__':
	my_application = QApplication(sys.argv) #創建QApplication類的實例
	main_demo = MainDemo()
	main_demo.show()
	my_application.exec_()

項目結構

 

結果展示

雙擊標籤欄打開新頁面

 

參考

https://mp.weixin.qq.com/s/Amw2tkW4G3UKWldn_6-Y8w