我正在使用 x-ms-webview
在 Windows 应用商店应用程序外壳中包装网络应用程序。这工作正常,但我有一个问题。我使用 PayPal,因为 PayPal 不允许 iframed
我需要在新的浏览器窗口中打开 PayPal。
在常规浏览器上这不是问题。窗口打开,当用户从 PayPal 返回时,我可以在“opener
”上进行回调并更新用户帐户。
但是在 Windows 应用商店应用程序中执行此操作时,window.open
会触发 IE 启动。问题是返回到我的应用并让它知道用户已完成交易。
我的第一个想法是使用 URI 激活
。这种方法可行,但我不知道 PayPal 页面是从常规浏览器还是应用程序启动的。我还认为将用户带到另一个应用程序进行购买会让用户感到困惑。
我更愿意在我的应用程序中打开窗口,但我不确定如何打开一个新的 x-ms-webview
作为与现有 webview 重叠的模式窗口。
从当前 WebView 和应用程序进行交流的最佳方式是什么?
我可以使用 postMessage
在应用程序和 x-ms-webview
之间发送消息,即使 Web View 的 src 是一个 http 托管站点吗?
感谢您的帮助。
最佳答案
我找到了解决办法。
首先,您需要为嵌入式网站使用 https 网址。这是因为解决方案包括 postMessage
和 invokeScriptAsync
。
首先,我在我的应用程序中的标记看起来像这样,有一个用于应用程序的 Web View 和一个用于 PayPal 弹出窗口的 Web View 。
<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>
然后,当 Web 应用准备好使用 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 View 是否到达成功页面。如果有,我会使用 incokeScriptAsync 让 Web 应用程序知道我们已完成,以便它可以刷新用户帐户以显示新付款。
我认为您可以使用类似的身份验证解决方案,并在身份验证后检查您的返回 URL。
希望对您有所帮助!
关于javascript - 带弹出窗口的 Windows 应用商店 HTML 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20283092/