Qt 5.7 - QWebEngineView - 将 HTML 按钮单击事件连接到 C++/Qt 插槽答案

【问题标题】：Qt 5.7 - QWebEngineView - Connect HTML button click event to C++/Qt SlotQt 5.7 - QWebEngineView - 将 HTML 按钮单击事件连接到 C++/Qt 插槽
【发布时间】：2016-11-26 18:32:39
【问题描述】：

我正在使用 Qt 5.7 QWebEngineView。

如何将 HTML 按钮点击事件连接到 C++/PyQt5 端的 Q_SLOT？

我找不到一个明确的例子。

【问题讨论】：

标签： qt pyqt5

【解决方案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，并在回调中处理了单击事件绑定，如您所见。

<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>

参考资料：

【讨论】：