在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天前
|
JavaScript 前端开发
js的交互事件
js的交互事件
15 1
|
3天前
|
SQL 存储 数据库连接
C#编程与数据库交互的实现
【4月更文挑战第20天】C#与数据库交互是现代软件开发的关键,涉及数据库连接、数据操作和访问方式。使用ADO.NET建立连接,执行SQL实现读取、插入、更新和删除数据。可通过直接SQL或数据访问对象进行操作。注意性能优化,使用连接池,处理异常,确保安全,以提升应用性能和稳定性。
|
3天前
|
JavaScript C#
C#winForm程序与html JS交互调用
C#winForm程序与html JS交互调用
|
3天前
|
小程序 JavaScript 前端开发
【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
|
3天前
|
JavaScript 前端开发
javascript中的交互效果
javascript中的交互效果
|
3天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
3天前
|
Rust 前端开发 JavaScript
Rust与JavaScript的跨语言交互:探索与实践
本文旨在探讨Rust与JavaScript之间的跨语言交互方法。我们将深入了解WebAssembly(Wasm)的角色,以及它如何使得Rust与JavaScript能够在Web应用中和谐共处。此外,我们还将介绍Rust与JavaScript的集成方式,包括Rust编译到Wasm、使用wasm-bindgen进行Rust与JavaScript的绑定,并通过实际案例展示如何实现两者之间的交互。
|
JavaScript 前端开发 Java
WebView与Javascript交互及JS的注入
本篇目录 前言 本篇讲解Java代码和Javascript代码的相互调用以及JS代码在Java中是如何动态的注入WebView中。一些通用配置在第一部分中说明。
1126 0
|
1天前
|
缓存 JavaScript 前端开发
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
|
1天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发