背水一战 Windows 10 (66) - 控件（WebView）: 监听和处理 WebView 的事件

最新推荐文章于 2024-08-21 11:34:33 发布

weixin_34085658

最新推荐文章于 2024-08-21 11:34:33 发布

阅读量338

点赞数 1

文章标签： ui javascript ViewUI

原文: 背水一战 Windows 10 (66) - 控件（WebView）: 监听和处理 WebView 的事件

[源码下载]

背水一战 Windows 10 (66) - 控件（WebView）: 监听和处理 WebView 的事件

作者：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;
        }
    }
}