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

Posted 2023-02-25

【中文标题】单击inappbrowser中启动的页面上的按钮时如何关闭phonegap inappbrowser？

【英文标题】：How to close the phonegap inappbrowser when click on a button on a page that launched in 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 框架。

【参考方案1】：

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

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

Sample project

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

<!-- Point to some non-existing end-point;
     We'll catch the error and use it to close the InAppBrowser. -->
<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 旨在打开远程内容，而不是本地内容。也许你不应该在你的项目中使用它，而是以不同的方式处理它。