链接到外部页面的部分，不带哈希'#'(html5历史吗?)

Link to a section of external page without hash '#' (html5 history?)

本文关键字：html5 历史 哈希 外部 链接      更新时间：2023-09-26

关于不使用哈希'#'链接到同一站点外部页面部分的可能不同方法的任何建议?

如果我在一个完整的js/ajax场景，我可以轻松做到这一点，但搜索一些想法，如果有可能使用"更干净"的url比hashbangs有一个简单的滚动到节链接…

如果我理解正确，你想做一个位置更改到新页面，然后滚动到一个干净的URL页面上的给定区域?

如果是这样，这可以通过在。htaccess(或类似的配置)中重写URL和一点JavaScript来确定您应该在页面上的位置来完成:

. htaccess

例如，这将把所有对/otherpage/{section}的请求传递给otherpage.html(为了回答这个问题而简化)

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(otherpage/.*)$ otherpage.html [L]
JavaScript

然后，在otherpage.html中，您可以检测当前路径并相应地滚动页面。

switch( location.pathname ) {
    case '/page/section-1/':
        // scroll to section 1
        break;
    case '/page/section-2/':
        // scroll to section 2
        break;
    case '/page/section-2/':
        // scroll to section 2
        break;
}

然而，现在你在页面上，如果你想要这个滚动效果继续不刷新页面，你将不得不考虑使用HTML5历史推送状态。对于这一点，History.js在过去对我来说工作得很好。

编辑:哦，注意location.pathname后面的斜杠。它可能在那里，也可能不在那里，所以你可能想在比较之前对它进行消毒。

什么是"hashbang"?你是说"#"吗?如果是这样，那么它几乎是链接到页面特定部分的正常和"干净"的方式。这就是它最初被发明的原因。

相关文章：