使用QWebChannel将qml对象公开给Website / Javascript [英] Exposing qml Object to Website/Javascript using QWebChannel

问题描述

一旦html输入字段集中在显示 QWebEngineView 。因此，我尝试通过 QWebChannel 向客户端公开输入设备对象一边Javascipt，它可以在输入字段聚焦后立即调用输入设备的show方法。

I would like to display a custom input device on a touchscreen as soon as a html input field gets focused within the displaying QWebEngineView. Therefore I tried to expose the input device object via QWebChannel to the client side Javascipt, which could then invoke the show method of the input device as soon as an input field gets focused.

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

However, currently I get one of the following two errors:

未捕获的TypeError：无法在第60行读取未定义的属性'send'

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

未捕获的ReferenceError：QWebChannel未在第2行定义

Uncaught ReferenceError: QWebChannel is not defined at line 2

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

Furthermore I am not sure when to use navigator.qtWebChannelTransport instead of qt.webChannelTransport as parameter for 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");
        };
    }
});

推荐答案

未捕获的ReferenceError：QWebChannel未在第2行定义

Uncaught ReferenceError: QWebChannel is not defined at line 2

我猜QWebChannel未暴露给myscript.js。在WebEngineScript中尝试 worldId：WebEngineScript.MainWorld 。

I guess QWebChannel is not exposed to myscript.js. Try worldId: WebEngineScript.MainWorld in WebEngineScript.

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

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

Furthermore I am not sure when to use navigator.qtWebChannelTransport instead of qt.webChannelTransport as parameter for QWebChannel.

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

qt.webChannelTransport seems to be correct. See https://bugreports.qt.io/browse/QTBUG-52090.

这篇关于使用QWebChannel将qml对象公开给Website / Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！