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

Question

我正在处理多个 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 显示相同的行为:i.e 相同的标题没有左键和写键。

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

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

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

Answer 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 文件。