PyQt5浏览器控件QWebEngineView详细使用方法
本文详细介绍PyQt5中QWebEngineView控件的使用方法。QWebEngineView基于Chromium内核，取代了旧版QWebView。文章涵盖通过load()加载外部或本地网页、使用setHtml()嵌入HTML代码（注意2M限制），以及利用QWebEnginePage.runJavaScript()实现Python与JavaScript的双向通信和异步回调，提供完整代码示例与分析。
PyQt5浏览器控件QWebEngineView
在PyQt5中，使用QWebEngineView控件来展示HTML页面。由于老版本的QWebView类已不再进行维护，QWebEngineView采用CHromium内核，能够为用户提供更佳的浏览体验。
QWebEngineView类中常用方法
| 方法 | 描述 |
|---|---|
| load(QUrl url) | 加载指定的URL并显示 |
| setHtml（QString&html） | 将网页视图的内容设置为指定的HTML内容 |
QWebEngineView控件通过load()函数加载Web页面，其本质是使用HTTP Get方法获取并显示网页。该控件既支持加载本地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,30,1355,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的使用方法请查看下面的相关链接
本站声明
本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。
