PyQt5高级界面控件之QWebEngineView(十三)

快来打我* 2023-05-31 07:43 73阅读 0赞

前言

PyQt5使用QWebEngineView控件来展示HTML页面，对老版本的QWebView类不在进行维护，因为QWebEngineView使用CHromium内核可以给用户带来更好的体验

QWebEngineView类中常用方法


















方法 描述
load(QUrl url) 加载指定的URL并显示
setHtml（QString&html） 将网页视图的内容设置为指定的HTML内容

QWebEngineView控件使用load（）函数加载一个Web页面，实际上就是使用HTTP Get方法加载web页面，这个控件可以加载本地的web页面，也可以加载外部的WEb页面，其核心代码如下

  1. view=QWebEngineView（）
  2. view.load(QUrl('http://www.baidu.com')) view.show()

实例一：加载显示外部的web页面

  1. import sys
  2. from PyQt5.QtCore import *
  3. from PyQt5.QtGui import *
  4. from PyQt5.QtWidgets import *
  5. from PyQt5.QtWebEngineWidgets import *
  7. class MainWindow(QMainWindow):
  8.     def __init__(self):
  9.         super(MainWindow, self).__init__()
  10.         self.setWindowTitle('加载外部网页的例子')
  11.         self.setGeometry(5,30,1355,730)
  12.         self.browser=QWebEngineView()
  13.         #加载外部的web界面
  14.         self.browser.load(QUrl('https://blog.csdn.net/jia666666'))
  15.         self.setCentralWidget(self.browser)
  16. if __name__ == '__main__':
  17.     app=QApplication(sys.argv)
  18.     win=MainWindow()
  19.     win.show()
  20.     app.exit(app.exec_())

运行效果图如下
这里写图片描述
在这里，我输入的url是我的博客地址，所以加载的也就是这个网址请求的web界面

实例二：加载并显示嵌入的HTML代码

  1. import sys
  2. from PyQt5.QtCore import *
  3. from PyQt5.QtGui import *
  4. from PyQt5.QtWidgets import *
  5. from PyQt5.QtWebEngineWidgets import *
  7. class MainWindow(QMainWindow):
  8.     def __init__(self):
  9.         super(MainWindow, self).__init__()
  10.         self.setWindowTitle('加载本地网页的例子')
  11.         self.setGeometry(5,30,1355,730)
  12.         self.browser=QWebEngineView()
  13.         # #加载外部的web界面
  14.         # url=r'index.html'
  15.         # self.browser.load(QUrl(url))
  17.         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>''')
  18.         self.setCentralWidget(self.browser)
  19. if __name__ == '__main__':
  20.     app=QApplication(sys.argv)
  21.     win=MainWindow()
  22.     win.show()
  23.     app.exit(app.exec_())

运行图片如下
这里写图片描述
注意使用QWebEngineView对象的setHTML（）函数渲染HTml页面时，如果页面中使用的JavaScript代码超过2M，程序渲染就会失败

实例三：PyQt调用JavaScript代码

通过QWebEnginePage类的runJavaScript（str,Callable）函数可以方便地实现PyQt和HTML、JavaScript的双向通信，也实现了python代码和Html，JavaScript代码的解耦，便于开发人员进行分工协作，在PyQt对象中，访问JavaScript的核心代码如下

  1. QWebEnginePage.runJavaScript(str,Callable)

完整代码

  1. import sys
  3. from PyQt5.QtWebEngineWidgets import QWebEngineView
  4. from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton
  6. # 创建一个 application实例
  7. app = QApplication(sys.argv)
  8. win = QWidget()
  9. win.setWindowTitle('Web页面中的JavaScript与 QWebEngineView交互例子')
  11. # 创建一个垂直布局器
  12. layout = QVBoxLayout()
  13. win.setLayout(layout)
  15. # 创建一个 QWebEngineView 对象
  16. view = QWebEngineView()
  17. 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> ''')
  19. # 创建一个按钮去调用 JavaScript代码
  20. button = QPushButton('设置全名')
  23. def js_callback( result ):
  24.     print(result)
  27. def complete_name():
  28.     view.page().runJavaScript('completeAndReturnName();', js_callback)
  31. # 按钮连接 'complete_name'槽，当点击按钮是会触发信号
  32. button.clicked.connect(complete_name)
  34. # 把QWebView和button加载到layout布局中
  35. layout.addWidget(view)
  36. layout.addWidget(button)
  38. # 显示窗口和运行app
  39. win.show()
  40. sys.exit(app.exec_())

这里写图片描述

代码分析

在本例中，初始化一个QWebEngineView对象，对象名称View，然后通过View。page（）函数获得一个QWebEnginePage对象，就可以访问整个web界面了。这个QWebEnginePage对象有一个异步的runJavaScript（）函数，需要一个回调函数接收结果，其核心代码如下

  1. def js_callback( result ):
  2.     print(result)
  5. def complete_name():
  6.     view.page().runJavaScript('completeAndReturnName();', js_callback)

  • QWebEngineView

    • 前言
    • QWebEngineView类中常用方法
    • 实例一：加载显示外部的web页面
    • 实例二：加载并显示嵌入的HTML代码

    • 实例三：PyQt调用JavaScript代码

      • 代码分析

        • 相关文件及下载地址

相关文件及下载地址

https://download.csdn.net/download/jia666666/10609488

发表评论

表情：
评论列表 （有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读