• 在UAP中如何通过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中。

    好了,就写到这里,其实这只是一种很简单的交互方式,更高大上的还需要各位博友共同挖掘了!

  • 相关阅读:
    Android Html处理器通用类 HtmlUtil
    Android 文件管理器通用类 FileUtil
    Android 本应用数据清除管理器DataCleanManager
    获取索引--------用range()和len()
    循环结构中-------简单的部分放在上面, 条理会更清晰~~~ != 不等于
    列表 ->join---> 字符串 转类型:x--->y类型 y(x)
    迭代 判断数字 累加器
    print in或者not in, 判断在不在里面
    n=n+1 放在print(s)的上面的影响 (2) n=n=+1在前面,则不满足前面<100条件时候,才跳出while的循环,这时候while循环结束, 到了外面的下一步-->print()
    n=n+1 放在print(s)的前/后的影响
  • 原文地址:https://www.cnblogs.com/hippieZhou/p/4632911.html
Copyright © 2020-2023  润新知