使用 QWebChannel 将 qml 对象暴露给网站/Javascript答案

【问题标题】：Exposing qml Object to Website/Javascript using QWebChannel使用 QWebChannel 将 qml 对象暴露给网站/Javascript
【发布时间】：2017-06-30 15:05:03
【问题描述】：

我想在 html 输入字段在显示 QWebEngineView 中获得焦点后立即在触摸屏上显示自定义输入设备。因此，我尝试通过QWebChannel 将输入设备对象公开给客户端Javascipt，然后只要输入字段获得焦点，它就可以调用输入设备的显示方法。

但是，目前我遇到以下两个错误之一：

Uncaught TypeError: Cannot read property 'send' of undefined at line 60

Uncaught ReferenceError: QWebChannel is not defined at line 2

此外，我不确定何时使用 navigator.qtWebChannelTransport 而不是 qt.webChannelTransport 作为 QWebChannel 的参数。

Window.qml

ApplicationWindow {

    WebView {
        id: webView
        anchors.fill: parent

        // Register keyboard as web channel object.
        webChannel.registeredObjects: [myObject]
    }

    MyObject {
        id: myObject
        WebChannel.id: "myWebObject"
    }
}

WebView.qml

WebEngineView {

    // Load web channel and input method handling scripts.
    userScripts: [
        WebEngineScript {
            injectionPoint: WebEngineScript.DocumentCreation
            name: "QWebChannel"
            sourceUrl: "qrc:///qtwebchannel/qwebchannel.js"
        },

        WebEngineScript {
            injectionPoint: WebEngineScript.DocumentReady
            name: "MyObjectInjector"
            sourceUrl: "qrc:/myscript.js"
        }
    ]
}

myscript.js

window.channel = new QWebChannel(navigator.qtWebChannelTransport, function(channel) {
    var inputs = window.document.getElementsByTagName('INPUT');

    var index;
    for(index=0; index < inputs.length; index++) {
        inputs[index].onfocus = function() {
            console.log("Input focused");
        };
    }
});

【问题讨论】：

标签： javascript qt qml

【解决方案1】：

Uncaught ReferenceError: QWebChannel is not defined at line 2

我猜 QWebChannel 没有暴露给 myscript.js。在 WebEngineScript 中尝试 worldId: WebEngineScript.MainWorld。

    WebEngineScript {
        injectionPoint: WebEngineScript.DocumentCreation
        worldId: WebEngineScript.MainWorld
        name: "QWebChannel"
        sourceUrl: "qrc:///qtwebchannel/qwebchannel.js"
    },

此外，我不确定何时使用 navigator.qtWebChannelTransport 而不是 qt.webChannelTransport 作为 QWebChannel 的参数。

qt.webChannelTransport 似乎是正确的。见https://bugreports.qt.io/browse/QTBUG-52090。

【讨论】：