在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中。

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

目录
相关文章
|
3月前
|
SQL 开发框架 .NET
C#一分钟浅谈:数据绑定与数据源控件
在Web开发中,数据绑定和数据源控件是实现动态网页的关键技术。本文从基础概念入手,详细讲解数据绑定的原理及其在ASP.NET中的应用,并介绍常见数据绑定方式:手动绑定和自动绑定。接着,文章重点介绍了ASP.NET中的数据源控件,如`SqlDataSource`、`ObjectDataSource`、`XmlDataSource`和`LinqDataSource`,并通过具体示例演示如何使用`SqlDataSource`和`GridView`进行数据绑定。最后,还列举了一些常见问题及其解决办法,帮助读者更好地理解和应用这些技术。
93 4
|
30天前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
277 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
5月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
67 5
|
5月前
|
C#
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
76 5
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
67 4
|
2月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
85 4
|
3月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
48 1
【JavaScript】网页交互的灵魂舞者
|
2月前
|
C# Python
使用wxpython开发跨平台桌面应用,对wxpython控件实现类似C#扩展函数处理的探究
【10月更文挑战第30天】使用 `wxPython` 开发跨平台桌面应用时,可以通过创建辅助类来模拟 C# 扩展函数的功能。具体步骤包括:1. 创建辅助类 `WxWidgetHelpers`;2. 在该类中定义静态方法,如 `set_button_color`;3. 在应用中调用这些方法。这种方法提高了代码的可读性和可维护性,无需修改 `wxPython` 库即可为控件添加自定义功能。但需要注意显式调用方法和避免命名冲突。
|
4月前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
45 2

热门文章

最新文章