我认为拥有可重复使用的代码会很方便,尤其是导航栏,因为它在我的所有页面中都是相同的。这样我就不必浏览每个页面并在发生更改时单独手动编辑每个页面。
似乎可以使用 iframe,但我试过了,整个页面样式都乱七八糟。我可以修复它,但我想知道是否有类似的问题。
如果这样的东西能奏效那就太棒了:
var navbar = document.getElementById('navbar');
navbar.innerHtml = url('navigation.txt');
我目前在我的网站上离线工作,所以我认为我不能发出 xmlhttp 请求。正确的?至少我还没有得到任何 ajax 示例来工作。这很不幸,因为我认为我可以轻松地将它用于我的应用程序。
这是我的导航栏标记。它不是很复杂,所以我觉得最后我会手动编辑它。
<nav>
<ul id="navbar">
<li><a href="biosketch.html">Biosketch</a></li>
<li><a href="projects.html">Class Projects</a>
<ul>
<li><a href="projects.html#SeniorProject">Senior Project</a></li>
<li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
</ul>
</li>
<li><a href="#">Resume</a></li>
<li><a href="#">Work Experience</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
最佳答案
就像有人说的那样,这通常是在服务器端完成的,包含非 AJAX 站点。但是,我认为您可以使用 google 闭包模板。基本上,您使用他们的模板语言定义一个模板,该模板生成一个您可以调用以呈现 HTML 的 javascript 函数。
http://code.google.com/closure/templates/docs/helloworld_js.html
例子:
--templates.soy
{namespace templates}
{template .nav}
<ul id="navbar">
<li><a href="biosketch.html">Biosketch</a></li>
<li><a href="projects.html">Class Projects</a>
<ul>
<li><a href="projects.html#SeniorProject">Senior Project</a></li>
<li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
</ul>
</li>
<li><a href="#">Resume</a></li>
<li><a href="#">Work Experience</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
{\template}
然后运行以下命令将其编译成javascript函数
java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js templates.soy
这将生成一个名为 templates.js 的文件,其中包含一个名为 templates.nav 的函数,您可以从您的页面调用该函数,如下所示:
document.getElementById('navbar').innerHTML = templates.nav();
这甚至没有使用数据合并,它允许您传入一个数据对象来呈现非静态的 HTML。但我只给你看了这个,因为这就是你所要求的。我知道您也可以将 html 粘贴到 JS 字符串中,但是您必须处理缺乏来自编辑器的语法帮助的问题。
一个缺点是这需要您似乎并不介意的 JS。但是,如果你想支持无 JS 客户端,你可以在服务器端生成模板。还有一个生成 Java google 闭包方法的编译器。您可以在他们的网站上查找。
希望对您有所帮助。
关于javascript - 为多个页面上的导航栏创建可重用的 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4607136/