Question

I am using Qt 5.7 QWebEngineView.

How to connect HTML button click event to a Q_SLOT on C++/PyQt5 side?

I can't find a clear example on this.

Answer 1

我创建了一个桥QObject，我在实现这个类时遇到的错误是，我忘了添加@QtCore.pyqtSlot装饰器，这很重要。

class Bridge(QtCore.QObject):
    @QtCore.pyqtSlot()
    def some_slot():
        print("Slot Invoked")

在这里，我创建了QWebEngineView和QWebChannel，并将QWebEnginePage的网络频道设置为该频道，反之亦然。

然后我创建了我的Bridge QObject self.helper_bridge，我最初没有使用self并且只使用了helper_bridge，当然这让我的应用程序崩溃

class MainWidget(object):
    def __init__(self):
        ...
        self.webView = QtWebEngineWidgets.QWebEngineView(parent)

        channel = QtWebChannel.QWebChannel(self.webView.page())
        self.webView.page().setWebChannel(channel)

        self.helper_bridge = Bridge()
        channel.registerObject("helperBridge", self.helper_bridge)

        url = QtCore.QUrl("file:///path/to/index.html")
        self.webView().page().load(url)
        ...

最后，index.html页面

注意Qt提供的第二个脚本。

在这里，我创建了QWebChannel的实例，给定了我的传输：qt.webChannelTransport，并且在回调中我处理了click事件绑定，如您所见。

<html>                                                                          
    <head>                                                                        
    </head>                                                                       
    <body>                                                                        
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'</script>
        <script src='qrc:///qtwebchannel/qwebchannel.js'></script>
      <h1>hello</h1>                                         
      <ul>                                                   
          <li>list item 1</li>                                                      
          <li>list item 2</li>                                                      
      </ul>                                                                       
      <a href='#go'>GO</a>                                                      
      <script>                                                                    
        $(document).ready(function(){
            new QWebChannel(qt.webChannelTransport, function(channel){            
                $('h1').on('click', function({
                    channel.objects.helperBridge.some_slot()
                });
            });
        });                                                                       
      </script>
  </body>

参考文献：

Qt 5.7 - QWebEngineView - Connect HTML button click event to C++/Qt Slot

1 个答案: