PyQt5 and loading HTML and interacting with JS

PyQt5 is a powerful Python framework for creating graphical user interface (GUI) applications. It provides a wealth of tools and components that enable developers to easily build cross-platform applications.

In this article, we'll explore how to use PyQt5 to load HTML pages and interact with JavaScript code within them.

Install PyQt5

First, we need to install PyQt5. You can use the pip command to install:

pip install pyqt5

load HTML page

Next, we will use the QWebEngineView class to load the HTML page. Here is a simple example:

from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import QApplication

app = QApplication([])
view = QWebEngineView()
view.load(QUrl('file:///path/to/your/html/file.html'))
view.show()
app.exec_()

In the above example, we created a QApplication instance and instantiated a QWebEngineView object. Then, we loaded a local HTML file using the load() method and displayed the view using the show() method.

Interact with JavaScript

To interact with the JavaScript code in the loaded HTML page, we need to use the QWebChannel class and the page() method of QWebEngineView. Here is an example:

from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtCore import QObject, pyqtSlot, pyqtSignal
from PyQt5.QtWidgets import QApplication

app = QApplication([])

class MyObject(QObject):
    signal = pyqtSignal(str)
    
    @pyqtSlot(str)
    def receiveMessage(self, message):
        print(message)
        self.signal.emit('Received message: ' + message)

view = QWebEngineView()
channel = QWebChannel()
myObj = MyObject()
channel.registerObject('myObj', myObj)
view.page().setWebChannel(channel)
view.load(QUrl('file:///path/to/your/html/file.html'))
view.show()

app.exec_()

In the above example, we created a QObject subclass MyObject and defined a signal signal and a receiveMessage slot function. In the receiveMessage function, we print the received message and send a message back via the signal signal.

Then, we created a QWebChannel instance and registered the MyObject object. Next, we use the setWebChannel() method to associate the QWebChannel object with the QWebEngineView page.

Finally, we loaded the HTML file, and displayed the view.

In the HTML file, we can use JavaScript code to interact with the MyObject object. Here is an example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript与PyQt5交互</title>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script>
        var myObj;
        new QWebChannel(qt.webChannelTransport, function(channel) {
      
      
            myObj = channel.objects.myObj;
        });
        
        function sendMessage() {
      
      
            var message = document.getElementById('message').value;
            myObj.receiveMessage(message);
        }
        
        myObj.signal.connect(function(message) {
      
      
            document.getElementById('output').innerHTML = message;
        });
    </script>
</head>
<body>
    <input type="text" id="message">
    <button onclick="sendMessage()">发送消息</button>
    <div id="output"></div>
</body>
</html>

In the above example, we first introduced the qwebchannel.js file, which is responsible for communicating with PyQt5.

Then, we created a QWebChannel instance and obtained the MyObject object through the channel object.

In the sendMessage function, we get the message in the input box and call the receiveMessage function of the MyObject object.

Finally, we connect the signal signal and display the received message in the output element.

in conclusion

By using PyQt5 to load HTML pages and interact with the JavaScript code in them, we can easily create powerful GUI applications. The above examples provide a basic framework that can be customized and extended as needed. I hope this article can help you further understand the powerful functions of PyQt5. The attachment is qwebchannel.js