У меня проблемы с history.js, которые я не знаю, как обращаться.
На веб-сайте, над которым я работаю, мы используем history.js для перемещения между страницами – если вы нажмете на любую ссылку history.js загрузите URL-адрес через AJAX, обновите URL-адрес и создайте эффект перехода для контента. Однако у нас есть также индексная страница с элементами; если вы нажмете на элемент, history.js не будет использоваться – содержимое загружается через ajax и отображается во всплывающем окне. Также существует ситуация, когда пользователь может открыть URL-адрес элемента (например, на новой вкладке или из поиска), в этом случае пользователь должен быть перенаправлен на индексную страницу с хешем URL-адреса элемента, который сообщает JS о запуске события нажав ссылку, содержащую хэш-URL. Однако history.js запускается и перенаправляется на URL-адрес элемента.
Повторить:
Я использую HTML5-версию history.js (которая, как я думаю, не должна вести себя так, но не так), которая перенаправляется, как только загружается history.js (никаких других скриптов на странице нет). Есть ли другой способ решить эту проблему, кроме изменения перенаправления на / items /? / Item- [id] /, который (я думаю) должен решить проблему.
Чтобы проиллюстрировать проблему:
a.html
<html> <body> <script type='text/javascript' src="native.history.js"></script> <a href="b.html#/b/">b</a> </body> </html> b.html
<html> <body> <script type='text/javascript' src="native.history.js"></script> <a href="a.html#/a/">a</a> </body> </html>
Использование native.history.js , который является чистой версией HTML5 версии history.js без каких-либо привязок к структуре, найденных здесь: https://github.com/browserstate/history.js/blob/master/scripts/bundled-uncompressed/html5/native .history.js
Он иллюстрирует точку без каких-либо переадресаций. Как только вы нажмете на любую ссылку, вы переадресовываете history.js в URL после хэша.
Я решил изменить history.js напрямую и добавить параметр preventHashRedirect
- #1820 // if (currentState ) { + #1820 // if (!History.options.preventHashRedirect && currentState ) {
который решает проблему. (в основном хэш-изменения не считаются popstates и не вызывают изменения состояния).
Вероятно, isTraditionalAnchor функция isTraditionalAnchor (которая определяет, что считается якорем и какой URL-адрес после #) обрабатывает все хеши, которые начинаются с ! было бы лучшей идеей.
- #1052 // var isTraditional = !(/[\/\?\.]/.test(url_or_hash)); + #1052 // var isTraditional = /^!/.test(url_or_hash) ? true : !/[\/\?\.]/.test(url_or_hash);
Таким образом, вы можете фактически предотвратить history.js, чтобы повлиять на любое перенаправление, начиная с ! , (например, если у вас есть якорь с именем my.puppy , то выполнение <a href='#!my.puppy'> не приведет к перенаправлению через history.js.
Нижеследующая идея @ Мартина Баркера все еще действительна, хотя добавление дополнительных перенаправлений поражает меня немного … грубо.
Удалено. Поскольку вы просто не можете использовать History.js, как вы хотите, так как вы будете менять основную функцию в системе, которая вызовет неисчислимые проблемы.
вам лучше сделать свой собственный, поскольку вы используете jQuery, это довольно просто
a.html
<a href="b.html" class="hashlink">B</a>
b.html
<a href="a.html" class="hashlink">A</a>
Это обеспечит событие HTML5 .onhashchange в окне.
// support onhashchange for browsers without support (function(w, l, u){ 'use strict'; if(w.onhashchange == u ){ w.onhashchange = function(curr, old){}; w.oldHash = l.hash.replace("#", "");; w.onhashchangeCheck = function(){ var hash = l.hash.replace("#", ""); if(hash != w.oldHash){ w.onhashchange(hash, w.oldHash); w.oldHash = hash; } } setInterval(w.onhashchangeCheck, 100); } })(window, document.location);
это показывает, как вы можете использовать onhashchange и настраивать теги <a></a> с hashlink класса, чтобы изменить хэш вместо перенаправления браузера
// handle using hash changes (function($, w, l, d, u){ 'use strict'; w.onhashchange = function(new, old){ // this should handle loading your content via ajax // on $.ajax().success should handle reading the file into the // content area of your sight alert("hash has said you want to load '"+new+"'"); } $(d).ready(function(){ $('a.hashlink').on('click', function(e){ l.hash = $(this).attr('href'); e.preventDefualt(); // jQuery stop the a link default behavioured of redirecting //return false; // legacy jQuery support if you need it for the above }); }); })(jQuery, window, document.location, document);
Обратите внимание, что на javascript есть au в ближайшей функции, но я не подаю аргумент в функцию для этой переменной, это преднамеренно, чтобы создать undefined результат, если какой-то из вашего кода имеет var undefined = 'something it should not'