删除URL中的哈希(fullpage.js)

问题描述

我正在使用插件 fullpage.js

我希望使用像example.com/sectionname这样的干净URL，而不是像example.com/#sectionname)这样的部分的哈希URL.

Instead of hash urls for the sections like example.com/#sectionname), I would like clean URLs like example.com/sectionname.

该插件没有提供此选项，但我很好奇是否有足够简单的方法来实现此目的.

The plugin doesn't provide this option but I'm curious if there is a simple enough way to achieve this regardless.

更新1:我已经尝试过此回调:

Update 1:I've tried this callback:

onLeave: function(index, nextIndex, direction) {
    if (nextIndex == 2) {
        history.replaceState(null, null, "/about")
    }
}

以及此:

afterLoad: function(anchorLink, index) {
    if (index == 2) {
        history.replaceState(null, null, "/about");
    }
}

但是，当我滚动到第二部分时，URL如下所示:www.example.com/about/#about.

However, when I scroll to the second section, the URL is like this: www.example.com/about/#about.

我也尝试过以下代码:

function locationHashChanged() {
    if (location.hash === "#about") {
        history.replaceState(null, null, "/about");
    }
}
window.onhashchange = locationHashChanged;

但是，当加载新部分时，哈希会在更改为非哈希URL之前短暂显示.

However, when new sections are loaded the hash briefly shows before changing to the non hash URL.

推荐答案

您始终可以使用HTML 5历史记录API.您可以为此使用onLeave或afterLoad这样的回调:

You can always make use of the HTML 5 history API.You can use callbacks such as onLeave or afterLoad for that:

$('#fullpage').fullpage({
    afterLoad: function(anchorLink, index) {
        history.pushState(null, null, "bar.html");
    }
});

请考虑到您需要为旧版浏览器使用一些polyfill.或直接使用 history.js .

Take into account you'll need to use some polyfill for old browsers. Or just use history.js directly.

请注意，上面的示例在某些浏览器上可能不适用于localhost.您最好在服务器上尝试一下.

Note the example above might not work on localhost on some browsers. You'd better try it in a server.

这篇关于删除URL中的哈希(fullpage.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！