uwp javascript x-ms-webview webkitfullscreenchange 事件

Question

我正在使用 x-ms-webview 来显示嵌入式媒体网站，它工作得很好，问题是当用户想要进入全屏时我无法处理全屏事件。在 iframe 中，我可以使用 webkitfullscreenchange 来处理这个问题，但是使用 x-ms-webview 似乎不起作用。任何人都可以向我解释为什么以及如何处理全屏事件来自 x-ms-webview 中的媒体？谢谢

Answer 1

我们可以通过使用 InvokeScriptAsync 方法调用或注入脚本到 web 视图内容，以及 ScriptNotify 事件从 web 获取信息来与 web 视图的内容进行交互查看内容。

要在 Web 视图内容中调用 onwebkitfullscreenchange 事件，请使用 InvokeScriptAsync 方法。

To enable an external web page to fire the ScriptNotify event when calling window.external.notify, you must include the page's URI in the ApplicationContentUriRules section of the app manifest. (You can do this in Microsoft Visual Studio on the Content URIs tab of the Package.appxmanifest designer.) The URIs in this list must use HTTPS, and may contain subdomain wildcards (for example, https://.microsoft.com) but they cannot contain domain wildcards (for example, https://.com and https://.). The manifest requirement does not apply to content that originates from the app package, uses an ms-local-stream:// URI, or is loaded using NavigateToString.

有关详细信息，请参阅 Interacting with web view content。

例如：

<x-ms-webview id="webview" src="https://www.....com" width="1920" height="1080"></x-ms-webview>
<script src="js/main.js"></script>

js代码：

(function (evt) {
    "use strict"
    var ViewManagement = Windows.UI.ViewManagement;
    var FullScreenSystemOverlayMode = ViewManagement.FullScreenSystemOverlayMode;
    var ApplicationView = ViewManagement.ApplicationView;
    var view = ApplicationView.getForCurrentView();
    var webview = document.getElementById("webview");;
    webview.addEventListener("MSWebViewFrameDOMContentLoaded", function () {
        var op = webview.invokeScriptAsync("eval", "document.onwebkitfullscreenchange = function (evt) { window.external.notify('123'); }");
        op.start();
    });
    webview.addEventListener("MSWebViewScriptNotify", function (evt) {
        if (view.isFullScreen) {
            view.exitFullScreenMode();
        }
        else {
            view.tryEnterFullScreenMode();
        }
    });
})()

uwp javascript x-ms-webview webkitfullscreenchange 事件

uwp javascript x-ms-webview webkitfullscreenchange event

javascript

webview

uwp

fullscreen