替代重定向页面

Question

我正在尝试弄清楚如何进行历史状态操作，我看到一个网站有一个很好的功能，如果你在斜杠后面放任何东西，该网站仍会加载但由于缺陷而处于不完整状态在状态机中。我想知道你如何让网站捕捉地址并像那样转发？我唯一的猜测是更改 .htaccess 文件，但我不确定从哪里开始...

http://bufmi.org/（这是网站）

http://bufmi.org/about（这是一个网站的例子）

http://bufmi.org/foobar（这仍会加载网站，但不是实际页面）

他们设置了无论您在斜杠后输入什么内容都会进入网站，他们是如何做到这一点的？

Answer 1

此功能自 Html5 后可用。

您可以覆盖默认操作。

这是 jQuery 的实现：

$( document ).on( 'click', 'a', function( e ) {

    // prevent the page reload
    e.preventDefault();

    // change the content of the <body> tag
    changeContent($(this).attr('href'));

} );

浏览器的前进和后退按钮是这样处理的

window.addEventListener( 'popstate', function( e ) {

    // Change the content of the <body> tag
    changeContent(location.pathname);

} );

你的 changeContent 函数就像

function changeContent(url) {

    $.get(url, function(new_content) {
        $('body').html(new_content);
    })

}

这样您就可以更改网站的任何部分而无需刷新整个页面。

Answer 2

这是通过一些脚本实现的，该脚本会根据您是否位于根目录 URL 以及 .htaccess 重写规则将散列添加到除基础 [=32= 以外的任何内容] ].

.htaccess 部分是这样处理的：

RewriteRule ^([a-zA-Z0-9_-]+)$ /# [NE,R]

scripts.js 的这一部分负责根 URL 检查看起来有点像这样：

if (document.URL == urlroot){
    //Applies Class to set of elements
    $('.example').removeClass('example-class', 0);
} else {
    //Applies Class to different set of elements
    $('.example2').removeClass('example-class', 700);
}

如果您不在根 URL 一系列 if/else if 检查片段标识符的内容是否存在。如果存在，内容将使用页面上的锚点从一个 html 文件加载到页面上的特定部分。如果片段标识符与 scripts.js 中的任何 if/else if 部分都不匹配，则 mater.html 页面上的锚点 Blank 用于显示空内容部分。

替代重定向页面

Alternate to Redirect Page

html

.htaccess

jquery

history.js