在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中。
好了,就写到这里,其实这只是一种很简单的交互方式,更高大上的还需要各位博友共同挖掘了!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
C#中的文件操作
原文: C#中的文件操作 读操作: 方法1: string str = File.ReadAllText(@filepath, Encoding.Default); 方法2: byte[] buffer = File.ReadAllBytes(@filepath); string str = Encoding.Default.GetString(buffer); 方法3: string[] buffer = File.ReadAllLines(@filepath,Encoding.Default); string str = "" ; foreach (var buf in buffer) { str = str + buf +"\n"; } 方法4: FileStream fsRead = new FileStream(@filepath, FileMode.OpenOrCreate); byte[] buffer = new byte[1024 * 1024 * 5]; int length = fsRead.Read(buffer, 0, buffer.Length); stri...
- 下一篇
WPF4.0用tablet实现手写输入(更新XP SP3下也能手写输入方法)
原文: WPF4.0用tablet实现手写输入(更新XP SP3下也能手写输入方法) 由于项目需求一个手写输入的控件,纠结了2天,终于搞定了。 主要是由于本人的英语不过关,一直和ocr混淆在一起,研究了Tesseract-OCR,我说奇怪了号称老牌OCR新版本还支持中文,怎么效果这么差,必须写个标准楷体才能够识别...||-_-.。还以为不行,必须得花钱买汉王的东西了.....一不小心让我知道了有tablet这种东西,大家可以体验一下,通过右键任务栏--工具栏--Tablet PC 输入面板。识别率相当高啊,于是谷歌了一下table SDK(google更懂E文) 05年的资源,各种下啊,迅雷、旋风、IE都没下下来。后来用谷歌阅览器自带的下载搞定....(果然很懂),满怀欣喜地打开看demo,效果不错啊,一看源码...我勒个去,全是C++的,不愧是6年前的资源。 废话不说了进入正题,微软手写识别无非是用InkAnalyzer这个类,具体用法,msdn....但是.net4.0System.Windows.Ink;中这个类已经不存在了,只有3.5的有。我msdn了下,手写识别无非用到...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8安装Docker,最新的服务器搭配容器使用
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- Windows10,CentOS7,CentOS8安装Nodejs环境
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2全家桶,快速入门学习开发网站教程
- MySQL8.0.19开启GTID主从同步CentOS8