Question

我正在创建一个＆＃34;静态＆＃34;网站，我想有这样的网址： http://www.my-website/my-page-1或http://www.my-website/my-page-2

我使用jQuery方法load()来加载我的网页内容。这是我的index.html：

<body>
    <nav>
        <ul >
            <li id="my-page-1-menu-item" class="menu-item" onclick="changeState('my-page-1')">
                <span><a>Link 1</a></span>
            </li>
            <li id="my-page-2-menu-item" class="menu-item" onclick="changeState('my-page-2')">
                <span><a>Link 2</a></span>
            </li>
        </ul>
    </nav>

    <!-- Content, loaded with $.load() -->
    <div id="content"></div>
</body>

我知道如何在不重新加载页面的情况下使用history API

更改我的网址

这是我的javascript：

function changeState(url) {
    window.history.pushState(url, 'Title', url);
    loadStateData(url);
}

function loadStateData(state) {
    var content = '#content';
    $(content).load( 'views/' + state + '.html');

    // Manage menu style
    $('.menu-item').removeClass('active');
    $('#' + state + '-menu-item').addClass('active');
}

使用此代码，我可以点击http://www.my-website/my-page-2来Link 2，但如果我刷新我的网页或直接在浏览器地址栏中输入http://www.my-website/my-page-2，我收到了404错误。

我对.htaccess网址重写不太满意，但我认为它应该可以解决我的问题。

而且我不想使用AngularJS或其他类似的框架（除非它是一个非常轻量级的框架）

Answer 1

您需要确保在使用JavaScript时：

修改当前页面的DOM，使其实际上是一个不同的页面
更改网址以识别不同的网页

...您还确保服务器也可以自己生成该页面。

这样，如果JavaScript fails for any reason那么一切都将继续有效。这是basic principle，最佳做法是遵循。

这可能涉及复制您的逻辑服务器端，这可能需要做很多工作。稳健性+客户端性能黑客不能廉价地协同工作。考虑isomorphic JS和taking page snapshots with a headless browser作为技术来加快速度。

我对.htaccess网址重写不太满意，但我认为它应该可以解决我的问题。

它肯定不会解决它好。您可以使用它将每个请求转移回您的主页（因此您在每个URL上都有重复的内容）然后使用客户端JS来阅读location并确定要加载的内容但是您可以使用{ {3}}因为您已经抛弃了使用pushState的所有优势，但为您的网站添加了重复的内容网址（并投入了大量工作来创建这些重复的内容网址）。

Answer 2

在没有任何服务器端重写的情况下执行此操作听起来不可能。刷新页面时，HTTP服务器需要根据URL为您提供正确文件的内容。

但是..如果你真的想要进行URL重写客户端，你可以进行一次通用重写，因为它经常在基于PHP的网站内部进行重写（不是通过.htaccess或nginx规则，而是使用PHP脚本）。当没有像＆＃34; / my-page-2＆＃34;这样的文件时在网络服务器上，只需将客户端重定向到/index.html?url=/my-page-2并使用JavaScript调度到正确的子页面。

静态网站的漂亮网址

2 个答案: