带有弹出窗口的Windows应用商店HTML应用程序
Windows Store HTML app with popup window
我正在使用x-ms-webview
将web应用程序包装在Windows应用商店应用程序外壳中。这很好,但我有一个问题。我使用PayPal,由于PayPal不允许iframed
,我需要在新的浏览器窗口中打开PayPal。
在普通浏览器上,这不是问题。窗口打开,当用户从PayPal返回时,我可以在"opener
"上回调并更新用户帐户。
但当在Windows应用商店应用程序中执行此操作时,window.open
会触发IE启动。问题是返回到我的应用程序,让它知道用户完成了交易。
我的第一个想法就是使用URI activation
。这是可行的,但我很难知道PayPal页面是从常规浏览器还是应用程序启动的。我还认为,用户被带到另一个应用程序进行购买是令人困惑的。
我更希望在我的应用程序中打开该窗口,但我不确定如何打开一个新的x-ms-webview
,作为与现有Web视图重叠的模式窗口。
从当前的网络视图和应用程序进行沟通的最佳方式是什么?即使web视图的src是http托管的网站,我也可以使用postMessage
在应用程序和x-ms-webview
之间发送消息吗?
谢谢你的帮助。
我找到了一个解决方案。
首先,您需要为嵌入的网站使用https url。原因是该解决方案包括postMessage
和invokeScriptAsync
。
首先,我的应用程序中的标记看起来像这样,有一个应用程序的网络视图和一个PayPal弹出窗口的网络视图。
<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即可。
希望这能有所帮助!
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 从html创建一个指令,该指令按类名应用函数
- 在索引.html和应用.js [node.js] 之间共享变量
- 打印预览没有应用程序页眉和页脚的html表格
- 如何将html打包到单个应用程序中
- 使用jquery.load('pageName')方法时,未从应用程序缓存加载Html页
- 应用程序在呈现Jquery Mobile之前显示无样式的Html
- HTML 标记未在 AngularJS ckEditor 中应用,而是在 Ediator 中显示 HTML 元素标记代码
- 如何重定向到我的html网站youtube嵌入视频打开在youtube应用程序
- 将Rails后端添加到JS/HTML/CSS应用程序时,正确的文件位置是什么
- 如何使用HTML/CSS/JavaScript开发桌面应用程序
- Chrome应用程序在全屏中创建新窗口-html元素不是全高的
- 应用程序脚本中导入HTML的数据擦除;谷歌表格
- 如何打开文件对象(HTML)并在谷歌应用程序脚本中解析它
- Javascript/Jquery试图在另一个函数中应用.html
- 如何使用jquery检测包装的纯文本并应用html标记
- 有条件地应用HTML标记
- web应用(HTML)中top_nav_bar的设计选择
- 应用HTML页边距时的offsetTop问题