QML WebEngineView 和 DOM 元素更新

Posted 2023-02-16

【中文标题】QML WebEngineView 和 DOM 元素更新

【英文标题】：QML WebEngineView and DOM elements update

【发布时间】：2018-09-25 12:42:05

【问题描述】：

我正在尝试使用 javascript 使用更新的输入凭据打开 Netflix 网址。输入似乎在 html 表单中更新，但是当我触发登录按钮时，输入字段为空。任何意见都非常感谢

WebEngineView 
    id: webEngineView
    focus: true                
    url: "https://www.netflix.com/de-en/login"

    onLoadProgressChanged: 
        if(loadProgress === 100)
            webEngineView.runJavaScript("var input1 = document.getElementsByName('email');
                                                      input1[0].value =\"[e-mail]\";",
                                        function(result)  console.error("Email updated"); );
            webEngineView.runJavaScript("var input2 = document.getElementsByName('password');
                                                      input2[0].value =\"*******\";",
                                        function(result)  console.error("Password updated"); );
        
    

【问题讨论】：

在 JS 代码中的命令之后你不会错过; 吗？

我已经更新了代码。编译器并没有抱怨它。问题仍未解决。

【参考方案1】：

您可能使用了错误的元素名称。 查看document.getElementsByName返回的值：

webEngineView.runJavaScript("document.getElementsByName('element-name')", function(element)
                console.log(element);
);

我建议您使用元素 ID 而不是名称。 （分别是document.getElementById()）。您可以使用开发者工具（Chrome 中的 F12）找到元素 ID。

正确的元素是id_userLoginId，但它仍然不起作用。 我想问题出在Netflix页面上。也许一些风格或什么... 有趣的是，代码在 Chrome 控制台中运行良好。 以下是适用于 Google 的代码：

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtWebEngine 1.7

ApplicationWindow 
    visible: true
    width: 640
    height: 480
    title: qsTr("WebEngine Test")

    WebEngineView 
        id: webEngineView
        focus: true
        anchors.fill: parent
        url: "https://www.google.com"
        onLoadingChanged: 
            if(loadRequest.status === WebEngineLoadRequest.LoadSucceededStatus)
            
                webEngineView.runJavaScript("searchbox = document.getElementById(\"lst-ib\"); searchbox.value=\"Who Framed Roger Rabbit\";");
            
        
    

另一种运行自定义脚本的方式：

WebEngineView 
    id: webEngineView
    focus: true
    anchors.fill: parent
    url: "https://www.google.com"
    userScripts: WebEngineScript 
        injectionPoint: WebEngineScript.DocumentReady
        sourceCode: "box = document.getElementById('lst-ib'); box.value = 'xxx';"
    

不幸的是，这也不适用于 Netflix。

【讨论】：

感谢您提供的替代方法。我注意到与谷歌搜索页面相同，通过脚本输入很遗憾，但在 Netflix 和 Skype 网络上却没有。如果您在此处遇到此善意更新的任何解决方案，同样会有所帮助