在UAP中如何通过WebView控件进行C#与JS的交互

简介: 原文:在UAP中如何通过WebView控件进行C#与JS的交互 最近由于项目需求,需要利用C#在UWP中与JS进行交互,由于还没有什么实战经验,所有就现在网上百度了一下,但是百度的结果显示大部分都是在Android和IOS上面的方法,UWP中的几乎没有。
原文: 在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中。

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

目录
相关文章
|
10月前
|
网络协议 网络安全 API
C# 与三菱FX5U PLC通讯交互指南
C# 与三菱FX5U PLC通讯交互指南
3241 121
|
12月前
|
前端开发
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),保存资源(图片、脚本、CSS)
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),保存资源(图片、脚本、CSS)
553 79
|
SQL 开发框架 .NET
C#一分钟浅谈:数据绑定与数据源控件
在Web开发中,数据绑定和数据源控件是实现动态网页的关键技术。本文从基础概念入手,详细讲解数据绑定的原理及其在ASP.NET中的应用,并介绍常见数据绑定方式:手动绑定和自动绑定。接着,文章重点介绍了ASP.NET中的数据源控件,如`SqlDataSource`、`ObjectDataSource`、`XmlDataSource`和`LinqDataSource`,并通过具体示例演示如何使用`SqlDataSource`和`GridView`进行数据绑定。最后,还列举了一些常见问题及其解决办法,帮助读者更好地理解和应用这些技术。
348 4
|
JavaScript Shell C#
多种脚本批量下载 Docker 镜像:Shell、PowerShell、Node.js 和 C#
本项目提供多种脚本(Shell、PowerShell、Node.js 和 C#)用于批量下载 Docker 镜像。配置文件 `docker-images.txt` 列出需要下载的镜像及其标签。各脚本首先检查 Docker 是否安装,接着读取配置文件并逐行处理,跳过空行和注释行,提取镜像名称和标签,调用 `docker pull` 命令下载镜像,并输出下载结果。使用时需创建配置文件并运行相应脚本。C# 版本需安装 .NET 8 runtime。
1197 3
|
C# Python
使用wxpython开发跨平台桌面应用,对wxpython控件实现类似C#扩展函数处理的探究
【10月更文挑战第30天】使用 `wxPython` 开发跨平台桌面应用时,可以通过创建辅助类来模拟 C# 扩展函数的功能。具体步骤包括:1. 创建辅助类 `WxWidgetHelpers`;2. 在该类中定义静态方法,如 `set_button_color`;3. 在应用中调用这些方法。这种方法提高了代码的可读性和可维护性,无需修改 `wxPython` 库即可为控件添加自定义功能。但需要注意显式调用方法和避免命名冲突。
302 1
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
JavaScript 前端开发 Android开发
kotlin开发 webview如何在收到JS调用后,native返回数据给到JS
这段内容描述了在Hybrid App开发中,使用Kotlin的Compose构建的Web视图(WebView)如何通过JsBridge实现JavaScript与原生代码的交互
|
JavaScript 前端开发
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),获取网页加载后的标题
在使用 WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件)时,要获取网页加载后的标题,可以监听 WebView2 的 NavigationCompleted 事件。这个事件被触发时,表示导航已完成,此时执行JavaScript代码可以安全地获取网页的标题。
1096 0
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),获取网页加载后的标题