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

原文:在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中。

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

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

Android的WebView控件载入网页显示速度慢的究极解决方案
Android的WebView控件载入网页显示速度慢的究极解决方案 [转载来源自http://hi.baidu.com/goldchocobo/] Android客户端中混搭HTML页面,会出现虽然H ...
关于WebView 控件，你了解多少？
大家需要知道,不管什么技术,最终在 App 里面显示网页,一定需要一个网页引擎,这样才能解析网页. 通常情况下,App 内部会使用 WebView 控件作为网页引擎.这是系统自带的控件,专门用来显示网 ...
Android使用webview控件加载本地html，通过Js与后台Java实现数据的传递
1.在布局文件中加WebView控件,在java中获取WebView对象. 2.加载本地html文件. webView.loadUrl("file:///android_asset/andr ...
Android Native APP开发笔记：使用WebView控件加载网页
文章目录目的基础使用处理网页导航加载本地网页 Web和Native之间交互调试Web应用处理页面重绘总结目的 WebView是一个比较常用的控件,功能上也比较单一,就是用来加载网页的, ...
android的webview控件载入网页显示速度慢的究极解决方案,【转】Android的WebView控件载入网页显示速度慢的究极解决方案...
Android客户端中混搭HTML页面,会出现虽然HTML内容载入完成,标题也正常显示,但是整个网页需要等到近秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国外很多网站,也看过PhoneGap的代 ...
【Android】WebView控件最全使用解析
WebView控件最全使用解析一.WebView 概述二.WebView使用基础篇 2.1添加方式 2.2 加载远程网页 2.3 加载本地网页 2.4 加载HTML片段 2.5 WebView 常 ...
win8应用商店程序开发-WebView控件
介绍重新想象 Windows 8 Store Apps 之 WebView 演示 WebView 的基本应用演示 WebView 如何与 JavaScript 交互通过 Share Contra ...
【小沐学C#】WPF中嵌入web网页控件（WebBrowser、WebView2、CefSharp）
文章目录 1.简介 1.1 WPF简介 1.2 WPF 体系结构 1.3 WPF入门开发 2.WebBrowser 2.1 WebBrowser特点 2.2 WebBrowser常用的属性.方法和事件 ...
JTable是Swing编程中很常用的控件
JTable是Swing编程中很常用的控件,这里总结了一些常用方法以备查阅. 一.创建表格控件的各种方式: 1) 调用无参构造函数. JTable table = new JTable(); 2) 以 ...

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

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

最新文章

热门文章