использование jquery для загрузки html в div не позволяет мне переходить туда и обратно

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

  • заголовок.html

  • indexview.html

  • нижний колонтитул.html.

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

  • Фото.html

  • Контакты.html

  • Информация.html

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

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

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

http://jsfiddle.net/5by64tsn/

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

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


php jquery load browser-history
person smart548    schedule 30.11.2015    source источник
comment
Я не уверен, следую ли я на 100%, но насколько я понимаю, в основном вы хотите отслеживать, что должно быть загружено в зависимости от того, что вы нажали. Я предлагаю отслеживать это, используя #something в вашем URL-адресе. Возможно, если вы сделаете jsfiddle, я смогу дать вам лучшее решение.   -  person Chris    schedule 30.11.2015
comment
Ознакомьтесь с этим руководством, css-tricks.com/rethinking-dynamic-page- замена содержимого   -  person Wesley Smith    schedule 30.11.2015
comment
Я добавил jsfiddle. Дело в том, что DelightedD0D заключается в том, что при нажатии и загрузке div я не обновляю URL-адрес.   -  person smart548    schedule 30.11.2015
comment
Похоже, вы хотите управлять функцией кнопки «Назад», что-то вроде этого? Ссылка. Чтобы отслеживать все, что вам нужно было бы создать стек для страниц, выбранных пользователем, это то, что они имели в виду под popstate.   -  person pedrotorres    schedule 30.11.2015
comment
По сути, вы будете контролировать, что делает кнопка «Назад», и в зависимости от последнего элемента во всплывающем окне вы будете делать что-то другое внутри этой функции, которая переопределяет функцию «Назад» по умолчанию.   -  person pedrotorres    schedule 30.11.2015
comment
При навигации по сайту кнопка «Назад» не активна, если не когда я нажимаю, чтобы открыть форму для загрузки изображения. Итак, я не могу перемещаться по сайту с помощью кнопки «назад» и «вперед»... Как это реализовать?   -  person smart548    schedule 30.11.2015

Ответы (1)


arrow_upward
1
arrow_downward

То, чего вы надеетесь достичь, это не то, как работает история 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
});
person Jeffwa    schedule 30.11.2015
comment
Это делает кнопку «Назад» доступной для нажатия, но она все еще не работает должным образом: она не возвращает меня на предыдущую страницу. Если я в контакте, то я захожу на фото и нажимаю кнопку назад ничего не происходит. URL-адрес меняется, но это все. Все равно спасибо за подсказку ;) - person smart548; 30.11.2015
comment
Я не могу этого сделать, потому что contact.html — это не вся страница. Это просто то, что входит в div.. - person smart548; 30.11.2015
comment
То, что вы ищете, это именно то, на что ссылается DelightedD0D. Преимущество изменения URL-адреса заключается в том, что пользователь по-прежнему может добавить в закладки определенную страницу. - person Jeffwa; 30.11.2015
comment
Я знаю, но все же это не имеет смысла, потому что страница, которую я загружаю, - это не целая страница, а просто какой-то html, помещенный в погружение. На моей странице contact.html нет верхнего колонтитула, меню и нижнего колонтитула. Я не хочу вкладывать в него все эти вещи, потому что это не имеет смысла. Самое замечательное в использовании load() заключается в том, что вам не нужно перезагружать страницы каждый раз, когда вы что-то нажимаете... - person smart548; 01.12.2015