Javascript 带有弹出窗口的Windows应用商店HTML应用程序
我正在使用Javascript 带有弹出窗口的Windows应用商店HTML应用程序,javascript,windows,paypal,webview,Javascript,Windows,Paypal,Webview,我正在使用x-ms-webview将web应用包装到Windows应用商店应用程序外壳中。这很好,但我有一个问题。我使用PayPal,由于PayPal不允许使用iframed,我需要在新的浏览器窗口中打开PayPal 在普通浏览器上,这不是问题。该窗口打开,当用户从PayPal返回时,我可以在“opener”上进行回调,并更新用户帐户 但在Windows应用商店应用程序中执行此操作时,window.open会触发IE启动。问题是返回到我的应用程序,让它知道用户完成了交易 我的第一个想法就是使用U
x-ms-webview
将web应用包装到Windows应用商店应用程序外壳中。这很好,但我有一个问题。我使用PayPal,由于PayPal不允许使用iframed
,我需要在新的浏览器窗口中打开PayPal
在普通浏览器上,这不是问题。该窗口打开,当用户从PayPal返回时,我可以在“opener
”上进行回调,并更新用户帐户
但在Windows应用商店应用程序中执行此操作时,window.open
会触发IE启动。问题是返回到我的应用程序,让它知道用户完成了交易
我的第一个想法就是使用URI激活
。这种方式很有效,但我很难知道PayPal页面是从普通浏览器还是应用程序启动的。我还认为,用户被带到另一个应用程序进行购买是令人困惑的
我更希望在我的应用程序中打开该窗口,但我不确定如何将新的x-ms-webview
作为与现有webview重叠的模式窗口打开
从当前web视图和应用程序进行通信的最佳方式是什么?
我是否可以使用postMessage
在应用程序和x-ms-webview
之间发送消息,即使web视图的src是http托管站点
谢谢你的帮助。我找到了解决办法 首先,您需要为嵌入式站点使用https url。原因是解决方案包括
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>
windows应用商店应用程序侦听脚本通知事件并显示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");
}
}
因此,基本上,当脚本notify事件触发时,我解析发送给对象的json字符串,并检查它是什么类型的操作。如果这是我第一次运行它,我会设置一些导航事件处理程序来检查web视图是否到达成功页面。如果我们有,我会使用IncokeScript Async让web应用程序知道我们已经完成了,这样它就可以刷新用户帐户以获得新的付款
我认为您可以使用类似的身份验证解决方案,只需在身份验证后检查返回的URL即可
希望这有帮助 你解决过这个问题吗。我正在研究一个类似的问题。我们已经使用webview将我们的网站包装在一个windows应用程序中,该网站支持使用Google、Facebook等进行身份验证。这些服务会在普通浏览器上弹出一个窗口。但在应用程序中,他们启动IE,因此失去了经过身份验证的会话。
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");
}
}