背水一戰 Windows 10 (66) - 控件（WebView）: 監聽和處理 WebView 的事件

本文轉載自查看原文 2017-09-26 08:30 1191 UWP

作者：webabcd

介紹
背水一戰 Windows 10 之控件（WebView）

監聽頁面的進入全屏事件和退出全屏事件
監聽導航至不支持 uri 協議的事件
監聽導航至不支持類型的文件的事件
監聽用新窗口打開 uri 的事件
監聽獲取特殊權限的事件

示例
1、演示如何監聽 WebView 中的內容的進入全屏和退出全屏的事件，以及如何獲知當前 WebView 中的內容是否處於全屏狀態；如何監聽 WebView 在嘗試導航至不支持的協議的 uri 時觸發的事件；如何監聽 WebView 在嘗試導航至不支持的類型的文件時觸發的事件
Controls/WebViewDemo/demo5.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <b>i am demo5.html</b>
    <p>
        <video controls="controls" autoplay="autoplay">
            <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
        </video>
    </p>
</body>
</html>

Controls/WebViewDemo/demo6.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <b>i am demo6.html</b>
    <p>
        <a href="mycustom://abc">自定義 Uri 協議</a>
    </p>
</body>
</html>

Controls/WebViewDemo/demo7.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <b>i am demo7.html</b>
    <p>
        <a href="https://www.apple.com/cn/iphone/business/docs/iOS_Security_Guide.pdf">打開 pdf 文件</a>
    </p>
</body>
</html>

Controls/WebViewDemo/WebViewDemo7.xaml

<Page
    x:Class="Windows10.Controls.WebViewDemo.WebViewDemo7"
    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">
        <Grid Margin="10 0 10 10">

            <WebView Name="webView1" Width="400" Height="300" Source="ms-appx-web:///Controls/WebViewDemo/demo5.html" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5" />

            <WebView Name="webView2" Width="400" Height="300" Source="ms-appx-web:///Controls/WebViewDemo/demo6.html" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="420 5 5 5" />

            <WebView Name="webView3" Width="400" Height="300" Source="ms-appx-web:///Controls/WebViewDemo/demo7.html" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5 320 5 5" />

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

Controls/WebViewDemo/WebViewDemo7.xaml.cs

/*
 * WebView - 內嵌瀏覽器控件（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/）
 *     ContainsFullScreenElementChanged - WebView 中的內容進入全屏或退出全屏時觸發的事件
 *     ContainsFullScreenElement - WebView 中的內容是否處於全屏狀態
 *     UnsupportedUriSchemeIdentified - 在嘗試導航至 WebView 不支持的協議的 uri 時觸發的事件
 *     UnviewableContentIdentified - 在嘗試導航至 WebView 不支持的類型的文件時觸發的事件
 * 
 * 
 * 本例用於演示
 * 1、如何監聽 WebView 中的內容的進入全屏和退出全屏的事件，以及如何獲知當前 WebView 中的內容是否處於全屏狀態
 * 2、如何監聽 WebView 在嘗試導航至不支持的協議的 uri 時觸發的事件
 * 3、如何監聽 WebView 在嘗試導航至不支持的類型的文件時觸發的事件
 */

using System;
using Windows.System;
using Windows.UI.Popups;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.WebViewDemo
{
    public sealed partial class WebViewDemo7 : Page
    {
        public WebViewDemo7()
        {
            this.InitializeComponent();

            webView1.ContainsFullScreenElementChanged += WebView1_ContainsFullScreenElementChanged;
            webView2.UnsupportedUriSchemeIdentified += WebView2_UnsupportedUriSchemeIdentified;
            webView3.UnviewableContentIdentified += WebView3_UnviewableContentIdentified;
        }

        // WebView 中的內容進入全屏或退出全屏時觸發的事件
        private void WebView1_ContainsFullScreenElementChanged(WebView sender, object args)
        {
            ApplicationView applicationView = ApplicationView.GetForCurrentView();

            // WebView 中的內容處於全屏狀體
            if (sender.ContainsFullScreenElement)
            {
                // 將 app 設置為全屏模式
                applicationView.TryEnterFullScreenMode();
            }
            else
            {
                // 將 app 退出全屏模式
                applicationView.ExitFullScreenMode();
            }
        }

        // 在嘗試導航至 WebView 不支持的協議的 uri 時觸發的事件
        private async void WebView2_UnsupportedUriSchemeIdentified(WebView sender, WebViewUnsupportedUriSchemeIdentifiedEventArgs args)
        {
            // 交由我處理吧（否則的話系統會彈出對話框，以便跳轉至支持此協議的其他 app 或者在商店搜索支持此協議的 app）
            args.Handled = true;

            // 嘗試導航至的 uri
            Uri myUri = args.Uri;
            await new MessageDialog(myUri.ToString(), "自定義 uri").ShowAsync();
        }

        // 在嘗試導航至 WebView 不支持的類型的文件時觸發的事件
        private async void WebView3_UnviewableContentIdentified(WebView sender, WebViewUnviewableContentIdentifiedEventArgs args)
        {
            // 文件類型，本例中此值為 "application/pdf"
            string mediaType = args.MediaType;

            // 嘗試導航至的 uri（本例中此值為 https://www.apple.com/cn/iphone/business/docs/iOS_Security_Guide.pdf）
            Uri uri = args.Uri;

            // uri 的 referrer（本例中此值為 https://www.apple.com/cn/iphone/business/docs/iOS_Security_Guide.pdf 並不是 uri 的 referrer，為啥？）
            Uri referrer = args.Referrer;

            if (args.Uri.AbsolutePath.EndsWith(".pdf"))
            {
                // 通過 launcher 打開 pdf 文件
                if (await Launcher.LaunchUriAsync(args.Uri))
                {
                  
                }
                else
                {
                
                }
            }
        }
    }
}

