带有弹出窗口的 Windows 应用商店 HTML 应用答案

【问题标题】：Windows Store HTML app with popup window带有弹出窗口的 Windows 应用商店 HTML 应用
【发布时间】：2013-12-15 11:49:37
【问题描述】：

我正在使用 x-ms-webview 将 Web 应用程序封装在 Windows 应用商店应用程序外壳中。这工作正常，但我有一个问题。我使用 PayPal，由于 PayPal 不允许iframed，我需要在新的浏览器窗口中打开 PayPal。

在普通浏览器上这不是问题。窗口打开，当用户从 PayPal 返回时，我可以回调“opener”并更新用户帐户。

但在 Windows 应用商店应用程序中执行此操作时，window.open 会触发 IE 启动。问题是返回我的应用程序并让它知道用户完成了交易。

我的第一个想法就是使用URI activation。这种工作，但我无法知道 PayPal 页面是从常规浏览器还是应用程序启动的。我还认为将用户带到另一个应用程序进行购买会让人感到困惑。

我希望在我的应用程序中打开窗口，但我不确定如何打开一个新的x-ms-webview 作为与现有 web 视图重叠的模态窗口。

从当前 Web 视图和应用程序进行通信的最佳方式是什么？我是否可以使用postMessage 在应用程序和x-ms-webview 之间发送消息，即使 Web 视图的 src 是 http 托管站点？

感谢您的帮助。

【问题讨论】：

你有没有解决过这个问题。我正在研究一个类似的问题。我们已经使用 webview 将我们的网站包装在一个 Windows 应用程序中，并且该网站支持使用 Google、Facebook 等进行身份验证。这些服务在普通浏览器上弹出一个窗口。但在应用程序中，他们会启动 IE，因此会丢失经过身份验证的会话。

标签： javascript windows paypal webview

【解决方案1】：

我找到了解决办法。

首先，您需要为嵌入式网站使用 https 网址。原因是解决方案包括postMessage和invokeScriptAsync。

首先，我的应用中的标记看起来像这样，有一个用于应用的 web 视图和一个用于 PayPal 弹出窗口的 web 视图。

<x-ms-webview id="webview" src="https://myapp"></x-ms-webview>

<div id="paypalContainer">
    <div class="paypal-header"><button id="paypalClose" type="reset">Close</button></div>
    <div class="paypal-body"><x-ms-webview id="paypalWebView" src="about:blank"></x-ms-webview></div>
</div>

然后，当网络应用准备好使用 PayPal 时，我使用 window.external.notify 向 Windows 应用商店应用发送消息。

if (window.external && 'notify' in window.external) {
    window.external.notify(JSON.stringify({ action: 'paypal' }));
}

windows 商店应用监听 Script Notify 事件并显示 paypalWebView。

webview.addEventListener("MSWebViewScriptNotify", scriptNotify);

    function scriptNotify(e) {
        var data = JSON.parse(e.value);
        if (data.action === "paypal") {
            var loading = document.getElementById("loading-indicator");
            var container = document.getElementById("paypalContainer");
            var paypalWebView = document.getElementById("paypalWebView");
            var paypalClose = document.getElementById("paypalClose");
            if (paypalWebView.src === "about:blank") {
                paypalWebView.addEventListener('MSWebViewNavigationCompleted', function (e) {
                    loading.classList.remove('loading');

                    var successUrl = '/paypal/success';
                    if (event.target.src.indexOf(successUrl) !== -1) {
                        var operation = webview.invokeScriptAsync("updateUser");
                        operation.oncomplete = function () {
                            (new Windows.UI.Popups.MessageDialog("Your account is refreshed", "")).showAsync().done();
                        };
                        operation.start();
                    }
                });

                paypalWebView.addEventListener('MSWebViewNavigationStarting', function (e) {
                    console.log("Started loading");
                    loading.classList.add('loading');
                });

                paypalClose.addEventListener('click', function () {
                    container.classList.remove("visible");
                });
            }

            paypalWebView.src = "https://myapp/paypal/";
            container.classList.add("visible");
        }
    }

所以，基本上，当脚本通知事件触发时，我将发送的 json 字符串解析为一个对象并检查它是什么类型的操作。如果这是我第一次运行它，我会设置一些导航事件处理程序来检查 Web 视图是否到达成功页面。如果有，我会使用 incokeScriptAsync 让 Web 应用程序知道我们已完成，以便它可以刷新用户帐户以进行新付款。

我认为您可以使用类似的解决方案进行身份验证，并在身份验证后检查您的返回 URL。

希望这会有所帮助！

【讨论】：