个人中心
gpt4 book ai didi

javascript - 静态网站的漂亮 URL

转载 作者：行者123 更新时间：2023-12-02 14:26:27 24 4
gpt4 key购买 nike

我正在创建一个“静态”网站，我希望有这样的网址: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');
}

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

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

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

最佳答案

您需要确保当您使用 JavaScript 时:

  • 修改当前页面的 DOM，使其实际上成为不同的页面
  • 更改网址以标识不同的页面

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

这样如果 JavaScript fails for any reason那么一切仍然有效。这是basic principle应该遵循最佳实践。

这可能会涉及复制逻辑服务器端，这可能需要大量工作。鲁棒性+客户端性能黑客不能廉价地协同工作。考虑isomorphic JS和 taking page snapshots with a headless browser作为加速这一过程的技术。

I'm not very comfortable with .htaccess URL rewritting but I think it should solve my problem.

它肯定不能很好地解决这个问题。。您可以使用它将每个请求转移回您的主页(因此每个 URL 上都有重复的内容)，然后使用客户端 JS 读取 location 并计算出要加载的内容，但您可能会这样做好好利用hashbangs因为您将放弃使用 pushState 的所有优势，而是向您的网站添加重复的内容 URL(并投入大量工作来创建这些重复的内容 URL)。

关于javascript - 静态网站的漂亮 URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38205473/

24 4 0
文章推荐： javascript - PhpStorm 无法识别网络音频 api
文章推荐： javascript - 如何使用 $q.all(promises) 并在网页上显示响应？
文章推荐： javascript - 识别node js中的特定元素
文章推荐： javascript - 禁用双重提交以防止发送提交名称
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com