Question

我正在使用cordova框架创建应用程序，我想创建一个使用javascript生成的主菜单，我可以在不同的网页中导入。

我有下一个文件夹结构

|-folder
|--index.html
|--|reports
|--|--index.html
|--|--report.html
|--js
|--|--menu.js

所以如果我从index.html创建菜单导入脚本menu.js，结果将类似于

<div class="menu">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="reports/index.html">Reports</a></li>
  </ul>
</div>

另一方面，如果我从reports / index.html导入脚本，则项目中的href会发生变化。

这可以通过一些MVC框架轻松完成，但该项目仅使用JQuery，我不想将整个项目合并到框架中。有一个简单的方法吗？

Answer 1

您可以简单地使用绝对路径名

<div class="menu">
  <ul>
   <li><a href="/folder/.../index.html">Home</a></li>
   <li><a href="/folder/.../reports/index.html">Reports</a></li>
  </ul>
</div>

如果这仅适用于仅限HTML的小型网站，我会选择该解决方案，但如果您正在计划中。更大，使用一些PHP来检测当前页面，甚至更好地使用某种框架为你做这件事。

Answer 2

根据exastion的回答，我创建了一个menu.js脚本，在里面我检测到脚本放入菜单项绝对路径名的路径，这是脚本：

 var scripts     = document.getElementsByTagName('script'),
     basedir     = scripts[scripts.length-1].src.slice(0, -10);
     //quit the script name and folder js 


$('body').append('<div class="overlay-menu"></div>'+
                        '<div class="menu">'+
                        '<ul><li><a href="'+basedir+'index.html">Inicio</a></li>'+
                        '<ul><li><a href="'+basedir+'reports/index.html">Inicio</a></li>'+
                        '</ul></div>');

动态创建菜单以导入不同的网页

2 个答案: