如何将webkitRequestFullscreen（）注入到UWP WebView中

Question

我在UWP应用中有一个WebView控件，可加载Steam广播页面URL。 它运行良好，并且我还有一个全屏按钮可以将整个窗口切换到全屏。

但是Steam广播有其自己的全屏切换按钮，我想以编程方式单击该按钮，以便当我按下全屏按钮时，窗口和广播都切换到全屏状态。

我试图通过JS注入来实现这一点，但似乎webkitRequestFullscreen()函数仅在事件处理程序中调用时才响应。 如何将事件处理程序注入WebView并调用它？

这是XAML：

<Grid Background="{StaticResource AppBackgroundColor}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>

    <WebView Grid.Row="0" x:Name="Browser" />

    <CommandBar x:Name="WatchCommandBar" Grid.Row="1" FlowDirection="LeftToRight">
        <AppBarButton Icon="FullScreen" Label="Full Screen" Tapped="AppBarFullScreenButton_Tapped" />
    </CommandBar>
</Grid>

这是C＃：

private void AppBarFullScreenButton_Tapped(object sender, RoutedEventArgs e)
{
    var view = ApplicationView.GetForCurrentView();

    if (view.IsFullScreenMode)
    {
        view.ExitFullScreenMode();
        WatchCommandBar.Visibility = Visibility.Visible;
    }
    else
    {
        view.TryEnterFullScreenMode();
        WatchCommandBar.Visibility = Visibility.Collapsed;
    }
}

我尝试过在切换到全屏模式时调用这些函数，但是它们都不起作用：

await Browser.InvokeScriptAsync("eval", new [] { "BroadcastWatch.m_playerUI.ToggleFullscreen();" });
await Browser.InvokeScriptAsync("eval", new [] { "document.getElementById('videoplayer').webkitRequestFullscreen();" });

Answer 1

显然，不可能注入全屏请求。 而且我也无法欺骗从理论上讲也会发出请求的鼠标单击事件。

作为一种解决方法，我在WebView完成加载后通过注入此脚本来隐藏和样式化了我不想看到的元素：

private async void Browser_HideElements(object sender, WebViewDOMContentLoadedEventArgs args)
{
    try
    {
        var elementsToHide = "#global_header, #footer_spacer, #footer_responsive_optin_spacer, #footer, #ChatWindow, .BroadcastInfoWrapper, .fullscreen_button";

        // Hide HTML elements and change styles so it looks like the broadcast is in full-screen
        // We can't call the broadcast's own toggle full-screen function
        var lines = new[]
        {
            "document.body.style.overflow = 'hidden';",
            "document.getElementById('video_wrapper').className += ' fullscreen';",
            "document.getElementById('video_content').style.padding = 0;",
            "document.getElementById('video_content').style.margin = 0;",
            "document.getElementsByClassName('pagecontent')[0].style.padding = 0;",
            "var list = document.querySelectorAll('" + elementsToHide + "');",
            "for (var i = 0; i < list.length; i++) { var e = list[i]; e.style.display = 'none'; }"
        };
        await Browser.InvokeScriptAsync("eval", new[] { string.Join(" ", lines) });
    }
    catch
    {
        // Ignore script exceptions
    }
}

因此，看起来广播正在全屏播放，当按我自己的按钮时，标题栏消失，并且进入正常的全屏显示。