从 iframe 重定向回 Ionic

Question

我正在使用 ionic 创建一个商店网站，该网站使用以标准方式工作的外部支付提供商（在 iframe 中运行并将您重定向回原始页面，一旦支付成功）。

由于 Ionic 在本地运行网站，您不能只重定向回一个 URL，因为每个 URL 都会不同。

我想我不是第一个遇到这个问题的人。

如何从应用内 iframe 中的支付提供商重定向回我的离子状态之一？

Answer 1

因此，您根本不应该在 cordova 应用程序中使用 iframe。它们提供了非常糟糕的用户体验。更好的选择是使用应用内浏览器

Answer 2

您可以使用此插件为您的应用程序制作自定义 url 方案：https://github.com/EddyVerbruggen/Custom-URL-scheme

祝你好运！

Answer 3

就我而言，我在主视图中添加了一个监听器，等待来自 iframe 的消息：

window.addEventListener('message', this.receiveMessage, false);

在 iframe 中，我向父窗口发送消息：

parent.postMessage("stateToGo", "*");

然后，调用父窗口的回调方法：

 receiveMessage = (state) => {
   this.$state.go(state);
 }

Answer 4

我使用 inAppBrowser 在我的一个应用中实现了类似的功能。您可以通过以下方式实现：

1. 实现一个网络应用程序（不是移动网络，只是使用 PHP 或其他的普通网络......），它将负责您的付款处理。
2. 在应用程序的初始页面上，放置一个将使用 JavaScript 提交到支付网关的表单。您可以使用 GET URL 参数或使用 inAppBrowser 的“executeScript”方法填写此表单中的值。
3. 支付处理完成后，支付网关调用重定向 URL 并向其发布一些数据，这将再次成为您的 Web 应用程序的 URL。只需将数据作为 JSON 字符串回显（因为它会更容易在应用程序中处理）在您的网页上。
4. 一旦 inAppBrowser 完全重定向到您的付款重定向 URL，请使用脚本“document.body.innerHTML”从 inAppBrowser 读取 JSON 字符串。

下面的代码 sn-p 可以帮助你理解方法：

var ref = $window.open(order.payment_url, '_blank', 'location=no,hardwareback=no'), 处理=假； ref.addEventListener('loadstop', function (event) { if (event.url === payment_result_url) { ref.executeScript({ 代码：“document.body.innerHTML” }，函数（结果）{ 尝试 { var response = JSON.parse(result[0].replace(/\\/g, "")); // 这里处理支付结果 } 捕捉（前）{ // JSON解析错误 } 处理=真； ref.close(); }); } }); ref.addEventListener('loaderror', function () { 处理=真； ref.close(); // 网络错误 }); ref.addEventListener('exit', function () { 如果（！处理）{ // 取消支付 } });