python GUI庫圖形介面開發之PyQt5瀏覽器控制元件QWebEngineView詳細使用方法
阿新 • • 發佈：2020-02-26
PyQt5瀏覽器控制元件QWebEngineView
PyQt5使用QWebEngineView控制元件來展示HTML頁面，對老版本的QWebView類不在進行維護，因為QWebEngineView使用CHromium核心可以給使用者帶來更好的體驗
QWebEngineView類中常用方法
| 方法 | 描述 |
|---|---|
| load(QUrl url) | 載入指定的URL並顯示 |
| setHtml（QString&html） | 將網頁檢視的內容設定為指定的HTML內容 |
QWebEngineView控制元件使用load（）函式載入一個Web頁面，實際上就是使用HTTP Get方法載入web頁面，這個控制元件可以載入本地的web頁面，也可以載入外部的WEb頁面，其核心程式碼如下
view=QWebEngineView（）
view.load(QUrl('https://www.jb51.net'))
view.show()
QWebEngineView載入顯示外部的web頁面例項
import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *
class MainWindow(QMainWindow):
def __init__(self):
super(MainWindow,self).__init__()
self.setWindowTitle('載入外部網頁的例子')
self.setGeometry(5,30,1355,730)
self.browser=QWebEngineView()
#載入外部的web介面
self.browser.load(QUrl('https://www.jb51.net'))
self.setCentralWidget(self.browser)
if __name__ == '__main__':
app=QApplication(sys.argv)
win=MainWindow()
win.show()
app.exit(app.exec_())執行效果圖如下
在這裡，我輸入的url是我的部落格地址，所以載入的也就是這個網址請求的web介面
QWebEngineView載入並顯示嵌入的HTML程式碼
import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *
class MainWindow(QMainWindow):
def __init__(self):
super(MainWindow,self).__init__()
self.setWindowTitle('載入本地網頁的例子')
self.setGeometry(5,730)
self.browser=QWebEngineView()
# #載入外部的web介面
# url=r'index.html'
# self.browser.load(QUrl(url))
self.browser.setHtml('''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello PyQt5</h1>
<h1>Hello PyQt5</h1>
<h1>Hello PyQt5</h1>
<h1>Hello PyQt5</h1>
<h1>Hello PyQt5</h1>
</body>
</html>''')
self.setCentralWidget(self.browser)
if __name__ == '__main__':
app=QApplication(sys.argv)
win=MainWindow()
win.show()
app.exit(app.exec_())執行圖片如下
注意使用QWebEngineView物件的setHTML（）函式渲染HTml頁面時，如果頁面中使用的JavaScript程式碼超過2M，程式渲染就會失敗
QWebEngineView呼叫JavaScript程式碼例項
通過QWebEnginePage類的runJavaScript（str,Callable）函式可以方便地實現PyQt和HTML、JavaScript的雙向通訊，也實現了python程式碼和Html，JavaScript程式碼的解耦，便於開發人員進行分工協作，在PyQt物件中，訪問JavaScript的核心程式碼如下
QWebEnginePage.runJavaScript(str,Callable)
完整程式碼
import sys
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import QApplication,QWidget,QVBoxLayout,QPushButton
# 建立一個 application例項
app = QApplication(sys.argv)
win = QWidget()
win.setWindowTitle('Web頁面中的JavaScript與 QWebEngineView互動例子')
# 建立一個垂直佈局器
layout = QVBoxLayout()
win.setLayout(layout)
# 建立一個 QWebEngineView 物件
view = QWebEngineView()
view.setHtml('''
<html>
<head>
<title>A Demo Page</title>
<script language="javascript">
// Completes the full-name control and
// shows the submit button
function completeAndReturnName() {
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var full = fname + '' + lname;
document.getElementById('fullname').value = full;
document.getElementById('submit-btn').style.display = 'block';
return full;
}
</script>
</head>
<body>
<form>
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"></input>
<br />
<label for="lname">Last name:</label>
<input type="text" name="lname" id="lname"></input>
<br />
<label for="fullname">Full name:</label>
<input disabled type="text" name="fullname" id="fullname"></input>
<br />
<input style="display: none;" type="submit" id="submit-btn"></input>
</form>
</body>
</html>
''')
# 建立一個按鈕去呼叫 JavaScript程式碼
button = QPushButton('設定全名')
def js_callback( result ):
print(result)
def complete_name():
view.page().runJavaScript('completeAndReturnName();',js_callback)
# 按鈕連線 'complete_name'槽，當點選按鈕是會觸發訊號
button.clicked.connect(complete_name)
# 把QWebView和button載入到layout佈局中
layout.addWidget(view)
layout.addWidget(button)
# 顯示視窗和執行app
win.show()
sys.exit(app.exec_())
程式碼分析
在本例中，初始化一個QWebEngineView物件，物件名稱View，然後通過View。page（）函式獲得一個QWebEnginePage物件，就可以訪問整個web介面了。這個QWebEnginePage物件有一個非同步的runJavaScript（）函式，需要一個回撥函式接收結果，其核心程式碼如下
def js_callback( result ):
print(result)
def complete_name():
view.page().runJavaScript('completeAndReturnName();',js_callback)
本文詳細介紹了PyQt5瀏覽器控制元件QWebEngineView的使用方法，包括使用QWebEngineView呼叫JavaScript程式碼，更多關於PyQt5瀏覽器控制元件QWebEngineView的使用方法請檢視下面的相關連結