android - 在 inappbrowser Phonegap webview 应用程序顶部显示自定义导航
问题描述
我通过我的 Phonegap 应用程序的 inappbrowser 插件加载网页。该应用程序显示了一个网站和一个网上商店,它们都可以从网络上访问。我无法添加“返回应用程序”按钮(从 PC 访问该站点时这没有意义)。所以我想要在 phonegap 应用程序中自定义导航(我更喜欢 bootstrap),这样我就可以在多个不同的网站之间导航。
不幸的是,导航被 inappbrowser 隐藏了。有没有办法在 inappbrowser 顶部显示应用程序 html 导航?
非常感谢!
添加绝对位置、z-index 999999 和使用 css 的显示块没有帮助
解决方案
您可以这样做的一种方法是通过在您的 Cordova 应用程序 Webview 中生成按钮将按钮注入您的网页:
var inAppBrowserRef = cordova.InAppBrowser.open("http://www.mypage.com", "_blank");
inAppBrowserRef.addEventListener('loadstop', function(e) {
inAppBrowserRef.executeScript({
code: '\
var body = document.querySelector("body");\
var button = document.createElement("div");\
button.innerHTML = "Return to app";\
button.classList.add("close_button");\
button.onclick = function() {\
webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({action: "closeIAB"}));\
};\
body.appendChild(button);\
'
});
});
然后,您将为单击按钮关闭 inappbrowser 时发布的消息添加一个侦听器:
inAppBrowserRef.addEventListener("message", function (params){
if(params.data.action === "closeIAB"){
inAppBrowserRef.close();
}
});
您还可以从 Cordova 应用程序中注入按钮的样式:
inAppBrowserRef.insertCSS({
"code": "\
.close_button {\
position: fixed;\
bottom: 0;\
z-index: 500;\
width: 100%;\
background: white;\
color: black;\
padding: 10px;\
font-size: 20px;\
}"
});
或者,如果您愿意,可以将按钮样式添加到网页中的 CSS(如果它在您的控制之下)。
同样,如果您不喜欢动态创建按钮 HTML 的想法,您可以将其作为网页的一部分包含,但默认情况下将其隐藏,除非应用程序注入了特定类:
inAppBrowserRef.addEventListener('loadstop', function(e) {
inAppBrowserRef.executeScript({
code: '\
var body = document.querySelector("body");\
body.classList.add("is_app");\
'
});
});
在您的网站 CSS 中:
body:not(.is_app) .close_button{
display: none;
}
请注意,此 PR已添加到适用于 Android 和 iOS 的cordova-plugin-inappbrowser的postMessage API的模拟尚未在npm ( ) 上的最新发布版本中,因此您需要直接从 Github 安装插件主分支():v3.0.0
v3.1.0-dev
cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser
推荐阅读
- elixir - 如何在 Phoenix 上一次将字符串参数转换为整数
- c# - 检查一个字符数组的元素是否出现在另一个字符数组中
- python - 使用 smtplib 库在 python 中登录错误
- javascript - CSS如何在调整页面大小时防止元素重叠并保持元素固定?
- sql-server - 如何将 Flask 应用程序连接到 SQL Server?
- javascript - Console.log 上的数组返回数组长度但不是实际数组?
- python - SCIP 的数值问题:相同的问题,不同的最优值
- html - 表格没有显示超过某一行的行?
- python - Matplotlib X 轴 DateTime - 将数据放在一起
- java - 用于接收电子邮件的 JavaMail API