從新想象 Windows 8.1 Store Apps (81) - 控件加強: 加載本地 html, 智能替換 html 中的 url 引用, 經過 Share Contract 分享 WebVie

時間 2019-11-24

標籤從新想象 windows 8.1 store apps 控件加強加載本地 html 智能替換 url 引用經過 share contract 分享 webvie 欄目 Windows 简体版

原文原文鏈接

原文: 從新想象 Windows 8.1 Store Apps (81) - 控件加強: 加載本地 html, 智能替換 html 中的 url 引用, 經過 Share Contract 分享 WebView 中的內容, 爲 WebView 截圖

[源碼下載]

javascript

從新想象 Windows 8.1 Store Apps (81) - 控件加強: 加載本地 html, 智能替換 html 中的 url 引用, 經過 Share Contract 分享 WebView 中的內容, 爲 WebView 截圖

做者：webabcd

介紹
從新想象 Windows 8.1 Store Apps 之控件加強css

WebView 加載本地 html，智能替換 html 中的 url 引用
WebView 經過 Share Contract 分享
WebView 截圖

示例
一、演示如何經過 WebView 加載本地 html, 以及智能替換 html 中的 url 引用
WebView/Local.xamlhtml

<Page
    x:Class="Windows81.Controls.WebView.Local"
    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="btnHtml" Content="解析指定的 html 字符串" Click="btnHtml_Click" />
            <Button Name="btnPackageHtml" Content="解析 package 中的 html" Margin="0 10 0 0" Click="btnPackageHtml_Click" />
            <Button Name="btnAppDataHtml" Content="解析 appData 中的 html" Margin="0 10 0 0" Click="btnAppDataHtml_Click" />

            <Button Name="btnSmart" Content="智能替換 html 中的 url 引用" Margin="0 10 0 0" Click="btnSmart_Click" />

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

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

WebView/Local.xaml.cshtml5

