javascript - AJAX 加载后创建可共享链接

Question

在我的页面上，内容容器包含不同的信息，具体取决于单击的列表项(新闻、视频、博客等) 这是通过使用 jQuery 的 load 方法加载 html 片段来实现的，如下所示:

$('#container').load('blog.html'); // file from my domain

加载后，我可以使用以下方法更新 URL:

window.history.pushState("www.mysite.com", "mysite", "/blog"); 

或者更改哈希值:

window.location.hash = "blog";

当直接访问该链接时，这会导致错误，因为我的主机上不知道这样的页面。 AJAX 加载后，我想知道使页面的当前状态可共享的最佳方法是什么(我将链接发送给某人，当他们访问它时，他们会看到页面的状态，就像我时一样)分享了链接)？该链接类似于:www.mysite.com/blog。

AJAX 加载:

$('li a').on('click', function(){

    var file = this.id;
    $('#container').load(file +'.html');

    // window.history.pushState("www.mysite.com", "mysite", "/" + file); or..
    // window.location.hash = file;
    return false;
});

P.S. 为了简单起见，我想避免使用 php，但我愿意接受所有建议。

Answer 1

好吧，如果你使用哈希，正如你在OP中已经声明的那样，当你直接访问它时，你应该不会出现错误。 (示例:www.mysite.com/#blog)

加载时 javascript 可以检查是否设置了哈希值，并再次执行必要的 ajax 调用以从直接链接提供页面服务。 (顺便说一句，PHP无法看到哈希值，因此仅使用哈希值，将无法从PHP服务器端控制。)

$.ready( function() {
  if (window.location.hash == "blog") $(#container).load("blog.html");
});

使用pushState(例如:www.mysite.com/blog)是一个不同的故事......那需要您创建一个.htaccess，它将重写(例如)索引.php。然后，Index.php 可以使用 javascript 逻辑来查看请求的 url，以使用 Ajax 再次加载所需的内容。 (或者即使没有 ajax，如果您使用 PHP 进行)

javascript(配置 .htaccess 以重写保存此 javascript 的文件后):

$.ready( function() {
  if (window.location.pathname == "/blog") $(#container).load("blog.html");
});

或在 php 中(配置 .htaccess 以重写保存此 php 的文件后):

<div id="container">
<?php
    if ($_SERVER["REQUEST_URI"] == "/blog") {
        include("blog.html");
    }
?>
</div>