等同于 WebView2 中的 WebBrowser.InvokeScript(String, Object[])

Question

提前致谢。

在我的 WPF 应用程序中，我能够使用 WebBrowser 的 InvokeScript(String, Object[]) 方法成功地将消息从 WPF 传送到 JavaScript。我在 Object[] 参数中传递我的消息，JS 代码很好地接收了它。（见下方代码）

我怎样才能在 WebView2 中实现相同的功能，有什么方法可以像在 WebBrowser 控件中那样将参数传递给 JS 代码吗？

Window.xaml

 <Grid>
            <DockPanel> 
                <StackPanel>        
                <TextBox x:Name="txtMessageFromWPF" Width="150" FontSize="20"></TextBox>
                <Button x:Name="btnCallDocument" Click="btnCallDocument_Click" Content="CallDocument" />
                </StackPanel>
                <WebBrowser x:Name="webBrowser" DockPanel.Dock="Top" Margin="30"/>           
            </DockPanel>
        </Grid>

Window.xaml.cs

        private void btnCallDocument_Click(object sender, RoutedEventArgs e)
        {
            webBrowser.InvokeScript("WriteMessageFromWPF", new object[] { this.txtMessageFromWPF.Text });
        }

JS代码：

 <script type="text/javascript">
            function getAlert()
            {
                alert("Hi the page is loaded!!!");
            }
            window.onload = getAlert;
            
            function WriteMessageFromWPF(message){
                document.write("Message from WPF: " + message);
            }
        </script>

Answer 1

WebView2 中目前没有 InvokeScript 的直接等效项。最接近的是 CoreWebView2.ExecuteScriptAsync。此方法将脚本字符串运行和异步 returns 脚本执行的结果作为 JSON 字符串。

如果你想调用一个函数，你需要创建一个脚本字符串来执行此操作并将其提供给 ExecuteScriptAsync。在您的示例中，这意味着生成字符串 WriteMessageFromWPF("...") 并将其提供给 ExecuteScriptAsync.

棘手的部分是正确编码您的函数参数。如果字符串参数中有引号，则您需要对引号进行斜线转义，否则会生成不正确的脚本。您应该能够使用 String.Replace:

斜线转义您的引号

string script = "WriteMessageFromWPF(\"" + 
    this.txtMessageFromWPF.Text.Replace("\"", "\\"")
    + "\")";
await webview2.CoreWebView2.ExecuteScriptAsync(script);

Answer 2

更新：扩展的第 2 版更加简单和通用。它使用 JSON 作为 'middle-station'- 使用 NewtonSoft 或内置的 JSON 转换器。

这是我制作的扩展（只需创建一个class文件并粘贴）。

ExecuteScriptFunctionAsync 构建 ExecuteScriptAsync 所需的字符串，然后执行它：

//using Microsoft.Web.WebView2.WinForms; //Uncomment the one you use
//using Microsoft.Web.WebView2.Wpf; //Uncomment the one you use
using Newtonsoft.Json;
using System.Threading.Tasks;

public static class Extensions
{
    public static async Task<string> ExecuteScriptFunctionAsync(this WebView2 webView2, string functionName, params object[] parameters)
    {
        string script = functionName + "(";
        for (int i = 0; i < parameters.Length; i++)
        {
            script += JsonConvert.SerializeObject(parameters[i]);
            if (i < parameters.Length - 1)
            {
                script += ", ";
            }
        }
        script += ");";
        return await webView2.ExecuteScriptAsync(script);
    }
}

将 javascript 函数名称作为第一个参数传递，然后是函数参数。

该代码使得可以将任意数量的所有类型的参数序列化为 JSON：object、array、string、all numbers、boolean 等

使用示例（来自问题）：

private async void btnCallDocument_Click(object sender, RoutedEventArgs e)
{
    await webBrowser.ExecuteScriptFunctionAsync("WriteMessageFromWPF", this.txtMessageFromWPF.Text);
}

另一个示例（这会将 window 滚动到底部）：

await webView21.ExecuteScriptFunctionAsync("window.scrollTo", 0, 10000);

等同于 WebView2 中的 WebBrowser.InvokeScript(String, Object[])

Equivalent of WebBrowser.InvokeScript(String, Object[]) in WebView2

.net

webbrowser-control

webview

webview2