javascript - uwp javascript x-ms-webview webkitfullscreenchange 事件

Question

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

Answer 1

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

要在 Web View 内容中调用 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();
        }
    });
})()