Создать общую ссылку после загрузки AJAX

Question

На моей странице контейнер содержимого содержит различную информацию, в зависимости от того, какой элемент списка был нажат (новости, видео, блог и т. Д.) Это достигается путем загрузки в html-фрагментах с помощью метода загрузки jQuery :

$('#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 может проверить, установлен ли хэш, и выполнить необходимые айакс-вызовы, чтобы обслуживать страницу по прямой ссылке. (PHP не может видеть хэш, кстати, поэтому, используя только хэш, не будет управляема со стороны PHP сервера.)

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

Использование PushState (пример: www.mysite.com/blog) это другая история ... Это один будет вам нужно создать .htaccess, который перепишет (например) index.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> 

Answer 2

Нагрузка на страницу, проверьте наличие window.hash. Если он не пуст, сделайте то же самое, что и вы, когда <a> будет нажата в вашем <ul>. Но чтобы не изобретать колесо, посмотрите на javascript-маршрутизаторы, например crossroads.js.