重新想象 Windows 8.1 Store Apps (80) - 控件增强: WebView 之基本应用, POST 数据, 与 JavaScript 交互

2022-10-18 18:06:01

[源码下载]

重新想象 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

<Page

    x:Class="Windows81.Controls.WebView.Demo"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows81.Controls.WebView"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0">

            <Button Name="btnNavigateUrl" Content="导航到指定的 url" Click="btnNavigateUrl_Click" />

            <WebView Name="webView" Width="800" Height="2000" HorizontalAlignment="Left" Margin="0 10 0 0" />

        </StackPanel>

    </Grid>

    <Page.BottomAppBar>

        <AppBar x:Name="appBar" IsSticky="True" Padding="10,0">

            <StackPanel Name="buttonPanel" Orientation="Horizontal" HorizontalAlignment="Left">

                <AppBarButton Icon="Play" Label="SymbolIcon" />

            </StackPanel>

        </AppBar>

    </Page.BottomAppBar>

</Page>

WebView/Demo.xaml.cs

/*

 * 本例演示 WebView 的基本应用

 *

 * WebView - 内嵌浏览器

 *

 *

 * 提示：

 * 在 win8 中 WebView 会挡住所有元素（包括 AppBar），而在 win8.1 中不会再有这种情况了

 * 如果想看看 win8 中全屏 WebView 如何不挡 AppBar，以及如何使用 WebViewBrush 以达到不遮挡其他元素的目的，请参看：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html

 *

 * 注：win8 和 win8.1 中的 WebView 有很多区别，在 win8.1 中使用 WebView 请参考本系列教程，在 win8 中使用 WebView 请看考：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html

 */

using System;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

namespace Windows81.Controls.WebView

{

    public sealed partial class Demo : Page

    {

        public Demo()

        {

            this.InitializeComponent();

        }

        private void btnNavigateUrl_Click(object sender, RoutedEventArgs e)

        {

            // 导航到指定的 url

            webView.Navigate(new Uri("http://www.sina.com.cn/", UriKind.Absolute));

            // webView.Source = new Uri("http://webabcd.cnblogs.com/", UriKind.Absolute);

            // web 页面中的某一个 frame 加载前

            webView.FrameNavigationStarting += webView_FrameNavigationStarting;

            // web 页面中的某一个 frame 加载中

            webView.FrameContentLoading += webView_FrameContentLoading;

            // web 页面中的某一个 frame 的 DOM 加载完成

            webView.FrameDOMContentLoaded += webView_FrameDOMContentLoaded;

            // web 页面中的某一个 frame 导航完成（成功或失败）

            webView.FrameNavigationCompleted += webView_FrameNavigationCompleted;

            // web 页面加载前

            webView.NavigationStarting += webView_NavigationStarting;

            // web 页面加载中

            webView.ContentLoading += webView_ContentLoading;

            // web 页面的 DOM 加载完成

            webView.DOMContentLoaded += webView_DOMContentLoaded;

            // web 页面导航完成（成功或失败）

            webView.NavigationCompleted += webView_NavigationCompleted;

            // 当脚本运行时，可能会导致 app 无响应。此事件会定期执行，然后可查看 ExecutionTime 属性，如果要暂停脚本，则将 StopPageScriptExecution 属性设置为 true 即可

            webView.LongRunningScriptDetected +=webView_LongRunningScriptDetected;

            // 在 WebView 对 SmartScreen 筛选器报告为不安全的内容显示警告页面时发生

            webView.UnsafeContentWarningDisplaying +=webView_UnsafeContentWarningDisplaying;

            // 在 WebView 尝试下载不受支持的文件时发生

            webView.UnviewableContentIdentified +=webView_UnviewableContentIdentified;

            // 用于导航 web 的一系列 api，顾名思义，不解释了

            // webView.CanGoBack;

            // webView.GoBack();

            // webView.CanGoForward;

            // webView.GoForward();

            // webView.Stop();

            // webView.Refresh();

            RotateTransform rt = new RotateTransform();

            rt.Angle = ;

            // 支持 RenderTransform 了

            webView.RenderTransform = rt;

            // 支持 Opacity 了

            webView.Opacity = 0.3;

            // 支持 Focus 了

            // webView.Focus(FocusState.Programmatic);

        }

        void webView_FrameNavigationStarting(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationStartingEventArgs args)

        {

            // 是否取消此 url 的加载

            // args.Cancel = true;

            // args.Uri

        }

        void webView_FrameContentLoading(Windows.UI.Xaml.Controls.WebView sender, WebViewContentLoadingEventArgs args)

        {

            // args.Uri

        }

        void webView_FrameDOMContentLoaded(Windows.UI.Xaml.Controls.WebView sender, WebViewDOMContentLoadedEventArgs args)

        {

            // args.Uri

        }

        void webView_FrameNavigationCompleted(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationCompletedEventArgs args)

        {

            // 导航是否成功

            // args.IsSuccess

            // 导航失败时，失败原因的 WebErrorStatus 枚举

            // args.WebErrorStatus

        }

