uwp javascript x-ms-webview webkitfullscreenchange event

Question

I am using a x-ms-webview to display an embedded media website, It work great by the problem is I can't handle full screen event when user want to go to full screen. In iframe i can using webkitfullscreenchange to handle this, but with x-ms-webview seem not work. Anyone can explaint me why and How to handle full screen event came from media in x-ms-webview? Thanks

Answer 1

We can interact with the content of the web view by using the InvokeScriptAsync method to invoke or inject script into the web view content, and the ScriptNotify event to get information back from the web view content.

To invoke the onwebkitfullscreenchange event inside the web view content, use the InvokeScriptAsync method.

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.

For more info, refer Interacting with web view content.

For example:

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

The js code:

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