您的位置：首页 > 理论基础 > 计算机网络

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

2017-09-21 14:31 936 查看

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

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

作者：webabcd

介绍
背水一战 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<HttpResponseMessage> 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}<br /> myHeader: {myHeader}", Encoding.UTF8, "text/html")
};

return result;
}
}
}

Controls/WebViewDemo/WebViewDemo3.xaml

<Page
x:Class="Windows10.Controls.WebViewDemo.WebViewDemo3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.WebViewDemo"
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="10 0 0 0">

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

</StackPanel>
</Grid>
</Page>

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

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

<!doctype html>
<html>
<head>
<title>i am title</title>
<script type='text/javascript'>

// app 调用 js 函数
function appToJs(name) {
return 'app to js: ' + name;
}

// js 传递数据到 app
function jsToApp() {
window.external.notify('js to app');
}

</script>
</head>
<body>
<input type='button' onclick='jsToApp();' value='js 传递数据到 app' />
</body>
</html>

Controls/WebViewDemo/WebViewDemo4.xaml

<Page
x:Class="Windows10.Controls.WebViewDemo.WebViewDemo4"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.WebViewDemo"
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="10 0 10 10">

<TextBlock Name="lblMsg" Margin="5" />

<Button Name="btnAppToJavaScript" Content="app 调用 WebView 加载的 html 中的 JavaScript 函数" Click="btnAppToJavaScript_Click" Margin="5" />

<Button Name="btnEval" Content="通过 eval 访问 DOM" Click="btnEval_Click" Margin="5" />

<Button Name="btnRegisterJavaScript" Content="通过 eval 向 html 注册 JavaScript 脚本" Click="btnRegisterJavaScript_Click" Margin="5" />

<!--
通过 ms-appx-web 加载包内的 html 页面
-->
<WebView Name="webView" Width="480" Height="320" Source="ms-appx-web:///Controls/WebViewDemo/WebViewJavaScript.html" HorizontalAlignment="Left" Margin="5" />

</StackPanel>
</Grid>
</Page>

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 属性来设置或获取
*    <ApplicationContentUriRules>
*       <Rule Match="https://aaa.aaa.aaa" Type="include" />
*    </ApplicationContentUriRules>
* 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<string> arguments = new List<string> { "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<string> arguments = new List<string> { "document.title = 'hahaha';" };
await webView.InvokeScriptAsync("eval", arguments);

// 获取 document.title 的值（用于演示如何通过 eval 获取 DOM）
arguments = new List<string> { "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<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();
}
}
}

OK
[源码下载]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航