原文:

背水一战 Windows 10 (64) - 控件（WebView）: 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互

作者：

介绍

背水一战 Windows 10 之 控件（WebView）

• 加载指定 HttpMethod 的请求
• 自定义请求的 http header
• app 与 js 的交互

示例

1、演示 WebView 如何加载指定 HttpMethod 的请求以及如何自定义请求的 http header

WebApi/Controllers/WebViewPostController.cs

/* * 用于 WebView 演示“如何加载指定 HttpMethod 的请求，以及如何自定义请求的 http header” */using System.IO;using System.Linq;using System.Net.Http;using System.Text;using System.Threading.Tasks;using System.Web.Http;namespace WebApi.Controllers{    public class WebViewPostController : ApiController    {        [HttpPost]        public async Task
        
          Post()        {            Stream stream = await this.Request.Content.ReadAsStreamAsync();            StreamReader sr = new StreamReader(stream);            string postData = sr.ReadToEnd();            sr.Dispose();            string myHeader = this.Request.Headers.GetValues("myHeader").FirstOrDefault();            HttpResponseMessage result = new HttpResponseMessage            {                Content = new StringContent($"post data: {postData}
         
 myHeader: {myHeader}", Encoding.UTF8, "text/html")            };            return result;        }    }}
        

Controls/WebViewDemo/WebViewDemo3.xaml

Controls/WebViewDemo/WebViewDemo3.xaml.cs

/* * WebView - 内嵌浏览器控件（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/） *      *      * 本例用于演示  * 1、WebView 如何加载指定 HttpMethod 的请求 * 2、WebView 如何自定义请求的 http header */ using System;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.Web.Http;namespace Windows10.Controls.WebViewDemo{    public sealed partial class WebViewDemo3 : Page    {        public WebViewDemo3()        {            this.InitializeComponent();            this.Loaded += WebViewDemo3_Loaded;        }        private void WebViewDemo3_Loaded(object sender, RoutedEventArgs e)        {            // 实例化 HttpRequestMessage（可以指定请求的 HttpMethod 以及自定义请求的 http header）            HttpRequestMessage httpRequestMessage = new HttpRequestMessage(HttpMethod.Post, new Uri("http://localhost:44914/api/webviewpost"));            // 构造 post 数据            httpRequestMessage.Content = new HttpStringContent("hello webabcd");            // 自定义 http header            httpRequestMessage.Headers.Append("myHeader", "hello header");            // 通过 NavigateWithHttpRequestMessage 加载指定的 HttpRequestMessage 对象            webView.NavigateWithHttpRequestMessage(httpRequestMessage);        }    }}

2、演示 app 与 js 的交互

Controls/WebViewDemo/WebViewJavaScript.html

Controls/WebViewDemo/WebViewDemo4.xaml

Controls/WebViewDemo/WebViewDemo4.xaml.cs

/* * WebView - 内嵌浏览器控件（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/） *     InvokeScriptAsync() - 调用指定的 js 函数，并返回 js 函数的返回值 *     ScriptNotify - 收到 js 通过 window.external.notify('') 传递过来的数据时触发的事件 *     AllowedScriptNotifyUris - 允许触发 ScriptNotify 事件的 uri 列表 * *  * 本例用于演示 app 与 js 的交互 *  * 注意：关于如何将 windows runtime component 中定义的对象注册到 WebView 加载的页面，以便通过 js 调用 winrt，请参见 WebViewDemo8.xaml.cs 中的相关示例 *//* * 特别注意：各种 uri schema 对于 ScriptNotify 的支持情况如下 * 1、http:// 不支持 * 2、https:// 支持，需要在 appxmanifest 中设置允许的 URI（http 的不行，只能是 https 的），也可以通过 WebView 的 AllowedScriptNotifyUris 属性来设置或获取 *    
        
          *       
          *    
         * 3、ms-appdata:/// 不支持 * 4、ms-appx-web:/// 支持 * 5、ms-local-stream:// 支持 */using System;using System.Collections.Generic;using Windows.UI;using Windows.UI.Popups;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Controls.WebViewDemo{    public sealed partial class WebViewDemo4 : Page    {        public WebViewDemo4()        {            this.InitializeComponent();            webView.ScriptNotify += webView_ScriptNotify;            webView.NavigationCompleted += webView_NavigationCompleted;        }        void webView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)        {            if (args.IsSuccess)            {                // 获取 html 标题                lblMsg.Text = "html title: " + webView.DocumentTitle;                lblMsg.Text += Environment.NewLine;                // 获取或设置 html 背景色                webView.DefaultBackgroundColor = Colors.Orange;                lblMsg.Text += "html backgroundColor: " + webView.DefaultBackgroundColor.ToString();            }        }        // 收到 js 通过 window.external.notify('') 传递过来的数据时触发的事件        private async void webView_ScriptNotify(object sender, NotifyEventArgs e)        {            // e.Value - 获取 js 传递过来的数据            // e.CallingUri - 触发此事件的页面的 uri            await new MessageDialog(e.CallingUri.ToString() + " " + e.Value).ShowAsync();        }        // app 调用 js        private async void btnAppToJavaScript_Click(object sender, RoutedEventArgs e)        {            List
        
          arguments = new List
         
           { "webabcd" };            // 调用 js 方法：sayHelloToJs('webabcd'); 并返回结果            string result = await webView.InvokeScriptAsync("appToJs", arguments);            await new MessageDialog(result).ShowAsync();        }        // 通过 eval 访问 DOM        private async void btnEval_Click(object sender, RoutedEventArgs e)        {            // 设置 document.title 的值（用于演示如何通过 eval 设置 DOM）            List
          
            arguments = new List
           
             { "document.title = 'hahaha';" };            await webView.InvokeScriptAsync("eval", arguments);            // 获取 document.title 的值（用于演示如何通过 eval 获取 DOM）            arguments = new List
            
              { "document.title;" };            string result = await webView.InvokeScriptAsync("eval", arguments);            await new MessageDialog(result).ShowAsync();        }        // 通过 eval 向 html 注册 JavaScript 脚本        private async void btnRegisterJavaScript_Click(object sender, RoutedEventArgs e)        {            // 向 html 注册脚本            List
             
               arguments = new List
              
                { "function xxx(){return '由 app 向 html 注册的脚本返回的数据';}" }; await webView.InvokeScriptAsync("eval", arguments); // 调用刚刚注册的脚本 string result = await webView.InvokeScriptAsync("xxx", null); await new MessageDialog(result).ShowAsync(); } }}
              
             
            
           
          
         
        

 

OK