重新想象 Windows 8.1 Store Apps (80) - 控件增强: WebView 之基本应用, POST 数据, 与 JavaScript 交互
作者：webabcd
介绍
重新想象 Windows 8.1 Store Apps 之控件增强
- WebView 的基本应用
- WebView 通过 POST 请求和 HTTP 头加载 url
- WebView 与 JavaScript 交互
示例
1、演示 WebView 的基本应用
WebView/Demo.xaml
<span><</span>
<span>Page
</span>
<span>x:Class</span>
<span>="Windows81.Controls.WebView.Demo"</span>
<span>
xmlns</span>
<span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span>
<span>
xmlns:x</span>
<span>="http://schemas.microsoft.com/winfx/2006/xaml"</span>
<span>
xmlns:local</span>
<span>="using:Windows81.Controls.WebView"</span>
<span>
xmlns:d</span>
<span>="http://schemas.microsoft.com/expression/blend/2008"</span>
<span>
xmlns:mc</span>
<span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span>
<span>
mc:Ignorable</span>
<span>="d"</span>
<span>></span>
<span><</span>
<span>Grid </span>
<span>Background</span>
<span>="Transparent"</span>
<span>></span>
<span><</span>
<span>StackPanel </span>
<span>Margin</span>
<span>="120 0 0 0"</span>
<span>></span>
<span><</span>
<span>Button </span>
<span>Name</span>
<span>="btnNavigateUrl"</span>
<span> Content</span>
<span>="导航到指定的 url"</span>
<span> Click</span>
<span>="btnNavigateUrl_Click"</span>
<span>/></span>
<span><</span>
<span>WebView </span>
<span>Name</span>
<span>="webView"</span>
<span> Width</span>
<span>="800"</span>
<span> Height</span>
<span>="2000"</span>
<span> HorizontalAlignment</span>
<span>="Left"</span>
<span> Margin</span>
<span>="0 10 0 0"</span>
<span>/></span>
<span></</span>
<span>StackPanel</span>
<span>></span>
<span></</span>
<span>Grid</span>
<span>></span>
<span><</span>
<span>Page.BottomAppBar</span>
<span>></span>
<span><</span>
<span>AppBar </span>
<span>x:Name</span>
<span>="appBar"</span>
<span> IsSticky</span>
<span>="True"</span>
<span> Padding</span>
<span>="10,0"</span>
<span>></span>
<span><</span>
<span>StackPanel </span>
<span>Name</span>
<span>="buttonPanel"</span>
<span> Orientation</span>
<span>="Horizontal"</span>
<span> HorizontalAlignment</span>
<span>="Left"</span>
<span>></span>
<span><</span>
<span>AppBarButton </span>
<span>Icon</span>
<span>="Play"</span>
<span> Label</span>
<span>="SymbolIcon"</span>
<span>/></span>
<span></</span>
<span>StackPanel</span>
<span>></span>
<span></</span>
<span>AppBar</span>
<span>></span>
<span></</span>
<span>Page.BottomAppBar</span>
<span>></span>
<span></</span>
<span>Page</span>
<span>></span>
WebView/Demo.xaml.cs
<span>/*</span>
<span>
* 本例演示 WebView 的基本应用
*
* WebView - 内嵌浏览器
*
*
* 提示：
* 在 win8 中 WebView 会挡住所有元素（包括 AppBar），而在 win8.1 中不会再有这种情况了
* 如果想看看 win8 中全屏 WebView 如何不挡 AppBar，以及如何使用 WebViewBrush 以达到不遮挡其他元素的目的，请参看：</span>
<span>http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html</span>
<span>
*
* 注：win8 和 win8.1 中的 WebView 有很多区别，在 win8.1 中使用 WebView 请参考本系列教程，在 win8 中使用 WebView 请看考：</span>
<span>http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html</span>
<span>*/</span>
<span>using</span>
<span> System;
</span>
<span>using</span>
<span> Windows.UI.Xaml;
</span>
<span>using</span>
<span> Windows.UI.Xaml.Controls;
</span>
<span>using</span>
<span> Windows.UI.Xaml.Media;
</span>
<span>namespace</span>
<span> Windows81.Controls.WebView
{
</span>
<span>public</span>
<span>sealed</span>
<span>partial</span>
<span>class</span>
<span> Demo : Page
{
</span>
<span>public</span>
<span> Demo()
{
</span>
<span>this</span>
<span>.InitializeComponent();
}
</span>
<span>private</span>
<span>void</span> btnNavigateUrl_Click(<span>object</span><span> sender, RoutedEventArgs e)
{
</span><span>//</span><span> 导航到指定的 url</span>
webView.Navigate(<span>new</span> Uri(<span>"</span><span>http://www.sina.com.cn/</span><span>"</span><span>, UriKind.Absolute));
</span><span>//</span><span> webView.Source = new Uri("</span><span>http://webabcd.cnblogs.com/</span><span>", UriKind.Absolute);
</span><span>//</span><span> web 页面中的某一个 frame 加载前</span>
webView.FrameNavigationStarting +=<span> webView_FrameNavigationStarting;
</span><span>//</span><span> web 页面中的某一个 frame 加载中</span>
webView.FrameContentLoading +=<span> webView_FrameContentLoading;
</span><span>//</span><span> web 页面中的某一个 frame 的 DOM 加载完成</span>
webView.FrameDOMContentLoaded +=<span> webView_FrameDOMContentLoaded;
</span><span>//</span><span> web 页面中的某一个 frame 导航完成（成功或失败）</span>
webView.FrameNavigationCompleted +=<span> webView_FrameNavigationCompleted;
</span><span>//</span><span> web 页面加载前</span>
webView.NavigationStarting +=<span> webView_NavigationStarting;
</span><span>//</span><span> web 页面加载中</span>
webView.ContentLoading +=<span> webView_ContentLoading;
</span><span>//</span><span> web 页面的 DOM 加载完成</span>
webView.DOMContentLoaded +=<span> webView_DOMContentLoaded;
</span><span>//</span><span> web 页面导航完成（成功或失败）</span>
webView.NavigationCompleted +=<span> webView_NavigationCompleted;
</span><span>//</span><span> 当脚本运行时，可能会导致 app 无响应。此事件会定期执行，然后可查看 ExecutionTime 属性，如果要暂停脚本，则将 StopPageScriptExecution 属性设置为 true 即可</span>
webView.LongRunningScriptDetected +=<span>webView_LongRunningScriptDetected;
</span><span>//</span><span> 在 WebView 对 SmartScreen 筛选器报告为不安全的内容显示警告页面时发生</span>
webView.UnsafeContentWarningDisplaying +=<span>webView_UnsafeContentWarningDisplaying;
</span><span>//</span><span> 在 WebView 尝试下载不受支持的文件时发生</span>
webView.UnviewableContentIdentified +=<span>webView_UnviewableContentIdentified;
</span><span>//</span><span> 用于导航 web 的一系列 api，顾名思义，不解释了
</span><span>//</span><span> webView.CanGoBack;
</span><span>//</span><span> webView.GoBack();
</span><span>//</span><span> webView.CanGoForward;
</span><span>//</span><span> webView.GoForward();
</span><span>//</span><span> webView.Stop();
</span><span>//</span><span> webView.Refresh();</span><span>
RotateTransform rt </span>= <span>new</span><span> RotateTransform();
rt.Angle </span>= <span>5</span><span>;
</span><span>//</span><span> 支持 RenderTransform 了</span>
webView.RenderTransform =<span> rt;
</span><span>//</span><span> 支持 Opacity 了</span>
webView.Opacity = <span>0.3</span><span>;
</span><span>//</span><span> 支持 Focus 了
</span><span>//</span><span> webView.Focus(FocusState.Programmatic);</span><span> }
</span><span>void</span><span> webView_FrameNavigationStarting(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationStartingEventArgs args)
{
</span><span>//</span><span> 是否取消此 url 的加载
</span><span>//</span><span> args.Cancel = true;
</span><span>//</span><span> args.Uri</span><span> }
</span><span>void</span><span> webView_FrameContentLoading(Windows.UI.Xaml.Controls.WebView sender, WebViewContentLoadingEventArgs args)
{
</span><span>//</span><span> args.Uri</span><span> }
</span><span>void</span><span> webView_FrameDOMContentLoaded(Windows.UI.Xaml.Controls.WebView sender, WebViewDOMContentLoadedEventArgs args)
{
</span><span>//</span><span> args.Uri</span><span> }
</span><span>void</span><span> webView_FrameNavigationCompleted(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationCompletedEventArgs args)
{
</span><span>//</span><span> 导航是否成功
</span><span>//</span><span> args.IsSuccess
</span><span>//</span><span> 导航失败时，失败原因的 WebErrorStatus 枚举
</span><span>//</span><span> args.WebErrorStatus</span><span> }
</span><span>void</span><span> webView_NavigationStarting(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationStartingEventArgs args)
{
</span><span>//</span><span> 是否取消此 url 的加载
</span><span>//</span><span> args.Cancel = true;
</span><span>//</span><span> args.Uri</span><span> }
</span><span>void</span><span> webView_ContentLoading(Windows.UI.Xaml.Controls.WebView sender, WebViewContentLoadingEventArgs args)
{
</span><span>//</span><span> args.Uri</span><span> }
</span><span>void</span><span> webView_DOMContentLoaded(Windows.UI.Xaml.Controls.WebView sender, WebViewDOMContentLoadedEventArgs args)
{
</span><span>//</span><span> args.Uri</span><span> }
</span><span>void</span><span> webView_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationCompletedEventArgs args)
{
</span><span>//</span><span> 导航是否成功
</span><span>//</span><span> args.IsSuccess
</span><span>//</span><span> 导航失败时，失败原因的 WebErrorStatus 枚举
</span><span>//</span><span> args.WebErrorStatus</span><span> }
</span><span>//</span><span> 在 WebView 尝试下载不受支持的文件时发生</span><span>void</span><span> webView_UnviewableContentIdentified(Windows.UI.Xaml.Controls.WebView sender, WebViewUnviewableContentIdentifiedEventArgs args)
{
</span><span>//</span><span> 引用页
</span><span>//</span><span> args.Referrer
</span><span>//</span><span> args.Uri</span><span> }
</span><span>//</span><span> 在 WebView 对 SmartScreen 筛选器报告为不安全的内容显示警告页面时发生</span><span>void</span> webView_UnsafeContentWarningDisplaying(Windows.UI.Xaml.Controls.WebView sender, <span>object</span><span> args)
{
}
</span><span>//</span><span> 当脚本运行时，可能会导致 app 无响应。此事件会定期执行，然后可查看 ExecutionTime 属性，如果要暂停脚本，则将 StopPageScriptExecution 属性设置为 true 即可</span><span>void</span><span> webView_LongRunningScriptDetected(Windows.UI.Xaml.Controls.WebView sender, WebViewLongRunningScriptDetectedEventArgs args)
{
</span><span>//</span><span> 获取 WebView 执行的一个长时间运行的脚本的运行时间（单位：毫秒）
</span><span>//</span><span> args.ExecutionTime
</span><span>//</span><span> 是否暂停在 WebView 中执行的已运行很长时间的脚本
</span><span>//</span><span> args.StopPageScriptExecution</span><span> }
}
}</span>
2、演示如何通过 POST 请求和 HTTP 头加载 url
WebView/Post.xaml
<span><</span>
<span>Page
</span>
<span>x:Class</span>
<span>="Windows81.Controls.WebView.Post"</span>
<span>
xmlns</span>
<span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span>
<span>
xmlns:x</span>
<span>="http://schemas.microsoft.com/winfx/2006/xaml"</span>
<span>
xmlns:local</span>
<span>="using:Windows81.Controls.WebView"</span>
<span>
xmlns:d</span>
<span>="http://schemas.microsoft.com/expression/blend/2008"</span>
<span>
xmlns:mc</span>
<span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span>
<span>
mc:Ignorable</span>
<span>="d"</span>
<span>></span>
<span><</span>
<span>Grid </span>
<span>Background</span>
<span>="Transparent"</span>
<span>></span>
<span><</span>
<span>StackPanel </span>
<span>Margin</span>
<span>="120 0 0 0"</span>
<span>></span>
<span><</span>
<span>WebView </span>
<span>Name</span>
<span>="webView"</span>
<span> Width</span>
<span>="800"</span>
<span> Height</span>
<span>="300"</span>
<span> HorizontalAlignment</span>
<span>="Left"</span>
<span>/></span>
<span></</span>
<span>StackPanel</span>
<span>></span>
<span></</span>
<span>Grid</span>
<span>></span>
<span></</span>
<span>Page</span>
<span>></span>
WebView/Post.xaml.cs
<span>/*</span>
<span>
* 本例演示如何通过 POST 请求和 HTTP 头加载 url
*
* WebView - 内嵌浏览器
*
*
* 提示：
* 在 win8 中 WebView 会挡住所有元素（包括 AppBar），而在 win8.1 中不会再有这种情况了
* 如果想看看 win8 中全屏 WebView 如何不挡 AppBar，以及如何使用 WebViewBrush 以达到不遮挡其他元素的目的，请参看：</span>
<span>http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html</span>
<span>
*
* 注：win8 和 win8.1 中的 WebView 有很多区别，在 win8.1 中使用 WebView 请参考本系列教程，在 win8 中使用 WebView 请看考：</span>
<span>http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html</span>
<span>*/</span>
<span>using</span>
<span> System;
</span>
<span>using</span>
<span> Windows.UI.Xaml;
</span>
<span>using</span>
<span> Windows.UI.Xaml.Controls;
</span>
<span>using</span>
<span> Windows.Web.Http;
</span>
<span>namespace</span>
<span> Windows81.Controls.WebView
{
</span>
<span>public</span>
<span>sealed</span>
<span>partial</span>
<span>class</span>
<span> Post : Page
{
</span>
<span>public</span>
<span> Post()
{
</span>
<span>this</span>
<span>.InitializeComponent();
</span>
<span>this</span>.Loaded +=<span> Post_Loaded;
}
</span><span>void</span> Post_Loaded(<span>object</span><span> sender, RoutedEventArgs e)
{
HttpRequestMessage httpRequestMessage </span>= <span>new</span> HttpRequestMessage(HttpMethod.Post, <span>new</span> Uri(<span>"</span><span>http://localhost:39630/WebViewPost.aspx</span><span>"</span>)); <span>//</span><span> 此测试 aspx 在 WebServer 项目中
</span><span>//</span><span> 构造 post 数据（无法 form 提交，因为试了很久，无法将 ContentType 设置为 "application/x-www-form-urlencoded"）</span>
httpRequestMessage.Content = <span>new</span> HttpStringContent(<span>"</span><span>hello webabcd</span><span>"</span><span>);
</span><span>//</span><span> 构造 http header 数据</span>
httpRequestMessage.Headers.Append(<span>"</span><span>myHeader</span><span>"</span>, <span>"</span><span>hello header</span><span>"</span><span>);
</span><span>//</span><span> NavigateWithHttpRequestMessage() - 通过 POST 请求和 HTTP 头加载 url</span><span> webView.NavigateWithHttpRequestMessage(httpRequestMessage);
}
}
}</span>
服务端：
WebServer/WebViewPost.aspx.cs
<span>/*</span>
<span>
* 用于 WebView 演示如何通过 POST 请求和 HTTP 头加载 url
</span>
<span>*/</span>
<span>using</span>
<span> System;
</span>
<span>using</span>
<span> System.Collections.Generic;
</span>
<span>using</span>
<span> System.IO;
</span>
<span>using</span>
<span> System.Linq;
</span>
<span>using</span>
<span> System.Web;
</span>
<span>using</span>
<span> System.Web.UI;
</span>
<span>using</span>
<span> System.Web.UI.WebControls;
</span>
<span>namespace</span>
<span> WebServer
{
</span>
<span>public</span>
<span>partial</span>
<span>class</span>
<span> WebViewPost : System.Web.UI.Page
{
</span>
<span>protected</span>
<span>void</span> Page_Load(<span>object</span><span> sender, EventArgs e)
{
Request.InputStream.Position </span>= <span>0</span><span>;
StreamReader str </span>= <span>new</span><span> StreamReader(Request.InputStream);
</span><span>string</span> postData =<span> str.ReadToEnd();
str.Dispose();
</span><span>//</span><span> 显示 post 过来的数据</span>
Response.Write(<span>"</span><span>post data: </span><span>"</span> +<span> postData);
Response.Write(</span><span>"</span><span><br /></span><span>"</span><span>);
</span><span>//</span><span> 显示请求的一个自定义的 http 头</span>
Response.Write(<span>"</span><span>my header: </span><span>"</span> + Request.Headers[<span>"</span><span>myHeader</span><span>"</span><span>]);
}
}
}</span>
3、演示 WebView 如何与 JavaScript 交互
WebView/Interact.xaml
<span><</span>
<span>Page
</span>
<span>x:Class</span>
<span>="Windows81.Controls.WebView.Interact"</span>
<span>
xmlns</span>
<span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span>
<span>
xmlns:x</span>
<span>="http://schemas.microsoft.com/winfx/2006/xaml"</span>
<span>
xmlns:local</span>
<span>="using:Windows81.Controls.WebView"</span>
<span>
xmlns:d</span>
<span>="http://schemas.microsoft.com/expression/blend/2008"</span>
<span>
xmlns:mc</span>
<span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span>
<span>
mc:Ignorable</span>
<span>="d"</span>
<span>></span>
<span><</span>
<span>Grid </span>
<span>Background</span>
<span>="Transparent"</span>
<span>></span>
<span><</span>
<span>StackPanel </span>
<span>Margin</span>
<span>="120 0 0 0"</span>
<span>></span>
<span><</span>
<span>TextBlock </span>
<span>Name</span>
<span>="lblMsg"</span>
<span> FontSize</span>
<span>="14.667"</span>
<span>/></span>
<span><</span>
<span>Button </span>
<span>Name</span>
<span>="btnInvokeJavaScript"</span>
<span> Content</span>
<span>="app 调用 WebView 加载内容中的 JavaScript 函数"</span>
<span> Click</span>
<span>="btnInvokeJavaScript_Click"</span>
<span> Margin</span>
<span>="0 10 0 0"</span>
<span>/></span>
<span><</span>
<span>Button </span>
<span>Name</span>
<span>="btnAccessDOM"</span>
<span> Content</span>
<span>="通过 eval 访问 DOM"</span>
<span> Click</span>
<span>="btnAccessDOM_Click"</span>
<span> Margin</span>
<span>="0 10 0 0"</span>
<span>/></span>
<span><</span>
<span>Button </span>
<span>Name</span>
<span>="btnRegisterJavaScript"</span>
<span> Content</span>
<span>="通过 eval 向页面中注册 JavaScript 脚本"</span>
<span> Click</span>
<span>="btnRegisterJavaScript_Click"</span>
<span> Margin</span>
<span>="0 10 0 0"</span>
<span>/></span>
<span><!--</span>
<span>
通过 ms-appx-web 加载包内的 html 页面
</span>
<span>--></span>
<span><</span>
<span>WebView </span>
<span>Name</span>
<span>="webView"</span>
<span> Width</span>
<span>="400"</span>
<span> Height</span>
<span>="300"</span>
<span> Source</span>
<span>="ms-appx-web:///Controls/WebView/WebViewInteract.html"</span>
<span> HorizontalAlignment</span>
<span>="Left"</span>
<span> Margin</span>
<span>="0 10 0 0"</span>
<span>/></span>
<span></</span>
<span>StackPanel</span>
<span>></span>
<span></</span>
<span>Grid</span>
<span>></span>
<span></</span>
<span>Page</span>
<span>></span>
WebView/Interact.xaml.cs
<span>/*</span>
<span>
* 本例演示 WebView 如何与 JavaScript 交互
*
* WebView - 内嵌浏览器
* DocumentTitle - html 中的 title
* DefaultBackgroundColor - html 中的背景色
* InvokeScriptAsync() - 调用 JavaScript 中的指定函数，并返回执行结果
* ScriptNotify - 当接收到从 JavaScript 发过来的数据时所触发的事件（事件参数：NotifyEventArgs），通过在 html 中调用 window.external.notify 来实现 js 调用 app
*
* NotifyEventArgs
* Value - js 传递给 app 的数据
*
* 本例通过加载同目录下的 WebViewInteract.html 来演示 app 与 js 的交互
*
*
*
* 提示：
* 在 win8 中 WebView 会挡住所有元素（包括 AppBar），而在 win8.1 中不会再有这种情况了
* 如果想看看 win8 中全屏 WebView 如何不挡 AppBar，以及如何使用 WebViewBrush 以达到不遮挡其他元素的目的，请参看：</span>
<span>http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html</span>
<span>
*
* 注：win8 和 win8.1 中的 WebView 有很多区别，在 win8.1 中使用 WebView 请参考本系列教程，在 win8 中使用 WebView 请看考：</span>
<span>http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html</span>
<span>*/</span>
<span>/*</span>
<span>
* 特别注意：
* 1、在 win8.1 中如果要允许外部网页引发 ScriptNotify 事件，则必须在 appxmanifest 中设置允许的 URI，必须是 https 协议的，类似如下
* <ApplicationContentUriRules>
* <Rule Match="</span>
<span>https://aaa.aaa.aaa</span>
<span>" Type="include" />
* </ApplicationContentUriRules>
* 2、如果使用的是本地 html 数据则无此限制，比如通过 NavigateToString 或 ms-appx-web 来加载 html 时
* 3、另外如果是 http 的话，可以将 html 下载到本地，然后加载此 html，而 html 中的 url 引用则可以引用远程的（如果需要替换 html 中的 url 引用则可以参考 Local.xaml 的方式）
</span>
<span>*/</span>
<span>using</span>
<span> System;
</span>
<span>using</span>
<span> System.Collections.Generic;
</span>
<span>using</span>
<span> Windows.UI.Popups;
</span>
<span>using</span>
<span> Windows.UI.Xaml;
</span>
<span>using</span>
<span> Windows.UI.Xaml.Controls;
</span>
<span>namespace</span>
<span> Windows81.Controls.WebView
{
</span>
<span>public</span>
<span>sealed</span>
<span>partial</span>
<span>class</span>
<span> Interact : Page
{
</span>
<span>public</span>
<span> Interact()
{
</span>
<span>this</span>
<span>.InitializeComponent();
webView.ScriptNotify </span>+=<span> webView_ScriptNotify;
webView.NavigationCompleted </span>+=<span> webView_NavigationCompleted;
}
</span><span>void</span><span> webView_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationCompletedEventArgs args)
{
</span><span>if</span><span> (args.IsSuccess)
{
lblMsg.Text </span>= <span>"</span><span>html title: </span><span>"</span> +<span> webView.DocumentTitle;
lblMsg.Text </span>+=<span> Environment.NewLine;
lblMsg.Text </span>+= <span>"</span><span>html backgroundColor: </span><span>"</span> +<span> webView.DefaultBackgroundColor.ToString();
}
}
</span><span>async</span><span>void</span> webView_ScriptNotify(<span>object</span><span> sender, NotifyEventArgs e)
{
</span><span>//</span><span> 获取 js 传递过来的数据（js 端通向 app 传递数据的方法：window.external.notify(‘js to app‘);）</span><span>await</span><span>new</span><span> MessageDialog(e.Value).ShowAsync();
}
</span><span>//</span><span> app 调用 js</span><span>private</span><span>async</span><span>void</span> btnInvokeJavaScript_Click(<span>object</span><span> sender, RoutedEventArgs e)
{
List</span><<span>string</span>> arguments = <span>new</span> List<<span>string</span>> { <span>"</span><span>webabcd</span><span>"</span><span> };
</span><span>//</span><span> 调用 js 方法：sayHelloToJs(‘webabcd‘); 并返回结果</span><span>string</span> result = <span>await</span> webView.InvokeScriptAsync(<span>"</span><span>sayHelloToJs</span><span>"</span><span>, arguments);
</span><span>await</span><span>new</span><span> MessageDialog(result).ShowAsync();
}
</span><span>//</span><span> 通过 eval 方式访问 DOM</span><span>private</span><span>async</span><span>void</span> btnAccessDOM_Click(<span>object</span><span> sender, RoutedEventArgs e)
{
</span><span>//</span><span> 获取 document.title 的值</span>
List<<span>string</span>> arguments = <span>new</span> List<<span>string</span>> { <span>"</span><span>document.title</span><span>"</span><span> };
</span><span>string</span> result = <span>await</span> webView.InvokeScriptAsync(<span>"</span><span>eval</span><span>"</span><span>, arguments);
</span><span>await</span><span>new</span><span> MessageDialog(result).ShowAsync();
}
</span><span>//</span><span> 通过 eval 向页面中注册 JavaScript 脚本</span><span>private</span><span>async</span><span>void</span> btnRegisterJavaScript_Click(<span>object</span><span> sender, RoutedEventArgs e)
{
</span><span>//</span><span> 向 html 中注册脚本</span>
List<<span>string</span>> arguments = <span>new</span> List<<span>string</span>> { <span>"</span><span>function xxx(){return ‘由 app 向 html 注册的脚本返回的数据‘;}</span><span>"</span><span> };
</span><span>await</span> webView.InvokeScriptAsync(<span>"</span><span>eval</span><span>"</span><span>, arguments);
</span><span>//</span><span> 调用刚刚注册的脚本</span><span>string</span> result = <span>await</span> webView.InvokeScriptAsync(<span>"</span><span>xxx</span><span>"</span>, <span>null</span><span>);
</span><span>await</span><span>new</span><span> MessageDialog(result).ShowAsync();
}
}
}</span>
HTML：
WebView/WebViewInteract.html
<span><!--</span>
<span>此 html 用于演示 app 与 js 间的交互</span>
<span>--></span>
<span><!</span>
<span>doctype html</span>
<span>></span>
<span><</span>
<span>html</span>
<span>></span>
<span><</span>
<span>head</span>
<span>></span>
<span><</span>
<span>title</span>
<span>></span>I am html title<span></</span><span>title</span><span>></span><span><</span><span>script </span><span>type</span><span>=‘text/javascript‘</span><span>></span><span>function</span><span> sayHelloToJs(name) {
</span><span>return</span><span>‘</span><span>app to js: </span><span>‘</span><span>+</span><span> name;
}
</span><span>function</span><span> sayHelloToApp() {
</span><span>//</span><span> 传递数据给 app</span><span> window.external.notify(</span><span>‘</span><span>js to app</span><span>‘</span><span>);
}
</span><span></</span><span>script</span><span>></span><span></</span><span>head</span><span>></span><span><</span><span>body</span><span>></span><span><</span><span>input </span><span>type</span><span>=‘button‘ </span><span>onclick</span><span>=‘sayHelloToApp();‘ </span><span>value</span><span>=‘js </span><span>调用 app 中的方法‘ </span><span>/></span><span></</span><span>body</span><span>></span><span></</span><span>html</span><span>></span>
OK
[源码下载]
原文：http://www.cnblogs.com/webabcd/p/3798597.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！