如何将值从 InAppBrowser 返回到 Ionic 应用程序

Posted 2023-05-06

【中文标题】如何将值从 InAppBrowser 返回到 Ionic 应用程序

【英文标题】：How to return value from InAppBrowser to Ionic app

【发布时间】：2021-11-30 18:14:20

【问题描述】：

我们正在从 ionic 应用程序的 inappbrowser 中加载给定的 URL，它将加载 html 表单以及一个隐藏的输入字段。

我正在尝试使用 inappbrowser 的 executeScript 方法点击提交按钮时获取该隐藏字段值，如下所示：

  browser.executeScript(
      code:
        "var result; document.getElementById('BtnSubmit').addEventListener('click', function()" +
        "result = document.getElementById('myInput').value;);",
    );

在结果变量中，获取输入值，但需要将其从 executeScript 返回到 ionic 应用程序上下文中。

【参考方案1】：

您需要将您的响应附加到inappbrowser的消息事件中，然后在应用端接收。

下面的脚本是发送邮件。它具有通过它的特定格式。需要创建 JSON 对象。

browser.executeScript(
code: "document.getElementById('customBackbtn').onclick = function() \
var message = 'close';\
var messageObj = message: message;\
var stringifiedMessageObj = JSON.stringify(messageObj);\
webkit.messageHandlers.cordova_iab.postMessage('stringifiedMessageObj');\
");

然后在您的应用中捕获来自 iab 的发布消息：

browser.on('message').subscribe((val)=>
const postObject:any = val;

//Do whatever you want to with postObject response from inappbrowser

);

【讨论】：

是否有任何解决方法可以从浏览器中加载的 URL 中获取请求参数或标头？

是的，一旦您打开了 inAppBrowser 实例，您就可以执行脚本来获取 url 并使用正则表达式操作从查询参数中获取参数。如果这就是你要找的。但我建议您使用上述答案从 inappbrowser 获取带有参数的 url 作为发布响应，然后您可以操作以角度接收的对象。这样处理会更容易..

请求参数作为表单数据附加到 URL 中而不是查询参数。是否可以从 inappbrowser 获取？

@Muthuraja 是的，这是可能的。您需要捕获 window.location.href 的响应作为 executeScript 的一部分，并使用 post 消息将字符串拉到您的角度侧，以便对已获取数据的字符串执行任何您想要的操作。就表单数据而言，如果它作为服务响应的一部分出现，那么我不确定我们如何将这些数据提取到我们的应用程序中。

好的@vishal。需要从服务响应中获取该值...这是我的要求