在UAP中如何通过WebView控件进行C#与JS的交互
最近由于项目需求，需要利用C#在UWP中与JS进行交互，由于还没有什么实战经验，所有就现在网上百度了一下，但是百度的结果显示大部分都是在Android和IOS上面的方法，UWP中的几乎没有。还好微软又他强大的MSDN社区，所有就在那里面找到了一个解题思路，于是就分享给大家。
1、首先，我们既然要与JS进行交互，那必须先有一个HTML页面才可以。我这里以一个本地的HTML页面作为一个HTML页面（别忘了里面要有JS部分哦( ╯□╰ ) ，并添加到当前的UWP工程中），示例代码如下所示：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Matt's Webview Content Page</title>
<script lang="en-us" type="text/javascript">
function TimeUpdate() {
var TimeTextbox = document.getElementById("TheTime");
TimeTextbox.value = new Date().toTimeString();
}
</script>
</head>
<body>
<h2>Matt's Webview Content Page</h2>
<h5>The current time is: <input type="text" id="TheTime" /> </h5>
<button onclick="TimeUpdate()">Update the time!</button>
</body>
</html>
上面这串HTML页面的功能很简单，就是直接获取当前时间并显示出来；
2、接下来，我们需要在在当前工程中进行前台的布局，布局很简单，这里就直接列出示例代码：
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<WebView x:Name="MyWebview" Width="500" Height="500" Source="ms-appx-web:///HTMLPage1.html"/>
<Button x:Name="MyButton" Margin="10" Content="Invoke the TimeUpdate Javascript function from C# using this button" Click="MyButton_Click_1" HorizontalAlignment="Center"/>
</StackPanel>
WebView控件用于显示本地的一个HTML页面，Button控件用于与HTML中的JS进行交互（其实让这个按钮也可以触发HTML中获取当前时间并显示的JS事件）
3、添加Button对应的事件，添加后台代码：
private async void MyButton_Click_1(object sender, RoutedEventArgs e)
{
await MyWebview.InvokeScriptAsync("TimeUpdate", null); //第一个参数是要触发的JS函数，第二个参数是要传递给该函数的参数
}
通过上面的三个步骤，我们就可以利用这个Button按钮获取当前时间并显示在WebView中。
好了，就写到这里，其实这只是一种很简单的交互方式，更高大上的还需要各位博友共同挖掘了！
在UAP中如何通过WebView控件进行C#与JS的交互的更多相关文章
- Android学习笔记50：使用WebView控件浏览网页
在Android中,可以使用Webview控件来浏览网页.通过使用该控件,我们可以自制一个简单的浏览器,运行效果如图1所示. 图1 运行效果 1.WebView 在使用WebView控件时,首先需要在 ...
- Android中通过WebView控件实现与JavaScript方法相互调用的地图应用
在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用andro ...
- xcode7中使用cocos2d-x3.8的webview控件
在XCode7中使用cocos2d-x 3.3以上版本的WebView控件时,碰到了编译错误 App Transport Security has blocked a cleartext HTTP ( ...
- 02、获取 WebView 控件中，加载的 HTML 网页内容
在开发 app 的时候,WebView 是经常使用的控件.而且有时需要向 WebView 中的 html 内容 注入额外的 js 进行操作.这里记录一下在当前 WebView 控件中,获取 html ...
- 【WP开发】WebView控件应用要点
WebView控件我就不多作详细的介绍,相信大家都懂的,就算你没用过,你看他的名字和长相都知道它的用途了.就是用来显示HTML内容的. 在WP 8.1的Runtime App中,这个控件大致有以下几个 ...
- android WebView控件显示网页
有时需要app里面显示网页,而不调用其他浏览器浏览网页,那么这时就需要WebView控件.这个控件也是很强大的,放大,缩小,前进,后退网页都可以. 1.部分方法 //支持javascriptweb.g ...
- 学习webView控件使用
WebView 对象用于网页显示使用,简单的学习并使用了一下. 1.首先在 layout 中摆一个全屏的 webview 控件 (main.xml ) <?xml version="1 ...
- 安卓开发学习笔记（五）：史上最简单且华丽地实现Android Stutio当中Webview控件https/http协议的方法
一.我们先在XML当中自定义一个webview(Second_layout.xml) 代码如下: <?xml version="1.0" encoding="utf ...
- Android的WebView控件载入网页显示速度慢的究极解决方案
Android的WebView控件载入网页显示速度慢的究极解决方案 [转载来源自http://hi.baidu.com/goldchocobo/] 秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国 ...
随机推荐
- FreeRTOS移植到STM32上的移植过程
所有的单片机都是顺序执行的,而对于多任务而言就显得力不从心了,虽然在一些小项目中可以通过定时器来实现,但这种实现方式没有实时性,一旦任务需要在规定时间内做出响应,那只能通过实时操作系统来完成了.在很多 ...
- Python简介及环境安装
Python 官网传送门 Python是一种面向对象的解释性计算机程序设计语言. Python 2.7将于2020年1月1日终止支持,本笔记基于Python3. pip pip 是一个现代的,通用的 ...
- Android开发 - ImageView加载Base64编码的图片
在我们开发应用的过程中,并不是所有情况下都请求图片的URL或者加载本地图片,有时我们需要加载Base64编码的图片.这种情况出现在服务端需要动态生成的图片,比如: 二维码 图形验证码 ... 这些应用 ...
- Django(序列化、SweetAlert插件)
day72 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2 前端序列化 后端序列化 day73中 补充一个SweetA ...
- 前置知识: FactoryBean的作用
FactoryBean 简介 FactoryBean是Spring中一种特殊的Bean,是用于创建Bean对象的,最大的作用便是可以让我们自定义Bean的创建过程.如果你在XML配置文件配置了一个节点 ...
- Java 实现网络图片的读取与下载
//网络图片的下载,读取与删除 public static void fileDowAndDel(String httpurl){ try { URL url = new URL(httpurl); ...
- spring boot 访问静态资源的步骤
1)resources/static下放置html文件.(或者static下新建目录 http://hcss:8090/imgs/单例.png) 2)webapp下放置html文件. 如果两个路径下有 ...
- [Objective-C语言教程]预处理器（18）
Objective-C预处理器不是编译器的一部分,而是编译过程中的一个单独步骤. 简单来说,Objective-C预处理器只是一个文本替换工具,它指示编译器在实际编译之前进行必要的预处理. 我们将Ob ...
- Hive ROW_NUMBER,RANK(),DENSE_RANK()
准备数据 浙江,杭州,300 浙江,宁波,150 浙江,温州,200 浙江,嘉兴,100 江苏,南京,270 江苏,苏州,299 江苏,某市,200 江苏,某某市,100 创建表 CREATE t ...
- Spring Cloud OAuth2.0 微服务中配置 Jwt Token 签名/验证
关于 Jwt Token 的签名与安全性前面已经做了几篇介绍,在 IdentityServer4 中定义了 Jwt Token 与 Reference Token 两种验证方式(https://www ...