2、演示如何監聽 WebView 在嘗試用新開窗口打開 uri 時觸發的事件；如何監聽 WebView 在嘗試獲取特殊權限時觸發的事件，比如地理位置等
Controls/WebViewDemo/demo8.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <b>i am demo8.html</b>
    <p>
        <a href="https://www.baidu.com/" target="_blank">新開窗口打開 https://www.baidu.com/</a>
    </p>
</body>
</html>

Controls/WebViewDemo/demo9.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <b>i am demo9.html</b>

    <script type="text/javascript">

        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition
            (
                function (p)
                {

                },
                function (e)
                {

                }
            );
        }

    </script>
</body>
</html>

Controls/WebViewDemo/WebViewDemo8.xaml

<Page
    x:Class="Windows10.Controls.WebViewDemo.WebViewDemo8"
    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">
        <Grid Margin="10 0 10 10">

            <WebView Name="webView1" Width="400" Height="300" Source="ms-appx-web:///Controls/WebViewDemo/demo8.html" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5" />

            <WebView Name="webView2" Width="400" Height="300" Source="ms-appx-web:///Controls/WebViewDemo/demo9.html" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="420 5 5 5" />

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

Controls/WebViewDemo/WebViewDemo8.xaml.cs

/*
 * WebView - 內嵌瀏覽器控件（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/）
 *     NewWindowRequested - 在嘗試用新開窗口打開 uri 時觸發的事件
 *     PermissionRequested - 在嘗試獲取特殊權限時觸發的事件，比如地理位置等
 * 
 * 
 * 本例用於演示
 * 1、如何監聽 WebView 在嘗試用新開窗口打開 uri 時觸發的事件
 * 2、如何監聽 WebView 在嘗試獲取特殊權限時觸發的事件，比如地理位置等
 */

using System;
using Windows.UI.Popups;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.WebViewDemo
{
    public sealed partial class WebViewDemo8 : Page
    {
        public WebViewDemo8()
        {
            this.InitializeComponent();

            webView1.NewWindowRequested += WebView1_NewWindowRequested;
            webView2.PermissionRequested += WebView2_PermissionRequested;
        }

        // 在嘗試用新開窗口打開 uri 時觸發的事件
        private async void WebView1_NewWindowRequested(WebView sender, WebViewNewWindowRequestedEventArgs args)
        {
            // 交由我處理吧（否則的話系統會用瀏覽器打開）
            args.Handled = true;

            // 需要新開窗口的 uri（本例中此值為 https://www.baidu.com/）
            Uri uri = args.Uri;

            // uri 的 referrer（本例中此值為 https://www.baidu.com/ 並不是 uri 的 referrer，為啥？）
            Uri referrer = args.Referrer;

            await new MessageDialog(uri.ToString(), "需要新開窗口的 uri").ShowAsync();
        }

        // 在嘗試獲取特殊權限時觸發的事件，比如地理位置等
        private void WebView2_PermissionRequested(WebView sender, WebViewPermissionRequestedEventArgs args)
        {
            /*
             * WebViewPermissionRequest - 特殊權限請求對象
             *     PermissionType - 特殊權限類型
             *     WebViewPermissionState - 特殊權限請求的狀態（Unknown, Defer, Allow, Deny）
             *     Uri - 請求特殊權限的 uri
             *     Allow() - 授予請求的權限
             *     Deny() - 拒絕請求的權限
             *     Defer() - 延遲決定是否授予
             */
            WebViewPermissionRequest permissionRequest = args.PermissionRequest;
        }
    }
}

OK
[源碼下載]

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。