最近由于项目需求，需要利用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的交互的更多相关文章

  1. Android学习笔记50：使用WebView控件浏览网页

    在Android中,可以使用Webview控件来浏览网页.通过使用该控件,我们可以自制一个简单的浏览器,运行效果如图1所示. 图1 运行效果 1.WebView 在使用WebView控件时,首先需要在 ...

  2. Android中通过WebView控件实现与JavaScript方法相互调用的地图应用

    在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用andro ...

  3. xcode7中使用cocos2d-x3.8的webview控件

    在XCode7中使用cocos2d-x 3.3以上版本的WebView控件时,碰到了编译错误 App Transport Security has blocked a cleartext HTTP ( ...

  4. 02、获取 WebView 控件中，加载的 HTML 网页内容

    在开发 app 的时候,WebView 是经常使用的控件.而且有时需要向 WebView 中的 html 内容 注入额外的 js 进行操作.这里记录一下在当前 WebView 控件中,获取 html ...

  5. 【WP开发】WebView控件应用要点

    WebView控件我就不多作详细的介绍,相信大家都懂的,就算你没用过,你看他的名字和长相都知道它的用途了.就是用来显示HTML内容的. 在WP 8.1的Runtime App中,这个控件大致有以下几个 ...

  6. android WebView控件显示网页

    有时需要app里面显示网页,而不调用其他浏览器浏览网页,那么这时就需要WebView控件.这个控件也是很强大的,放大,缩小,前进,后退网页都可以. 1.部分方法 //支持javascriptweb.g ...

  7. 学习webView控件使用

    WebView 对象用于网页显示使用,简单的学习并使用了一下. 1.首先在 layout 中摆一个全屏的 webview 控件 (main.xml ) <?xml version="1 ...

  8. 安卓开发学习笔记（五）：史上最简单且华丽地实现Android Stutio当中Webview控件https/http协议的方法

    一.我们先在XML当中自定义一个webview(Second_layout.xml) 代码如下: <?xml version="1.0" encoding="utf ...

  9. Android的WebView控件载入网页显示速度慢的究极解决方案

    Android的WebView控件载入网页显示速度慢的究极解决方案 [转载来源自http://hi.baidu.com/goldchocobo/] 秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国 ...

随机推荐

  1. IIC通讯协议（非原创，转载他人，用于学习）

    I2C协议:1.空闲状态 2.开始信号 3.停止信号 4.应答信号 5.数据的有效性 6.数据传输 IIC详解 1.I2C总线具有两根双向信号线,一根是数据线SDA,另一根是时钟线SCL 2.IIC总 ...

  2. 高性能mysql-锁的调试

    锁的调试分为俩部分,一是服务器级别的锁的调试.二是存储引擎级别的锁的调试 对于服务器级别的锁的调试: 服务器级别的锁的类型有表锁,全局锁,命名锁,字符锁 调试命令: Show processlist ...

  3. java 日志框架

    1.java常用日志框架介绍: https://www.cnblogs.com/chenhongliang/p/5312517.html 2.java各类日志组件汇总: https://blog.cs ...

  4. maya2018卸载/安装失败/如何彻底卸载清除干净maya2018注册表和文件的方法

    maya2018提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2018失败提示maya2018安装未完成,某些产品无法安装,也有时候想重新安装maya ...

  5. Go语言运算符

    目录 算术运算符 注意事项 赋值运算符 逻辑运算符 短路与和短路或 关系运算符 位运算符 其他运算符 运算符优先级 运算符用于在程序运行时执行数学或逻辑运算. Go 语言内置的运算符有:算术运算符.赋 ...

  6. js中的行为委托和无类编程

    概述 <你不知道的JavaScript>中有这么一段话:不幸的是,将类和继承的设计模式思维带入Javascript的想法是你所做的最坏的事情,因为语法可能会让你迷惑不已,让你以为真的有类这 ...

  7. 在Markdown中写注释

    概述 下面是我整理的在Markdown中写注释的几种方法,供自己开发时参考,相信对其他人也有用. html标签 既然Markdown内嵌html语法,那么就可以用可以用隐藏的html标签. 注意:需要 ...

  8. Spring Boot 集成 Mybatis 实现双数据源

    这里用到了Spring Boot + Mybatis + DynamicDataSource配置动态双数据源,可以动态切换数据源实现数据库的读写分离. 添加依赖 加入Mybatis启动器,这里添加了D ...

  9. Python常用模块time & datetime &random 模块

    时间模块前言 在Python中,与时间处理有关的模块就包括:time,datetime 一.在Python中,通常有这几种方式来表示时间: 时间戳 格式化的时间字符串 元组(struct_time)共 ...

  10. 自动化测试 selenium 环境搭建

    做 web 项目,测试是无法避免的.对于某些特定功能,采用单元测试就行.但如果想对网站进行整体测试,人工点击测试可行但有点累,如果能借助自动化测试工具就更好了.selenium 就是一款能满足这样要求 ...