单击inappbrowser中启动的页面上的按钮时如何关闭phonegap inappbrowser？答案

【问题标题】：How to close the phonegap inappbrowser when click on a button on a page that launched in inappbrowser?单击inappbrowser中启动的页面上的按钮时如何关闭phonegap inappbrowser？
【发布时间】：2014-12-11 01:14:22
【问题描述】：

在我的混合移动应用程序（为 android 和 ios 开发）中，我使用下面的代码 window.open("sample.html","_blank","location=yes") 在 inappbrowser 中启动 sample.html 页面。这样，它会打开一个 inappbrowser 窗口并加载带有 url 栏的 sample.html 页面，该页面在 android 中带有“X”标记，在 ios 底部有“Done”按钮。如果我们点击 android 中的“X”标记或 ios 中的“完成”按钮，它会关闭 inappbrowser。现在我希望在单击 sample.html 中的按钮时具有相同的行为。我使用了 window.close() 但它不起作用。

我正在为我的应用程序使用 IBM Worklight 框架。

【问题讨论】：

标签： javascript cordova ibm-mobilefirst

【解决方案1】：

InAppBrowser 是 Cordova 附带的功能。
您可以阅读有关它的更多信息，包括所有受支持的 events in its documentation page。

没有“从内部”关闭 InAppBrowser 实例的直接方法，因此需要解决此问题。
这是实现它的一种方法：

Sample project

在您的 sample.html 中添加一些像这样的“关闭”链接，例如：
```

<a href="/close">Close</a>
```
如果您真的希望它是一个“按钮”，您可以将链接设置为看起来像一个按钮。

在 Worklight 应用程序的 common\main.js 中添加以下内容，例如：

var InAppBrowserReference;

function wlCommonInit(){

}

function openInAppBrowser() {
    // Use location=no,toolbar=no in order to hide the supplied 'close' buttons
    // by the InAppBrowser instance.
    InAppBrowserReference = window.open('sample.html', '_blank', 'location=no,toolbar=no');
    InAppBrowserReference.addEventListener('loaderror', closeInAppBrowser);
}

function closeInAppBrowser(event) {
    if (event.url.match("/close")) {
        InAppBrowserReference.close();
    }
}

在上面的代码 sn-p 中，为了简单起见，为了打开 InAppBrowser，从 common\index.html 中调用了openInAppBrowser()。

【讨论】：

我已经尝试过类似的选项，但它对我不起作用。我认为分配给 inappbrowser 引用变量的所有 addeventlistners 将在该事件从 index.html 而不是从 sample.html 执行时起作用。在我的情况下，当单击 sample.html 页面上的按钮/链接时，必须执行 loaderror 事件/函数。如果我理解不正确，请告诉我。
@user3878988，查看示例项目的答案。
请注意，该应用程序是使用最近发布的 Worklight Foundation 6.3（现在称为 MobileFirst Platform Foundation）构建的。因此，如果您使用的是旧版本的 Worklight，只需将 index.html、sample.html 和 main.js 中的代码复制到您自己的项目中即可。
当我从您的项目中复制 index.html、sample.html 和 main.js 时，它工作正常。但我很困惑，我也在我的项目中使用了相同的代码，但它对我不起作用。后来在调试和比较我的项目和你的示例项目后，我发现了这个问题。问题在于 jquery.mobile.js 和 jquery.js。如果我们在 sample.html 中包含 jquery.mobile-1.3.2.js 和 jquery.js 库并运行应用程序，则在单击 sample.html 页面上的关闭按钮时会出现加载页面问题的错误。不确定有什么冲突.请告诉我如何解决这个问题。谢谢。
您不能只在该页面中使用 jquery，它完全是一个不同的文件，没有任何对 jquery 的引用。您需要查看有关将 CSS 和 js 注入其中打开的文件的 inappbrowser 文档。请注意，inappbrowser 旨在打开远程内容，而不是本地内容。也许你不应该在你的项目中使用它，而是以不同的方式处理它。