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

Posted

技术标签:

【中文标题】单击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 【问题描述】:

在我的混合移动应用程序(为 androidios 开发)中,我使用下面的代码 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 旨在打开远程内容,而不是本地内容。也许你不应该在你的项目中使用它,而是以不同的方式处理它。

以上是关于单击inappbrowser中启动的页面上的按钮时如何关闭phonegap inappbrowser?的主要内容,如果未能解决你的问题,请参考以下文章

Android 设备中 Worklight 混合应用程序中的 Inappbrowser 问题

将目标设置为“_blank”时,iOS 上的 Cordova InAppBrowser 插件问题,页面不断加载

Cordova/Phonegap 通过 JavaScript inappbrowser 打印

单击按钮时将文本插入另一个页面上的元素[关闭]

单击 Safari 上的后退按钮时使用 React 挂钩强制页面重新加载

InAppBrowser 未启动