Question

我在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（）调用是否可能？欢迎任何帮助。

Answer 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();" });
}

Answer 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

uwp Webview中的呼叫列表框更改InvokeScriptAsync

2 个答案: