Блог

Главная - Вопросы по программированию - Как внедрить webkitRequestFullscreen() в UWP WebView

Как внедрить webkitRequestFullscreen() в UWP WebView

#javascript #c# #webview #uwp

#javascript #c# #webview #uwp

Вопрос:

У меня есть элемент управления WebView в приложении UWP, который загружает URL страницы трансляции Steam. Это работает хорошо, и у меня также есть полноэкранная кнопка для переключения всего окна на полноэкранный режим.

Но трансляция Steam имеет свою собственную полноэкранную кнопку переключения, которую я хотел бы щелкнуть программно, чтобы при нажатии моей полноэкранной кнопки и окно, и трансляция переключались на полноэкранный режим.

Я пытался добиться этого с помощью внедрения JS, но, похоже, webkitRequestFullscreen() функция отвечает, только если она вызывается внутри обработчика событий. Как я могу внедрить обработчик событий в WebView и вызвать его?

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();" });

Комментарии:

1. Я не думаю, что это возможно. webkitRequestFullscreen будет работать, только если он был вызван из обработчика событий (мыши?) на веб-странице. На самом деле вам нужно щелкнуть в WebView, чтобы этот запрос сработал, чего вы не делаете.

2. @DecadeMoon Может быть, возможно имитировать событие щелчка мыши по координатам кнопки HTML?

3. Вряд ли, это ограничение безопасности не предназначено для обхода. Если только вы не имеете в виду имитировать щелчок мыши в XAML в webview в определенном месте? Возможно.

Ответ №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
    }
}

Таким образом, похоже, что трансляция выполняется в полноэкранном режиме, и когда нажимается моя собственная кнопка, строка заголовка исчезает, и она переходит в надлежащий полноэкранный режим.

WebView