In this PyQt5 article we want to learn about Working with Web Content in PyQt5, so we already know that PyQt5 is one of the best Python GUI Frameworks, for working with web contents in PyQt5, we are going to use QtWebEngineWidgets.
What is PyQt5 QtWebEngineWidgets ?
QtWebEngineWidgets is a module in PyQt5 that provides web engine functionality for working with web content in PyQt applications. It is a part of the Qt framework, so Qt is cross platform development framework for building desktop, mobile, and embedded applications using C++ programming language.
QtWebEngineWidgets module allows you to embed web content, such as HTML pages inside your PyQt application user interface. It provides the QWebEngineView class, which acts as a container for displaying web pages. This class enables you to load web pages, interact with web content using JavaScript integration, handle web-related events, and perform various operations on web elements.
Now we need to install our modules, first we need to install PyQt5 and after that we need to install QtWebEngineWidgets, because it is not a built in module in PyQt5.
|
1 2 |
pip install PyQt5 pip install PyQtWebEngine |
This is the complete code for this article
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget from PyQt5.QtWebEngineWidgets import QWebEngineView from PyQt5.QtCore import QUrl class WebContentExample(QMainWindow): def __init__(self): super().__init__() self.setWindowTitle("Web Content Example") self.setGeometry(100, 100, 800, 600) # Create layout and container widget layout = QVBoxLayout() container = QWidget() container.setLayout(layout) self.setCentralWidget(container) # Create web view widget self.webview = QWebEngineView() layout.addWidget(self.webview) # Load web page self.webview.load(QUrl("https://www.geekscoders.com")) # Connect loadFinished signal self.webview.loadFinished.connect(self.on_page_load_finished) def on_page_load_finished(self): print("Page loaded successfully") # Run JavaScript code on the loaded page self.webview.page().runJavaScript('document.getElementById("myElement").innerHTML = "Modified Content";') if __name__ == '__main__': app = QApplication(sys.argv) window = WebContentExample() window.show() sys.exit(app.exec_()) |
Now in the above code we want to just talk about QtWebEngine, first at the top we have imported QtWebEngineView.
|
1 |
from PyQt5.QtWebEngineWidgets import QWebEngineView |
After that we have instantiated QWebEngineView and after that we have added that to the layout that we have already created.
|
1 2 |
self.webview = QWebEngineView() layout.addWidget(self.webview) |
For loading a web page into the QWebEngineView widget, you can use the load() method.
|
1 |
self.webview.load(QUrl("https://www.geekscoders.com")) |
QWebEngineView provides different signals for handling events related to web pages. For example, you can detect when a page finishes loading or when the URL changes, By connecting the loadFinished signal to a custom function, you can execute specific actions when the page finishes loading.
|
1 |
self.webview.loadFinished.connect(self.on_page_load_finished) |
PyQt5 allows you to interact with web content programmatically. You can execute JavaScript code on a loaded web page, retrieve data from web elements and modify web content dynamically. QWebEngineView widget provides a method called page() that gives access to the underlying QWebEnginePage object. With this object, you can interact with the web page using methods like runJavaScript() and findElementById().
|
1 |
self.webview.page().runJavaScript('document.getElementById("myElement").innerHTML = "Modified Content";') |
Run the complete code and this will be the result
