World War I Windows 10 (64) and World War I 64
[Download source code]
Backwater world war I Windows 10 (64)-control (WebView): Load requests of the specified HttpMethod, customize the http header of the request, and interaction between the app and js
Author: webabcd
Introduction
WebView)
- Load the request of the specified HttpMethod
- Http header of the custom request
- Interaction between apps and js
Example
1. demonstrate how WebView loads requests with the specified HttpMethod and how to customize the http header of the request
WebApi/Controllers/WebViewPostController. cs
/ *
* For WebView demo "How to load a request with a specified HttpMethod, and how to customize the request's 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-Embedded browser control (inherited from FrameworkElement, see / Controls / BaseControl / FrameworkElementDemo /)
*
*
* This example is for demonstration
* 1. How WebView loads the request for the specified HttpMethod
* 2. How WebView customizes the request's 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)
{
// Instantiate HttpRequestMessage (you can specify the requested HttpMethod and the custom request's http header)
HttpRequestMessage httpRequestMessage = new HttpRequestMessage (HttpMethod.Post, new Uri ("http: // localhost: 44914 / api / webviewpost"));
// construct post data
httpRequestMessage.Content = new HttpStringContent ("hello webabcd");
// custom http header
httpRequestMessage.Headers.Append ("myHeader", "hello header");
// Load the specified HttpRequestMessage object via NavigateWithHttpRequestMessage
webView.NavigateWithHttpRequestMessage (httpRequestMessage);
}
}
}
2. Demonstrate the interaction between the app and js
Controls/WebViewDemo/WebViewJavaScript.html
<!-This html is used to demonstrate the interaction between app and js->
<! doctype html>
<html>
<head>
<title> i am title </ title>
<script type = 'text / javascript'>
// app calls js function
function appToJs (name) {
return 'app to js:' + name;
}
// js passes data to the app
function jsToApp () {
window.external.notify ('js to app');
}
</ script>
</ head>
<body>
<input type = 'button' onclick = 'jsToApp ();' value = 'js pass data to 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 calls the JavaScript function in the html loaded by WebView" Click = "btnAppToJavaScript_Click" Margin = "5" />
<Button Name = "btnEval" Content = "Accessing the DOM via eval" Click = "btnEval_Click" Margin = "5" />
<Button Name = "btnRegisterJavaScript" Content = "Register JavaScript script with html via eval" Click = "btnRegisterJavaScript_Click" Margin = "5" />
<!-
Load html page in package via ms-appx-web
->
<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-Embedded browser control (inherited from FrameworkElement, see / Controls / BaseControl / FrameworkElementDemo /)
* InvokeScriptAsync ()-call the specified js function and return the return value of the js function
* ScriptNotify-event triggered when js receives data passed through window.external.notify ('')
* AllowedScriptNotifyUris-list of uris allowed to trigger ScriptNotify events
*
*
* This example is used to demonstrate the interaction between app and js
*
* Note: For how to register the objects defined in the windows runtime component to the page loaded by WebView so that winrt can be called through js, please refer to the related example in WebViewDemo8.xaml.cs
* /
/ *
* Special Note: ScriptNotify support for various uri schemas is as follows
* 1, http: // is not supported
* 2. https: // support, you need to set the allowed URI in appxmanifest (http does not work, only https), or you can set or get it through the AllowedScriptNotifyUris property of WebView
* <ApplicationContentUriRules>
* <Rule Match = "https://aaa.aaa.aaa" Type = "include" />
* </ ApplicationContentUriRules>
* 3.ms-appdata: /// not supported
* 4, ms-appx-web: /// support
* 5.ms-local-stream: // support
* /
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)
{
// get html title
lblMsg.Text = "html title:" + webView.DocumentTitle;
lblMsg.Text + = Environment.NewLine;
// Get or set the html background color
webView.DefaultBackgroundColor = Colors.Orange;
lblMsg.Text + = "html backgroundColor:" + webView.DefaultBackgroundColor.ToString ();
}
}
// Event fired when receiving data passed by js through window.external.notify ('')
private async void webView_ScriptNotify (object sender, NotifyEventArgs e)
{
// e.Value-get the data passed by js
// e.CallingUri-the uri of the page that triggered this event
await new MessageDialog (e.CallingUri.ToString () + "" + e.Value) .ShowAsync ();
}
// app calls js
private async void btnAppToJavaScript_Click (object sender, RoutedEventArgs e)
{
List <string> arguments = new List <string> {"webabcd"};
// Call the js method: sayHelloToJs ('webabcd'); and return the result
string result = await webView.InvokeScriptAsync ("appToJs", arguments);
await new MessageDialog (result) .ShowAsync ();
}
// access the DOM via eval
private async void btnEval_Click (object sender, RoutedEventArgs e)
{
// Set the value of document.title (to demonstrate how to set the DOM via eval)
List <string> arguments = new List <string> {"document.title = 'hahaha';"};
await webView.InvokeScriptAsync ("eval", arguments);
// Get the value of document.title (to demonstrate how to get the DOM via eval)
arguments = new List <string> {"document.title;"};
string result = await webView.InvokeScriptAsync ("eval", arguments);
await new MessageDialog (result) .ShowAsync ();
}
// Register JavaScript script with html via eval
private async void btnRegisterJavaScript_Click (object sender, RoutedEventArgs e)
{
// Register script with html
List <string> arguments = new List <string> {"function xxx () {return 'Data returned by the script registered by the app with html';}"};
await webView.InvokeScriptAsync ("eval", arguments);
// call the newly registered script
string result = await webView.InvokeScriptAsync ("xxx", null);
await new MessageDialog (result) .ShowAsync ();
}
}
}