单击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 【问题描述】:在我的混合移动应用程序(为 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 附带的功能。
您可以阅读有关它的更多信息,包括所有受支持的 event
s 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 打印