использование JQuery для загрузки HTML в DIV не позволяет мне идти вперед и назад

Question

использование JQuery для загрузки HTML в DIV не позволяет мне идти вперед и назад

Я на первых шагах с jquery. У меня есть файл index.php, который включает в себя:

header.html
indexview.html
footer.html.

В файле indexview.html есть два элемента div. Один слева (меню) и один справа (div id = «content»). Всякий раз, когда я щелкаю по пункту в левом меню, jquery отвечает за загрузку других html-страниц (и, в конечном счете, за выборку данных из БД благодаря ajax) в правильный div (div id = «content»). Мне действительно нравится такой подход, но проблема в том, что если, например, я загружаю:

Photo.html
Contacts.html
Info.html

В основной div (правый: div id = «content»), а затем я нажимаю стрелку назад, он просто приводит меня к index.php с загруженной страницей indexview.html (вместо того, чтобы показывать мне контакты-> фото-> indexview).

Я уже провел некоторые поиски в Интернете и обнаружил, что должен создать что-то, что извлекает URL-адрес, благодаря обработчику событий «popstate». Я уже немного углубился в это или в небольшую структуру, которая может позволить мне справиться со всем этим, но, тем не менее, я не до конца понимаю, что я должен делать. Предметы слева НЕ являются «<a> ссылки «и не имеют атрибутов href, конечно. Должен ли я заменить каждый элемент (теперь элемент li) на <a> элемент? Если да, то как мне заставить историю работать так, как я хочу?
Постскриптум Конечно, каждый раз, когда я загружаю что-то в свой правильный div (будь то photo.html, контакты, html и т. Д.), Мой URL НЕ меняется.

Вот немного jsfiddle (не уверен, может ли это помочь: сомневайтесь в этом). Нажатие на любой элемент в меню делает jquery load () html-страницей в правом div («переопределяет» div, где вы «находите Welcome, это веб-интерфейс интегрированной системы управления информацией … и т. Д.!»).

http://jsfiddle.net/5by64tsn/

   $("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
});

Когда я нажимаю listContact, contacts.html загружается в div содержимого.

0

browser-history jquery load php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

То, чего вы надеетесь достичь, это не то, как работает Ajax / история браузера. Ajax-вызовы не зависят от истории браузера и не влияют на кнопки «назад» / «вперед» без добавления кода для этого. Вы упомянули popState, что близко к тому, что вы хотите. Вы на самом деле хотите pushState,

// Add the url to history
window.history.pushState(null, null, [url that you load via Ajax goes here]);

Используя ваш пример:

$("#listContact").click(function(){
$("#content").load('view/contacts.html');
document.title = 'Contacts';
window.history.pushState(null, null, '/view/contacts.html'); // You'll need to add a leading '/' otherwise the url will just keep appending the relative path
});

1