QMLWebEngineView WebChannel未加載腳本

嘗試使用 QML WebEngineView WebChannel (Qt 5.15)，但是在運行 videoTime 腳本時，我得到

js: Uncaught ReferenceError: QWebChannel is not defined

這是一個可重現的示例

import QtQuick 2.15
import QtQuick.Window 2.15
import QtWebEngine 1.11
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtWebChannel 1.15

Window {
    id: root
    width: 960
    height: 960
    visible: true
    title: qsTr("webengineexample")

    Shortcut {
        sequence: StandardKey.Quit
        onActivated: {
            Qt.quit()
        }
    }

    property string httpAcceptLanguage: "en-US"

    QtObject{
        id: internals

        property string script_videoTime: "
            setTimeout(function()
            {
                var backend;
                new QWebChannel(qt.webChannelTransport, function (channel) {
                    backend = channel.objects.backend;
                });

                ytplayer = document.getElementById('movie_player');
                backend.videoPosition = ytplayer.getCurrentTime();
                backend.videoDuration = ytplayer.getDuration();
            }, 100);
        "
    }

    QtObject {
        id: timePuller

        // ID, under which this object will be known at WebEngineView side
        WebChannel.id: "backend"

        property real videoPosition: 0
        property real videoDuration: 0

        onVideoDurationChanged: {
            console.log("VideoDuration ", videoDuration)
            console.log("VideoPosition ", videoPosition)
        }
    }

    WebChannel {
        id : web_channel
        registeredObjects: [timePuller]
    }

    WebEngineView {
        id: webEngineView
        anchors.fill: parent

        webChannel: web_channel
        userScripts: [
            WebEngineScript {
                injectionPoint: WebEngineScript.Deferred
                name: "QWebChannel"
                sourceUrl: "qrc:///qtwebchannel/qwebchannel.js"
            }
        ]

        // The following works
        profile {
            httpAcceptLanguage: root.httpAcceptLanguage
            httpCacheType: WebEngineProfile.MemoryHttpCache
            cachePath: "/tmp/webengineexample/customprofile/cache"
            persistentStoragePath: "/tmp/webengineexample/customprofile/data"
            persistentCookiesPolicy: WebEngineProfile.ForcePersistentCookies
            storageName: "customprofile"
        }

        settings {
            autoLoadImages: true
            dnsPrefetchEnabled: false
        }
        url: "https://youtube.com"
//        url: "https://ping.eu"
    }

    Button {
        id: timeDriver
        anchors {
            top: parent.top
            left: parent.left
        }
        text: "getTime"
        onClicked: {
                webEngineView.runJavaScript(internals.script_videoTime)
        }
    }
}

不確定我做錯了什么，但我發現https://forum.qt.io/topic/64638/inject-qwebchannel-into-an-https-page表明它可能不適用于 HTTPS 頁面。不幸的是，我沒有開發人員構建，我沒有看到這樣的錯誤。

更新：我使用開發人員版本對此進行了測驗，但沒有收到與 HTTPS 相關的錯誤。

更新：我也嘗試userScripts用以下內容替換，但我遇到了段錯誤

        userScripts: [
            {
                name: "QWebChannel",
                sourceUrl: Qt.resolvedUrl("qrc:/qtwebchannel/qwebchannel.js"),
                injectionPoint: WebEngineScript.DocumentCreation,
                worldId: WebEngineScript.MainWorld
            }
        ]

uj5u.com熱心網友回復：

經過更多的谷歌搜索和戳，解決方案似乎正在更改上面的代碼

        userScripts: [
            WebEngineScript {
                injectionPoint: WebEngineScript.DocumentCreation
                name: "QWebChannel"
                worldId: WebEngineScript.MainWorld // was supposed to be default..
                sourceUrl: "qrc:/qtwebchannel/qwebchannel.js"
            }
        ]

然后，腳本本身會吐出一個不同的錯誤，需要修改為

        property string script_videoTime: "
            var backend;
            new QWebChannel(qt.webChannelTransport, function (channel) {
                backend = channel.objects.backend;
            });
            setTimeout(function()
            {
                ytplayer = document.getElementById('movie_player');
                backend.videoPosition = ytplayer.getCurrentTime();
                backend.videoDuration = ytplayer.getDuration();
            }, 100);
        "

通過這兩個更改，正確的值將列印在控制臺中。

標籤：qtqmlqt5qtwebengineqtwebchannel

上一篇：如何通過信號和插槽連接從qt6.4中的QButtonGroup獲取單擊的按鈕ID

下一篇：在onClicked-QT(qml)中創建條件按鈕背景顏色