/*
 * 本例演示如何經過 WebView 加載指定的 html 字符串，加載 package 中的 html，加載 appData 中的 html
 * 還會演示如何之內容流的方式加載 html 數據，其有以下做用：
 * 一、能夠實現徹底從本地加載所有頁面數據（包括 html，js，css，圖片等）
 * 二、能夠實現智能替換 html 中的 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 System.Threading.Tasks;
using Windows.Foundation;
using Windows.Storage;
using Windows.Storage.Streams;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.Web;
using Windows.Web.Http;

namespace Windows81.Controls.WebView
{
    public sealed partial class Local : Page
    {
        public Local()
        {
            this.InitializeComponent();
        }

        private void btnHtml_Click(object sender, RoutedEventArgs e)
        {
            // 解析指定的 html 字符串
            webView.NavigateToString("<html><body>I am webabcd</body></html>");
        }

        private void btnPackageHtml_Click(object sender, RoutedEventArgs e)
        {
            // 解析 package 中的 html
            string url = "ms-appx-web:///Controls/WebView/HtmlDemo.html";
            webView.Navigate(new Uri(url));
        }

        private async void btnAppDataHtml_Click(object sender, RoutedEventArgs e)
        {
            // 將程序包內的 html 文件複製到 ApplicationData 中的 LocalFolder
            StorageFolder localFolder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("webabcdTest", CreationCollisionOption.OpenIfExists);
            StorageFile htmlFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Controls/WebView/HtmlDemo.html"));
            await htmlFile.CopyAsync(localFolder, "HtmlDemo.html", NameCollisionOption.ReplaceExisting);

            // 解析 appData 中的 html
            string url = "ms-appdata:///local/webabcdTest/HtmlDemo.html";
            webView.Navigate(new Uri(url));
        }


        // 之內容流的方式加載 html 數據
        // 智能替換 html 中的 url 引用
        // 在本例中，html 頁面來自本地，html 中的引用來自遠程
        private void btnSmart_Click(object sender, RoutedEventArgs e)
        {
            // 構造可傳遞給 NavigateToLocalStreamUri() 的 URI
            Uri url = webView.BuildLocalStreamUri("contentIdentifier", "/Controls/WebView/HtmlDemo.html");
            // 實例化一個實現 IUriToStreamResolver 接口的類
            StreamUriWinRTResolver myResolver = new StreamUriWinRTResolver();

            // 全部 url（包括 html 的 url 以及 html 內全部引用的 url）都會經過 StreamUriWinRTResolver 來返回數據流
            webView.NavigateToLocalStreamUri(url, myResolver);
        }
    }

    // 實現 IUriToStreamResolver 接口（用於將 url 之內容流的方式返回）
    public sealed class StreamUriWinRTResolver : IUriToStreamResolver
    {
        // IUriToStreamResolver 接口只有一個須要實現的方法
        // 根據 uri 返回對應的內容流
        public IAsyncOperation<IInputStream> UriToStreamAsync(Uri uri)
        {
            string path = uri.AbsolutePath;
            return GetContent(path).AsAsyncOperation();
        }

        // 根據 uri 返回對應的內容流
        private async Task<IInputStream> GetContent(string path)
        {
            string url;

            // 按需求修改 url 引用
            if (path == "/Controls/WebView/HtmlDemo.html")
                url = "ms-appx://" + path;
            else
                url = "http://ajax.googleapis.com" + path;

            if (url.StartsWith("http"))
            {
                // http 方式獲取內容數據
                HttpResponseMessage response = await new HttpClient().GetAsync(new Uri(url), HttpCompletionOption.ResponseHeadersRead);
                return await response.Content.ReadAsInputStreamAsync();
            }
            else
            {
                // 獲取本地數據
                StorageFile fileRead = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(new Uri(url, UriKind.Absolute));
                return await fileRead.OpenAsync(FileAccessMode.Read);
            }
        }
    }
}

本地 Html:
WebView/HtmlDemo.htmljava

<!--此 html 用於演示如何經過 WebView 加載本地 html，以及如何之內容流的方式加載 html 數據-->

<!doctype html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <p>i am html2</p>
    <p id="lblMsg"></p>
    <script type="text/javascript">
        document.getElementById("lblMsg").innerHTML = window.jQuery;
    </script>
</body>
</html>

二、演示如何經過 Share Contract 分享 WebView 中的內容（複製到剪切板也是同理）
WebView/Share.xamljquery

<Page
    x:Class="Windows81.Controls.WebView.Share"
    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="btnShare" Content="經過 Share Contract 分享 WebView 中的被選中的文本內容" Click="btnShare_Click" />

            <WebView Name="webView" Width="400" Height="300" Source="http://webabcd.cnblogs.com/" HorizontalAlignment="Left" Margin="0 10 0 0" />

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

WebView/Share.xaml.csios

/*
 * 本例演示如何經過 Share Contract 分享 WebView 中的內容（複製到剪切板也是同理）
 * 
 * WebView - 內嵌瀏覽器
 *     CaptureSelectedContentToDataPackageAsync() - 獲取 DataPackage 對象
 *     DataRequested - 共享操做開始時觸發的事件（事件參數 DataRequestedEventArgs）
 * 
 * DataRequestedEventArgs - 共享操做開始時觸發的事件
 *     GetDeferral() - 獲取異步操做對象，同時開始異步操做，以後經過 Complete() 通知完成異步操做
 * 
 * 關於 DataPackage 等共享相關的知識點請參見：http://www.cnblogs.com/webabcd/archive/2013/07/04/3171085.html
 * 
 * 
 * 
 * 提示：
 * 在 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.ApplicationModel.DataTransfer;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows81.Controls.WebView
{
    public sealed partial class Share : Page
    {
        private DataTransferManager _dataTransferManager;

        public Share()
        {
            this.InitializeComponent();
        }

        private void btnShare_Click(object sender, RoutedEventArgs e)
        {
            _dataTransferManager = DataTransferManager.GetForCurrentView();
            _dataTransferManager.DataRequested += _dataTransferManager_DataRequested;

            DataTransferManager.ShowShareUI();
        }

        // 分享 WebView 中的被選中的文本內容
        async void _dataTransferManager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
        {
            DataRequest request = args.Request;
            DataRequestDeferral deferral = args.Request.GetDeferral();

            DataPackage dataPackage = await webView.CaptureSelectedContentToDataPackageAsync();
            DataPackageView dataPackageView = dataPackage.GetView();

            // 若是用戶選擇了一段內容，則經過 WebView.CaptureSelectedContentToDataPackageAsync() 獲取到的數據裏就會有 StandardDataFormats.Text 格式的內容，此內容就是用戶所選中的內容
            if (dataPackageView.Contains(StandardDataFormats.Text))
            {
                dataPackage.Properties.Title = "Title";
                dataPackage.Properties.Description = "Description";

                request.Data = dataPackage;
            }
            else
            {
                request.FailWithDisplayText("沒有選中任何內容");
            }

            _dataTransferManager.DataRequested -= _dataTransferManager_DataRequested;

            deferral.Complete();
        }
    }
}

三、演示如何對 WebView 中的內容截圖
WebView/Capture.xamlweb

<Page
    x:Class="Windows81.Controls.WebView.Capture"
    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="btnCapture" Content="對此 WebView 中的當前內容截圖" Click="btnCapture_Click" />

            <WebView Name="webView" Width="400" Height="300" Source="http://webabcd.cnblogs.com/" HorizontalAlignment="Left" Margin="0 10 0 0" />

            <StackPanel Margin="0 10 0 0" Orientation="Horizontal">
                <Image Name="imageOriginal" Width="400" Height="300" HorizontalAlignment="Left" />
                <Image Name="imageSmall" Width="400" Height="300" HorizontalAlignment="Left" Margin="10 0 0 0" />
            </StackPanel>

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

WebView/Capture.xaml.csajax

/*
 * 本例演示如何對 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 System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Graphics.Imaging;
using Windows.Storage.Streams;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;

namespace Windows81.Controls.WebView
{
    public sealed partial class Capture : Page
    {
        public Capture()
        {
            this.InitializeComponent();
        }

        private async void btnCapture_Click(object sender, RoutedEventArgs e)
        {
            // 對 WebView 中的內容截圖，並將原始圖像數據放入內存流
            InMemoryRandomAccessStream ms = new InMemoryRandomAccessStream();
            await webView.CapturePreviewToStreamAsync(ms);

            // 顯示原始截圖
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.SetSource(ms);
            imageOriginal.Source = bitmapImage;



            // 定義縮略圖的大小（最長邊定義爲 180）
            int longlength = 180, width = 0, height = 0;
            double srcwidth = webView.ActualWidth, srcheight = webView.ActualHeight;
            double factor = srcwidth / srcheight;
            if (factor < 1)
            {
                height = longlength;
                width = (int)(longlength * factor);
            }
            else
            {
                width = longlength;
                height = (int)(longlength / factor);
            }

            // 顯示原始截圖的縮略圖
            BitmapSource small = await resize(width, height, ms);
            imageSmall.Source = small;
        }

        // 返回指定原圖的縮略圖數據
        private async Task<BitmapSource> resize(int width, int height, IRandomAccessStream source)
        {
            WriteableBitmap small = new WriteableBitmap(width, height);
            BitmapDecoder decoder = await BitmapDecoder.CreateAsync(source);
            BitmapTransform transform = new BitmapTransform();
            transform.ScaledHeight = (uint)height;
            transform.ScaledWidth = (uint)width;
            PixelDataProvider pixelData = await decoder.GetPixelDataAsync(
                BitmapPixelFormat.Bgra8,
                BitmapAlphaMode.Straight,
                transform,
                ExifOrientationMode.RespectExifOrientation,
                ColorManagementMode.DoNotColorManage);
            pixelData.DetachPixelData().CopyTo(small.PixelBuffer);

            return small;
        }
    }
}