替代重定向页面答案

【问题标题】：Alternate to Redirect Page替代重定向页面
【发布时间】：2015-12-24 00:55:17
【问题描述】：

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

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

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

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

他们已经设置好，无论你在斜线后输入什么，它都会进入网站，他们是如何做到的？

【问题讨论】：

你看过页面上使用的javascript了吗？
是的@hopkins-matt...实际上这是一个古老的矿山项目，我写了这个网站很久以前使用的状态机。我有源文件，但我觉得答案在于 404 错误和从 .htaccess 文件重定向。由于我的知识有限，只有我只能将它与哈希符号一起使用。虽然我使用历史 JS，但我无法弄清楚的一件事是重定向。
哦。我想我看错了。因此，您不会尝试复制不存在页面的不完整加载。您正在尝试将那些不存在的页面转发到 404 而不是不完整的页面？
我可能会失去理智...忽略最后一条评论。你想要不完整的状态而不是 404，对吧？
是的...这正是我要找的...

标签： jquery html .htaccess history.js

【解决方案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 部分都不匹配，则使用mater.html 页面上的锚点Blank 来显示一个空的内容部分。

【讨论】：

是的，我认为我没有解释清楚，这与如何构建状态机无关，他们拥有它，因此无论您在斜线后输入什么，它都会进入站点，如何他们做到了吗？
太棒了，有什么我可以尝试帮助进一步澄清的吗？
不不......这就是一切。 .htaccess 文件重写了使用正则表达式的规则，并将主机 URL 之后的任何内容转换为散列，有效地将其转发回我正在寻找的站点。我从不知道您可以使用 .htaccess 文件来做到这一点，所以对于我的困惑，我深表歉意。
没问题。我也很困惑。哈哈

【解决方案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);
    })

}

这将使您无需刷新整个页面即可更改网站的任何部分。

【讨论】：

这就是改变历史的方法……我非常了解那部分并且知道如何做那部分。虽然这里有一些好点，我必须牢记......