        void webView_NavigationStarting(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationStartingEventArgs args)

        {

            // 是否取消此 url 的加载

            // args.Cancel = true;

            // args.Uri

        }

        void webView_ContentLoading(Windows.UI.Xaml.Controls.WebView sender, WebViewContentLoadingEventArgs args)

        {

            // args.Uri

        }

        void webView_DOMContentLoaded(Windows.UI.Xaml.Controls.WebView sender, WebViewDOMContentLoadedEventArgs args)

        {

            // args.Uri

        }

        void webView_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationCompletedEventArgs args)

        {

            // 导航是否成功

            // args.IsSuccess

            // 导航失败时，失败原因的 WebErrorStatus 枚举

            // args.WebErrorStatus

        }

        // 在 WebView 尝试下载不受支持的文件时发生

        void webView_UnviewableContentIdentified(Windows.UI.Xaml.Controls.WebView sender, WebViewUnviewableContentIdentifiedEventArgs args)

        {

            // 引用页

            // args.Referrer

            // args.Uri

        }

        // 在 WebView 对 SmartScreen 筛选器报告为不安全的内容显示警告页面时发生

        void webView_UnsafeContentWarningDisplaying(Windows.UI.Xaml.Controls.WebView sender, object args)

        {

        }

        // 当脚本运行时，可能会导致 app 无响应。此事件会定期执行，然后可查看 ExecutionTime 属性，如果要暂停脚本，则将 StopPageScriptExecution 属性设置为 true 即可

        void webView_LongRunningScriptDetected(Windows.UI.Xaml.Controls.WebView sender, WebViewLongRunningScriptDetectedEventArgs args)

        {

            // 获取 WebView 执行的一个长时间运行的脚本的运行时间（单位：毫秒）

            // args.ExecutionTime

            // 是否暂停在 WebView 中执行的已运行很长时间的脚本

            // args.StopPageScriptExecution

        }

    }

}

2、演示如何通过 POST 请求和 HTTP 头加载 url
WebView/Post.xaml

<Page

    x:Class="Windows81.Controls.WebView.Post"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows81.Controls.WebView"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0">

            <WebView Name="webView" Width="800" Height="300" HorizontalAlignment="Left" />

        </StackPanel>

    </Grid>

</Page>

WebView/Post.xaml.cs

/*

 * 本例演示如何通过 POST 请求和 HTTP 头加载 url

 *

 * WebView - 内嵌浏览器

 *

 *

 * 提示：

 * 在 win8 中 WebView 会挡住所有元素（包括 AppBar），而在 win8.1 中不会再有这种情况了

 * 如果想看看 win8 中全屏 WebView 如何不挡 AppBar，以及如何使用 WebViewBrush 以达到不遮挡其他元素的目的，请参看：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html

 *

 * 注：win8 和 win8.1 中的 WebView 有很多区别，在 win8.1 中使用 WebView 请参考本系列教程，在 win8 中使用 WebView 请看考：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html

 */

using System;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.Web.Http;

namespace Windows81.Controls.WebView

{

    public sealed partial class Post : Page

    {

        public Post()

        {

            this.InitializeComponent();

            this.Loaded += Post_Loaded;

        }

        void Post_Loaded(object sender, RoutedEventArgs e)

        {

            HttpRequestMessage httpRequestMessage = new HttpRequestMessage(HttpMethod.Post, new Uri("http://localhost:39630/WebViewPost.aspx")); // 此测试 aspx 在 WebServer 项目中

            // 构造 post 数据（无法 form 提交，因为试了很久，无法将 ContentType 设置为 "application/x-www-form-urlencoded"）

            httpRequestMessage.Content = new HttpStringContent("hello webabcd");

            // 构造 http header 数据

            httpRequestMessage.Headers.Append("myHeader", "hello header");

            // NavigateWithHttpRequestMessage() - 通过 POST 请求和 HTTP 头加载 url

            webView.NavigateWithHttpRequestMessage(httpRequestMessage);

        }

    }

}

服务端：
WebServer/WebViewPost.aspx.cs

/*

 * 用于 WebView 演示如何通过 POST 请求和 HTTP 头加载 url

 */

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace WebServer

{

    public partial class WebViewPost : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            Request.InputStream.Position = ;

            StreamReader str = new StreamReader(Request.InputStream);

            string postData = str.ReadToEnd();

            str.Dispose();

            // 显示 post 过来的数据

            Response.Write("post data: " + postData);

            Response.Write("<br />");

            // 显示请求的一个自定义的 http 头

            Response.Write("my header: " + Request.Headers["myHeader"]);

        }

    }

}

3、演示 WebView 如何与 JavaScript 交互
WebView/Interact.xaml

