Javascript 为多个页面上的导航栏创建可重用的 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4607136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating reusable html for navigation bar on multiple pages
提问by ptpaterson
I thought it would be convenient to have reusable code, especially for the navigation bar because it will be the same across all of my pages. This way I won't have to go through each page and manually edit each one individually when a change occurs.
我认为拥有可重用的代码会很方便，尤其是对于导航栏，因为它在我的所有页面中都是相同的。这样我就不必浏览每一页并在发生更改时单独手动编辑每一页。
It seems possible to use iframes, but I tried it and the whole page styling went out of whack. I can fix it but I'm wondering if there's something similar.
似乎可以使用 iframe，但我尝试了它，整个页面样式都变得不正常了。我可以修复它，但我想知道是否有类似的东西。
It would be awesome if something like this could work:
如果这样的事情可以工作，那就太棒了：
var navbar = document.getElementById('navbar');
navbar.innerHtml = url('navigation.txt');
var navbar = document.getElementById('navbar');
navbar.innerHtml = url('navigation.txt');
I'm currently working offline on my site so I don't think I can make xmlhttp requests. Correct? At least I still have yet to get any ajax example to work. This is unfortunate because I think I could easily use this for my application.
我目前在我的网站上离线工作，所以我认为我无法发出 xmlhttp 请求。正确的？至少我还没有让任何 ajax 示例工作。这很不幸，因为我认为我可以轻松地将它用于我的应用程序。
Here's my navbar markup. It's not very complicated so I have a feeling I'll just edit it manually in the end.
这是我的导航栏标记。它不是很复杂，所以我有一种感觉，我最终只能手动编辑它。
<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>
采纳答案by Juan Mendes
Like it's been said, typically this is done server side with an include for non AJAX sites. However, I think you can make use of google closure templates. Basically, you define a template in their templating language, that generates a javascript function you can call to render your HTML.
就像有人说的那样，通常这是在服务器端完成的，包括非 AJAX 站点。但是，我认为您可以使用 google 关闭模板。基本上，您用他们的模板语言定义一个模板，它会生成一个 javascript 函数，您可以调用它来呈现您的 HTML。
http://code.google.com/closure/templates/docs/helloworld_js.html
http://code.google.com/closure/templates/docs/helloworld_js.html
Example:
例子：
--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}
Then you run the following command to compile it into a javascript function
然后你运行下面的命令把它编译成一个javascript函数
java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js templates.soy
This will generate a file called templates.js containing a function called templates.nav which you can call from your page like the following:
这将生成一个名为 templates.js 的文件，其中包含一个名为 templates.nav 的函数，您可以从您的页面调用该函数，如下所示：
document.getElementById('navbar').innerHTML = templates.nav();
This is not even using the data merging, which would allow you to pass in a data object to render HTML that is not static. But I've only shown you this since it's all you asked for. I know you could just paste the html into a JS string also, but you's have to deal with the lack of syntax help from your editor.
这甚至不使用数据合并，这将允许您传入数据对象以呈现非静态的 HTML。但我只向你展示了这一点，因为这就是你所要求的。我知道您也可以将 html 粘贴到 JS 字符串中，但是您必须处理编辑器缺少语法帮助的问题。
The one drawback is that this requires JS which you don't seem to mind. However, if you wanted to support JS-less clients, you could generate the template on the server side. There is also a compiler that generates Java google closure methods. You can look for it on their website.
一个缺点是这需要您似乎不介意的 JS。但是，如果您想支持 JS-less 客户端，则可以在服务器端生成模板。还有一个编译器可以生成Java google 关闭方法。您可以在他们的网站上查找。
Hope it helps.
希望能帮助到你。
回答by meder omuraliev
Use a server side language to create a navigation file. It can be static or it can be extremely complex, it's up to you.
使用服务器端语言创建导航文件。它可以是静态的，也可以是极其复杂的，这取决于您。
<?php include 'includes/nav.php'; ?>
contents of nav.php can be the <nav>element entirely. You can ideally program it to show/hide elements based on the current "section", and also toggle certain classes based on the section.
nav.php 的内容可以<nav>完全是元素。理想情况下，您可以对其进行编程以根据当前“部分”显示/隐藏元素，并根据该部分切换某些类。
回答by Blindy
You very much can use AJAX calls "offline" as you put it, it's client side code.
正如您所说，您非常可以使用 AJAX 调用“离线”，它是客户端代码。
But the way I'd do this if I wasn't using a server side language (ASP.NET or PHP) is to have a small .js file that renders the navbar, and I'd just add a <script src='js/navbar.js'></script>where the navbar would go.
但是，如果我不使用服务器端语言（ASP.NET 或 PHP），我会这样做的方法是使用一个小的 .js 文件来呈现导航栏，我只需添加一个<script src='js/navbar.js'></script>导航栏所在的位置.
This way when you need to change it, you only change the .js and it would update in every other page.
这样，当您需要更改它时，您只需更改 .js，它就会在所有其他页面中更新。
回答by kvista
A few suggestions:
几点建议：
- If you're using JSP (or similar technology), you can simply use something like SiteMesh here to help with the templating
- You can use server side includes
- You can write a JavaScript function to programmatically build the DOM you need (no AJAX required) and then just call that JS function throughout your pages (no duplication of code)
- 如果您使用的是 JSP（或类似技术），您可以简单地使用类似 SiteMesh 的东西来帮助进行模板化
- 您可以使用服务器端包含
- 您可以编写一个 JavaScript 函数来以编程方式构建您需要的 DOM（不需要 AJAX），然后只需在整个页面中调用该 JS 函数（无重复代码）
回答by Jop de Klein
Normally these kinds of re-usable pieces of mark-up will be generated server side, mostly through a templating engine.
通常，这些可重用的标记片段将在服务器端生成，主要是通过模板引擎生成。
You could change Firefox's security settings to allow for offline AJAX calls, but it is probably better to set up a local development environment where you can start using a server side language, and do it properly from the start.
您可以更改 Firefox 的安全设置以允许离线 AJAX 调用，但最好设置一个本地开发环境，您可以在其中开始使用服务器端语言，并从一开始就正确执行。
回答by Chandu
If you want to implement it without any server side coding involved, try this:
如果您想在不涉及任何服务器端编码的情况下实现它，请尝试以下操作：
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
http.open("GET", "navigation.txt");
http.onreadystatechange=function() {
if(http.readyState == 4) {
var navbar = document.getElementById('navbar');
navbar.innerHtml = http.responseText;
}
}
http.send(null);
回答by Ananth Vivekanand
If you are going to use the same code over and over, it might be best to create a separate file and implement it in different webpages.
如果您打算一遍又一遍地使用相同的代码，最好创建一个单独的文件并在不同的网页中实现它。
It is possible through this: https://www.w3schools.com/howto/howto_html_include.asp
可以通过这个：https: //www.w3schools.com/howto/howto_html_include.asp
You write the nav bar's html in a separate .html file and call it in like this:
您在单独的 .html 文件中编写导航栏的 html 并像这样调用它：
<div w3-include-html="content.html"></div>
<div w3-include-html="content.html"></div>
Then call in a javascript function from
然后从
<script src="https://www.w3schools.com/lib/w3data.js"></script>
which is w3IncludeHTML();
这是 w3IncludeHTML();
And you should have it up and running! Hope this helped! :)
你应该让它运行起来！希望这有帮助！:)
