在UWP中怎么通过WebView控件进行C#与JS的交互
1个回答
展开全部
本文收集于网络，只用于方便查找方案，感谢源作者，如果侵权请联系删除
在UWP中如何通过WebView控件进行C#与JS的交互
最近由于项目需求，需要利用C#在UWP中与JS进行交互，由于还没有什么实战经验，所有就现在网上百度了一下，但是百度的结果显示大部分都是在Android和IOS上面的方法，UWP中的几乎没有。还好微软又他强大的MSDN社区，所有就在那里面找到了一个解题思路，于是就分享给大家。
1、首先，我们既然要与JS进行交互，那必须先有一个HTML页面才可以。我这里以一个本地的HTML页面作为一个HTML页面（别忘了里面要有JS部分哦( ╯□╰ ) ，并添加到当前的UWP工程中），示例代码如下所示：
1 <!DOCTYPE html>
2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="utf-8" />
5 <title>Matt's Webview Content Page</title>
6 <script lang="en-us" type="text/javascript">
7 function TimeUpdate() {
8 var TimeTextbox = document.getElementById("TheTime");
9 TimeTextbox.value = new Date().toTimeString();
10 }
11 </script>
12 </head>
13 <body>
14 <h2>Matt's Webview Content Page</h2>
15 <h5>The current time is: <input type="text" id="TheTime" /> </h5>
16 <button onclick="TimeUpdate()">Update the time!</button>
17 </body>
18 </html>
上面这串HTML页面的功能很简单，就是直接获取当前时间并显示出来；
2、接下来，我们需要在在当前工程中进行前台的布局，布局很简单，这里就直接列出示例代码：
1 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
2 <StackPanel>
3 <WebView x:Name="MyWebview" Width="500" Height="500" Source="ms-appx-web:///HTMLPage1.html"/>
4 <Button x:Name="MyButton" Margin="10" Content="Invoke the TimeUpdate Javascript function from C# using this button" Click="MyButton_Click_1" HorizontalAlignment="Center"/>
5 </StackPanel>
WebView控件用于显示本地的一个HTML页面，Button控件用于与HTML中的JS进行交互（其实让这个按钮也可以触发HTML中获取当前时间并显示的JS事件）
3、添加Button对应的事件，添加后台代码：
1 private async void MyButton_Click_1(object sender, RoutedEventArgs e)
2 {
3 await MyWebview.InvokeScriptAsync("TimeUpdate", null); //第一个参数是要触发的JS函数，第二个参数是要传递给该函数的参数
4 }
通过上面的三个步骤，我们就可以利用这个Button按钮获取当前时间并显示在WebView中。
在UWP中如何通过WebView控件进行C#与JS的交互
最近由于项目需求，需要利用C#在UWP中与JS进行交互，由于还没有什么实战经验，所有就现在网上百度了一下，但是百度的结果显示大部分都是在Android和IOS上面的方法，UWP中的几乎没有。还好微软又他强大的MSDN社区，所有就在那里面找到了一个解题思路，于是就分享给大家。
1、首先，我们既然要与JS进行交互，那必须先有一个HTML页面才可以。我这里以一个本地的HTML页面作为一个HTML页面（别忘了里面要有JS部分哦( ╯□╰ ) ，并添加到当前的UWP工程中），示例代码如下所示：
1 <!DOCTYPE html>
2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="utf-8" />
5 <title>Matt's Webview Content Page</title>
6 <script lang="en-us" type="text/javascript">
7 function TimeUpdate() {
8 var TimeTextbox = document.getElementById("TheTime");
9 TimeTextbox.value = new Date().toTimeString();
10 }
11 </script>
12 </head>
13 <body>
14 <h2>Matt's Webview Content Page</h2>
15 <h5>The current time is: <input type="text" id="TheTime" /> </h5>
16 <button onclick="TimeUpdate()">Update the time!</button>
17 </body>
18 </html>
上面这串HTML页面的功能很简单，就是直接获取当前时间并显示出来；
2、接下来，我们需要在在当前工程中进行前台的布局，布局很简单，这里就直接列出示例代码：
1 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
2 <StackPanel>
3 <WebView x:Name="MyWebview" Width="500" Height="500" Source="ms-appx-web:///HTMLPage1.html"/>
4 <Button x:Name="MyButton" Margin="10" Content="Invoke the TimeUpdate Javascript function from C# using this button" Click="MyButton_Click_1" HorizontalAlignment="Center"/>
5 </StackPanel>
WebView控件用于显示本地的一个HTML页面，Button控件用于与HTML中的JS进行交互（其实让这个按钮也可以触发HTML中获取当前时间并显示的JS事件）
3、添加Button对应的事件，添加后台代码：
1 private async void MyButton_Click_1(object sender, RoutedEventArgs e)
2 {
3 await MyWebview.InvokeScriptAsync("TimeUpdate", null); //第一个参数是要触发的JS函数，第二个参数是要传递给该函数的参数
4 }
通过上面的三个步骤，我们就可以利用这个Button按钮获取当前时间并显示在WebView中。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
