链接到没有哈希“#”的外部页面部分（html5 历史？）答案

【问题标题】：Link to a section of external page without hash '#' (html5 history?)链接到没有哈希“#”的外部页面部分（html5 历史？）
【发布时间】：2014-10-02 12:34:23
【问题描述】：

关于在不使用哈希“#”的情况下链接到同一站点的外部页面的一部分的可能不同方法的任何建议？

如果我处于完整的 js/ajax 场景中，我可以轻松做到这一点，但如果可以使用比 hashbangs 更清洁的 url 来简单滚动到部分链接，请搜索一些想法......

【问题讨论】：

为什么不只是片段和ID？ <a href = "#part1">Link</a> 和 <div id = "part1">STH</div>
我需要指向另一个页面的一个部分，我根本不想要 www.site.com#section...
您的问题似乎仍然过于宽泛且不清楚...另一个页面 = 您网站的另一个页面或另一个域和#section？您能否详细解释一下您希望通过编辑您的问题来实现什么？
导致您不使用#的具体用例是什么？
哈希是最简单的。这是通向页面上特定部分的标准、易于理解和常用的方式。为什么要重新发明轮子？

标签： javascript jquery hashbang

【解决方案1】：

如果我理解正确，您想对新页面进行位置更改，然后使用干净的 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 pushState。为此，History.js 过去对我来说效果很好。

编辑：哦，注意 location.pathname 中的斜杠。它可能存在也可能不存在，因此您可能需要在比较之前对其进行消毒。

【讨论】：

我已经在一个完全 ajax WP 主题中做过类似的事情，但是今天我正在开发一个 Ghost 主题（非常有限的 api），所以我无法以编程方式访问 .httaccess。感谢您及时回复！
这肯定会让它变得更加困难！也许您可以使用 Wordpress 路由将所有请求推送到给定页面而不是 .htaccess？
我这几天不在WP，这是一个Ghost主题，我无法访问任何路线。

【解决方案2】：

什么是“hashbang”？你的意思是 ”＃”？如果是这样，那么它几乎是 THE 正常且“干净”的方式来链接到页面的特定部分。这就是它最初被发明的原因。其他任何东西都是骇客。

【讨论】：

hashbang 是（通常）基于 Javascript 的路由器在确定要加载哪个内容页面时查找的唯一标识符。