How to detect button click inside Qwebengine in pyside2

Question

I wrote an app in pyside2, which opening a webpage in QWebEngine.

That web page has 2 buttons, I am not understanding how can I detect a button click in pyside2 app module, I need to perform other operation on that button click.

Example

below is my code

from PySide2.QtWidgets import QApplication
from PySide2.QtWebEngineWidgets import QWebEngineView, QWebEnginePage
from PySide2.QtCore import QUrl

class WebEnginePage(QWebEnginePage):
    def __init__(self, *args, **kwargs):
        QWebEnginePage.__init__(self, *args, **kwargs)
        self.featurePermissionRequested.connect(self.onFeaturePermissionRequested)

    def onFeaturePermissionRequested(self, url, feature):
        if feature in (QWebEnginePage.MediaAudioCapture, 
            QWebEnginePage.MediaVideoCapture, 
            QWebEnginePage.MediaAudioVideoCapture):
            self.setFeaturePermission(url, feature, QWebEnginePage.PermissionGrantedByUser)
        else:
            self.setFeaturePermission(url, feature, QWebEnginePage.PermissionDeniedByUser)

app = QApplication([])

view = QWebEngineView()
page = WebEnginePage()
page.profile().clearHttpCache()
view.setPage(page)
view.load(QUrl("https://test.webrtc.org/"))

view.show()
app.exec_()

below is the output:

Now I just want to close my application when a user clicks "start" button.

user_6622587 · Answer

QWebEnginePage allows you to execute js so you could find the button for example the id, and link it to a callback but this will only allow you to execute it in js, and you want to do it in python, so the solution is to use QWebChannel to export a QObject and call the function that will close the window in the callback. The export of the object must be done after loading the page so the loadFinished signal must be used.

In my example I use a button to indicate if the window has been loaded correctly, so you must press the button if the button is red.

from PySide2 import QtCore, QtWidgets, QtWebEngineWidgets, QtWebChannel


class WebEnginePage(QtWebEngineWidgets.QWebEnginePage):
    def __init__(self, *args, **kwargs):
        super(WebEnginePage, self).__init__(*args, **kwargs)
        self.loadFinished.connect(self.onLoadFinished)

    @QtCore.Slot(bool)
    def onLoadFinished(self, ok):
        print("Finished loading: ", ok)
        if ok:
            self.load_qwebchannel()
            self.run_scripts_on_load()

    def load_qwebchannel(self):
        file = QtCore.QFile(":/qtwebchannel/qwebchannel.js")
        if file.open(QtCore.QIODevice.ReadOnly):
            content = file.readAll()
            file.close()
            self.runJavaScript(content.data().decode())
        if self.webChannel() is None:
            channel = QtWebChannel.QWebChannel(self)
            self.setWebChannel(channel)

    def add_objects(self, objects):
        if self.webChannel() is not None:
            initial_script = ""
            end_script = ""
            self.webChannel().registerObjects(objects)
            for name, obj in objects.items():
                initial_script += "var {helper};".format(helper=name)
                end_script += "{helper} = channel.objects.{helper};".format(helper=name)
            js = initial_script + \
                 "new QWebChannel(qt.webChannelTransport, function (channel) {" + \
                 end_script + \
                 "} );"
            self.runJavaScript(js)

    def run_scripts_on_load(self):
        pass


class WebRTCPageView(WebEnginePage):
    def __init__(self, *args, **kwargs):
        super(WebRTCPageView, self).__init__(*args, **kwargs)
        self.featurePermissionRequested.connect(self.onFeaturePermissionRequested)
        self.load(QtCore.QUrl("https://test.webrtc.org/"))

    @QtCore.Slot(QtCore.QUrl, QtWebEngineWidgets.QWebEnginePage.Feature)
    def onFeaturePermissionRequested(self, url, feature):
        if feature in (QtWebEngineWidgets.QWebEnginePage.MediaAudioCapture,
                       QtWebEngineWidgets.QWebEnginePage.MediaVideoCapture,
                       QtWebEngineWidgets.QWebEnginePage.MediaAudioVideoCapture):
            self.setFeaturePermission(url, feature, QtWebEngineWidgets.QWebEnginePage.PermissionGrantedByUser)
        else:
            self.setFeaturePermission(url, feature, QtWebEngineWidgets.WebEnginePage.PermissionDeniedByUser)

    def run_scripts_on_load(self):
        if self.url() == QtCore.QUrl("https://test.webrtc.org/"):
            self.add_objects({"jshelper": self})
            js = '''
                var button = document.getElementById("startButton");
                button.addEventListener("click", function(){ jshelper.on_clicked() });
            '''
            self.runJavaScript(js)

    @QtCore.Slot()
    def on_clicked(self):
        print("clicked on startButton")
        QtCore.QCoreApplication.quit()


if __name__ == '__main__':
    import sys

    app = QtWidgets.QApplication(sys.argv)

    w = QtWidgets.QWidget()
    lay = QtWidgets.QVBoxLayout(w)

    button = QtWidgets.QToolButton()
    button.setStyleSheet('''
        QToolButton{
            border: 1px; 
            border-color: black; 
            border-style: outset
        }
        QToolButton[success="true"]{
            background-color: red; 
        }
        QToolButton[success="false"]{
            background-color: green; 
        }
    ''')

    def refresh_button(ok):
        button.setProperty("success", ok)
        button.style().unpolish(button)
        button.style().polish(button)

    refresh_button(False)

    view = QtWebEngineWidgets.QWebEngineView()
    page = WebRTCPageView()
    page.profile().clearHttpCache()
    view.setPage(page)

    progressbar = QtWidgets.QProgressBar()
    page.loadProgress.connect(progressbar.setValue)
    page.loadFinished.connect(refresh_button)

    hlay = QtWidgets.QHBoxLayout()
    hlay.addWidget(progressbar)
    hlay.addWidget(button)

    lay.addWidget(view)
    lay.addLayout(hlay)
    w.resize(640, 480)
    w.show()
    sys.exit(app.exec_())

How to detect button click inside Qwebengine in pyside2

1 Answers