<Page

    x:Class="Windows81.Controls.WebView.Interact"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows81.Controls.WebView"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0">

            <TextBlock Name="lblMsg" FontSize="14.667" />

            <Button Name="btnInvokeJavaScript" Content="app 调用 WebView 加载内容中的 JavaScript 函数" Click="btnInvokeJavaScript_Click" Margin="0 10 0 0" />

            <Button Name="btnAccessDOM" Content="通过 eval 访问 DOM" Click="btnAccessDOM_Click" Margin="0 10 0 0" />

            <Button Name="btnRegisterJavaScript" Content="通过 eval 向页面中注册 JavaScript 脚本" Click="btnRegisterJavaScript_Click" Margin="0 10 0 0" />

            <!--

                通过 ms-appx-web 加载包内的 html 页面

            -->

            <WebView Name="webView" Width="400" Height="300" Source="ms-appx-web:///Controls/WebView/WebViewInteract.html" HorizontalAlignment="Left" Margin="0 10 0 0" />

        </StackPanel>

    </Grid>

</Page>

WebView/Interact.xaml.cs

/*

 * 本例演示 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 以达到不遮挡其他元素的目的，请参看：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html

 *

 * 注：win8 和 win8.1 中的 WebView 有很多区别，在 win8.1 中使用 WebView 请参考本系列教程，在 win8 中使用 WebView 请看考：http://www.cnblogs.com/webabcd/archive/2013/03/04/2942242.html

 */

/*

 * 特别注意：

 * 1、在 win8.1 中如果要允许外部网页引发 ScriptNotify 事件，则必须在 appxmanifest 中设置允许的 URI，必须是 https 协议的，类似如下

 *    <ApplicationContentUriRules>

 *       <Rule Match="https://aaa.aaa.aaa" Type="include" />

 *    </ApplicationContentUriRules>

 * 2、如果使用的是本地 html 数据则无此限制，比如通过 NavigateToString 或 ms-appx-web 来加载 html 时

 * 3、另外如果是 http 的话，可以将 html 下载到本地，然后加载此 html，而 html 中的 url 引用则可以引用远程的（如果需要替换 html 中的 url 引用则可以参考 Local.xaml 的方式）

 */

using System;

using System.Collections.Generic;

using Windows.UI.Popups;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace Windows81.Controls.WebView

{

    public sealed partial class Interact : Page

    {

        public Interact()

        {

            this.InitializeComponent();

            webView.ScriptNotify += webView_ScriptNotify;

            webView.NavigationCompleted += webView_NavigationCompleted;

        }

        void webView_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationCompletedEventArgs args)

        {

            if (args.IsSuccess)

            {

                lblMsg.Text = "html title: " + webView.DocumentTitle;

                lblMsg.Text += Environment.NewLine;

                lblMsg.Text += "html backgroundColor: " + webView.DefaultBackgroundColor.ToString();

            }

        }

        async void webView_ScriptNotify(object sender, NotifyEventArgs e)

        {

            // 获取 js 传递过来的数据（js 端通向 app 传递数据的方法：window.external.notify('js to app');）

            await new MessageDialog(e.Value).ShowAsync();

        }

        // app 调用 js

        private async void btnInvokeJavaScript_Click(object sender, RoutedEventArgs e)

        {

            List<string> arguments = new List<string> { "webabcd" };

            // 调用 js 方法：sayHelloToJs('webabcd'); 并返回结果

            string result = await webView.InvokeScriptAsync("sayHelloToJs", arguments);

            await new MessageDialog(result).ShowAsync();

        }

        // 通过 eval 方式访问 DOM

        private async void btnAccessDOM_Click(object sender, RoutedEventArgs e)

        {

            // 获取 document.title 的值

            List<string> arguments = new List<string> { "document.title" };

            string result = await webView.InvokeScriptAsync("eval", arguments);

            await new MessageDialog(result).ShowAsync();

        }

        // 通过 eval 向页面中注册 JavaScript 脚本

        private async void btnRegisterJavaScript_Click(object sender, RoutedEventArgs e)

        {

            // 向 html 中注册脚本

            List<string> arguments = new List<string> { "function xxx(){return '由 app 向 html 注册的脚本返回的数据';}" };

            await webView.InvokeScriptAsync("eval", arguments);

            // 调用刚刚注册的脚本

            string result = await webView.InvokeScriptAsync("xxx", null);

            await new MessageDialog(result).ShowAsync();

        }

    }

}

HTML：
WebView/WebViewInteract.html

<!--此 html 用于演示 app 与 js 间的交互-->

<!doctype html>

<html>

<head>

    <title>I am html title</title>

    <script type='text/javascript'>

        function sayHelloToJs(name) {

            return 'app to js: ' + name;

        }

        function sayHelloToApp() {

            // 传递数据给 app

            window.external.notify('js to app');

        }

    </script>

</head>

<body>

    <input type='button' onclick='sayHelloToApp();' value='js 调用 app 中的方法' />

</body>

</html>

OK
[源码下载]

上一篇：.NET Core微服务架构学习与实践系列文章索引目录


下一篇：重新想象 Windows 8.1 Store Apps (72) - 新增控件: AppBar, CommandBar