Question

我试图弄清楚如何进行历史状态操作，我看到一个网站有一个很好的功能，如果你在斜线后面放任何东西，该网站仍将加载但由于其中的缺陷处于不完整的状态国家机器。我想知道你如何让网站抓住地址并向前转？我唯一的猜测是更改.htaccess文件，但我不确定从哪里开始...

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

http://bufmi.org/about（这是网站的示例）

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

他们设置了无论你在斜线进入网站后放入什么，他们是如何实现的？

Answer 1

这是通过某些脚本实现的，具体取决于您是否位于根URL，还有.htaccess重写规则将哈希值添加到基本URL之外的其他任何内容。

.htaccess部分由以下内容处理：

RewriteRule ^([a-zA-Z0-9_-]+)$ /#$1 [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 file加载到页面上的特定部分。如果片段标识符与scripts.js中的任何if/else if部分都不匹配，则Blank页面上的锚点mater.html将用于显示空的内容部分。

Answer 2

这是自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);
    })

}

这样您就可以在不刷新整个网页的情况下更改网站的任何部分。

替代重定向页面

2 个答案: