在 uwp webview InvokeScriptAsync 中调用列表框更改答案

【问题标题】：call listbox change in uwp webview InvokeScriptAsync在 uwp webview InvokeScriptAsync 中调用列表框更改
【发布时间】：2019-04-24 08:13:57
【问题描述】：

我在 uwp 中使用 webview 来与网页交互。除列表框外，一切正常。我打电话：

await Webview.InvokeScriptAsync("eval", new string[] { "document.getElementsByClassName('select-box')[0].getElementsByTagName('select')[0].selectedIndex = 1;" });

选择是视觉上的变化，但没有调用网页的变化函数。表示没有效果！所以我尝试触发这个调用并添加（更改监听器在选择框 0 上）

await Webview.InvokeScriptAsync("eval", new string[] { "document.getElementsByClassName('select-box')[0].dispatchEvent(new Event('change', { bubbles: true }));" });
        await Webview.InvokeScriptAsync("eval", new string[] { "document.getElementsByClassName('select-box')[0].getElementsByTagName('select')[0].dispatchEvent(new Event('change', { bubbles: true }));" });
        await Webview.InvokeScriptAsync("eval", new string[] { "document.getElementsByClassName('select-box')[0].change();" });
        await Webview.InvokeScriptAsync("eval", new string[] { "document.getElementsByClassName('select-box')[0].getElementsByTagName('select')[0].change();" });

这 4 行都不起作用。所以我想知道 change() 调用是否可行？欢迎任何帮助。

【问题讨论】：

你说的“网页的改变功能”是什么意思？您能否提供包含 javascript 代码的 HTML 页面？
Change 是一个由外部 js 文件保存的 jquery 事件监听函数（e）。调用 click、keypress、keyup 有效，但不更改事件。列表框位于可以更改的网页上。所以我可以给出一个 url，但是当你看到它时，可能列表框还没有出现。

标签： webview uwp windows-10

【解决方案1】：

当我调用jquery change方法时，会触发网页上的change事件。

我制作了一个简单的代码示例进行测试，它在我这边运行良好。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
$(document).ready(function(){
    $("#select").on('change', function () {
        $("#ptext").text(this.value);
    });
});
    </script>
</head>
<body>
    <select id="select">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

    <p id="ptext">Write something</p>
</body>
</html>

<Grid>
    <WebView x:Name="webview" Source="ms-appx-web:///HTMLPage1.html"></WebView>
    <Button Content="call js" Click="Button_Click"></Button>
</Grid>

private async void Button_Click(object sender, RoutedEventArgs e)
{
    await webview.InvokeScriptAsync("eval", new string[] { "document.getElementById('select').selectedIndex=2;$('#select').change();" });
}

【讨论】：

感谢您的帮助。试试 $('#select').change();就像你的例子一样，没有机会从 HRESULT 向我抛出异常：0x80020101。可能是因为列表没有 ID。

【解决方案2】：

没关系。我重试了许多解决方案，这一次它有效！

await webView1.InvokeScriptAsync("eval", new string[] { "document.getElementsByClassName('select-box')[0].getElementsByTagName('select')[0].selectedIndex=1;" });
        await webView1.InvokeScriptAsync("eval", new string[] { "document.getElementsByClassName('select-box')[0].getElementsByTagName('select')[0].dispatchEvent(new Event('change', { bubbles: true }));" });

上次没有发现我做错了，我很确定我以前测试过这个。再次感谢 Xavier Xie

【讨论】：