Question

我有一个静态HTML网站。我想将导航（顶部）菜单存储在外部文件中，因此当我更改菜单时，我希望看到所有页面的更改。
我真的非常需要能够在本地看到网页（常规Windows用户无需安装其他软件：Apache，PHP，Wamp，特定浏览器等）。

有两个类似的StackOverflow问题，使用PHP，SSI和...框架部分解决了这个问题。这些解决方案都不适合我：

显然不参与讨论（来自SEO POV以及HTML5中的obsolete）。
PHP和SSI仅在网站上传到服务器后才能工作，因此无法在本地运行。

我看到的解决方案是将所有菜单放在外部JS文件中。但是，我喜欢的所有JS示例都在HTML文件中找到了still have some 'parts' of the menu。

那么，可以将所有菜单放在JS文件中，并且只能在我的HTML文件中调用该文件（并且没有实际的菜单项）？我只掌握JS的基本知识。但足以根据我的需要调整通用示例。

Answer 1

menu.html

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="active1.html">Contact</a></li>
    <li><a href="active2.html">About</a></li>
    <li><a href="active3.html">Portfolio</a></li>
</ul>

的index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<div id="nav"></div>

js file：

$(function() {

    $("#nav").load("menu.html");

    function activeNav() {
        var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
         $("#nav ul li a").each(function(){
              if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
              $(this).addClass("active");
         });
    }

    setTimeout(function() {
        activeNav();
    }, 100);

});

setTimeout允许页面加载，然后运行该函数以查看哪个链接处于活动状态，然后您可以在css中添加一个类：

#nav ul li a.active {
        color: #ff0000;
        font-weight: bold;
    }

Answer 2

nav.html //你不需要输入html，正文等等。只是导航本身。

<nav> bla bla </nav>

的index.html

<!doctype html>
<html>

  <head>
    <title>onload test</title>
    <script>

    window.onload = function(){
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
             document.getElementById('includeNav').innerHTML= '<object type="text/html" data="nav.html"></object>';
        }
    }

    xhttp.open('POST', 'nav.html', true); // method, location, async
    xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhttp.send(); }
    </script>
  </head>


  <body>
    <p>The load event fires when the document has finished loading!</p>
    <div id="includeNav"></div>
  </body>
</html>

试试这个。这可能是你问题的答案。

Answer 3

您可以查看HTML Imports。

选项1：在最简单的情况下，您可以这样做：

index.html（或任何其他页面）：

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="nav.html">
</head>
<body>
    My Page
    <script>
        var link = document.querySelector('link[rel="import"]');
        var nav = link.import.querySelector('nav');
        document.body.appendChild(nav.cloneNode(true));
    </script>
</body>
</html>

nav.html：

<nav>
    <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
    </ul>
</nav>

有关详情，请访问：http://www.html5rocks.com/en/tutorials/webcomponents/imports/

选项2 ：充分利用Web Components API并使用自己的HTML元素之类的东西，然后在所有文件中使用变得更加容易（虽然nav.html有点用处）更复杂）。

index.html（或任何其他页面）：

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="nav.html">
</head>
<body>
    My Page
    <my-nav></my-nav>
</body>
</html>

nav.html

<nav>
    <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
    </ul>
</nav>
<script>
    var navProto = Object.create(HTMLElement.prototype);
    var navDoc = document.currentScript.ownerDocument;
    navProto.createdCallback = function() {
        var shadow = this.createShadowRoot();
        var nav = navDoc.querySelector('nav');
        var clone = document.importNode(nav, true);
        shadow.appendChild(clone);
    };
    document.registerElement('my-nav', { prototype: navProto });
</script>

编辑 两种解决方案的一个值得提及的缺点是浏览器支持：

对于选项1和2：http://caniuse.com/#feat=imports
对于选项2：http://caniuse.com/#feat=custom-elements

主要是Chrome（包括Android）和Opera支持这些功能。遗憾的是，由于浏览器的安全设置，在没有Web服务器的情况下无法使用HTML导入。您将收到类似的控制台错误：

Imported resource from origin 'file://' has been blocked 
from loading by Cross-Origin Resource Sharing policy: 
Invalid response. Origin 'null' is therefore not allowed access.

因此，您需要启动一个简单的Web服务器，例如nodejs模块http-server或使用Chrome扩展程序，例如Chrome Dev Editor，它会带来内置的Web服务器https://chrome.google.com/webstore/detail/chrome-dev-editor/pnoffddplpippgcfjdhbmhkofpnaalpg?utm_source=chrome-app-launcher-info-dialog

Answer 4

我在不同thread上的答案副本：

我认为这是最简单的方法没有服务器端语言。使用像W3Data这样的javascript库。您需要做的就是将w3-include-html属性添加到div中。完成！

如果您的菜单位于名为menu.html的文件中，您可以执行此类操作。

<div w3-include-html="menu.html"></div>

Answer 5

您可以使用JsRender/JsViews。

如何从外部文件加载导航菜单？（没有Wamp，所有代码必须是'浏览器端'）

5 个答案:

如何从外部文件加载导航菜单？ （没有Wamp，所有代码必须是'浏览器端'）

5 个答案:

如何从外部文件加载导航菜单？（没有Wamp，所有代码必须是'浏览器端'）