Question

在我的页面上，内容容器根据单击的列表项（新闻，视频，博客等）保存不同的信息这可以通过使用jQuery的加载方法加载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，它将重写为（例如）index.php。然后，Index.php可以具有查看所请求URL的javascript逻辑，以使用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>

Answer 2

在页面加载时，检查window.hash。如果它不是空的，那么在<a>中点击<ul>时执行相同的操作。但是要不重新发明轮子，请查看javascript路由器，例如crossroads.js。

在AJAX加载后创建可共享链接

2 个答案: