Phonegap 导航栏不适用于多个 html 页面

Posted 2023-03-14

【中文标题】Phonegap 导航栏不适用于多个 html 页面

【英文标题】：Phonegap Navigation bar not working for multiple html pages

【发布时间】：2012-10-11 08:00:17

【问题描述】：

我正在开发多个 html 页面 phoneGap 应用程序，我想实现一个导航栏。

我正在使用以下代码来实现 phoneGap navigation bar：

在index.html 中，我定义了这样的导航栏：

function onDeviceReady() 
  plugins.navigationBar.init();

  // or .create("BlackOpaque") to apply a certain style
  plugins.navigationBar.create("BlackOpaque"); 

  plugins.navigationBar.setTitle("Home");
  plugins.navigationBar.hideLeftButton();
  plugins.navigationBar.hideRightButton();
  plugins.navigationBar.show();

当我运行应用程序时，它会在索引页面顶部创建一个导航栏，标题标记为HOME，没有左侧或右侧navBarButton，因为我在主页中不需要它。

但是当我通过单击一个按钮转到下一个 HTML 页面 xyz.html 时，navBar 显示相同的行为：即相同的标题没有左和写按钮。

但我希望它更改当前加载页面的标题，并将leftNavBarButton 标签插入到后面，以便我也可以返回上一页。

但这并没有发生。我还尝试在xyz.html 页面中编写一个脚本，该脚本应该更改其标题并将leftNavBarButton 放回但不起作用。

它在整个应用程序中都是静态的，标题相同，我无法返回上一页。我希望它的行为是全局的，它随着每一页的变化而变化，并保持前一页的状态！我该怎么做？

【问题讨论】：

我需要在每个 html 页面中包含 navigationbar.js 吗？

我确实有几乎同样的问题。当我在 index.html 中时。我的 NavigationBar 正在使用标题和左按钮。如果我转到另一个 html 文件。像 test.html。我确实看到带有标题和左按钮的导航栏，但链接不起作用。我必须在子 html 中做什么，导航栏上的按钮仍然可以工作？

【参考方案1】：

如果您使用单页模板（= 每个 HTML 文件 1 个 jQuery Mobile 页面），您必须在每个 HTML 文件中包含您的 JS 代码。

您可以做的是将所有自定义 JS 代码放在一个 JS 文件中，然后将其导入您拥有的每个 HTML 页面中。此外，导入您将在每个页面中使用的任何其他 JS 库。

例如：

<script src="./js/navigationbar.js"</script>
<script src="./js/myjs.js"></script>
...
...

另一种解决方案是在导航到页面时强制刷新页面。

在这种情况下，您不必在每个页面中导入所有 JS 代码，并且对于每个 HTML 文件，您可以导入该给定文件所需的 JS 文件。