Чи можете ви користуватися хеш-навігацією, не впливаючи на історію?


100

Боюся, це може бути неможливим, але чи є спосіб змінити хеш-значення URL-адреси, не залишаючи запис в історії браузера і не перезавантажуючись ? Або еквівалент?

Що стосується конкретики, я розробляв основні хеш-навігації за напрямками:

//hash nav -- works with js-tabs
var getHash = window.location.hash;
var hashPref = "tab-";
function useHash(newHash) {
    //set js-tab according to hash
    newHash = newHash.replace('#'+hashPref, '');
    $("#tabs li a[href='"+ newHash +"']").click();
}
function setHash(newHash) {
    //set hash according to js-tab
    window.location.hash = hashPref + newHash;

    //THIS IS WHERE I would like to REPLACE the location.hash
    //without a history entry

}
    // ... a lot of irrelavent tabs js and then....

    //make tabs work
    $("#tabs.js-tabs a").live("click", function() {
        var showMe = $(this).attr("href");
        $(showMe).show();
        setHash(showMe);
        return false;
    });
    //hash nav on ready .. if hash exists, execute
    if ( getHash ){
        useHash(getHash);
    }

Очевидно, використовуючи jQuery. Ідея полягає в тому, що в цьому конкретному випадку 1) змушення користувача повертатися назад через кожну зміну вкладки може ефективно "перемикати кнопку назад", накопичуючи непотрібні посилання, і 2) не зберігати, на якій вкладці вони перебувають в даний момент, якщо натиснути оновити. роздратування.


Чому ви хочете змінити хеш, якщо ви не хочете відслідковувати історію? : |
Ionuț Staicu

10
Оскільки при оновленні було б найкраще представити користувачеві вкладку, на якій вони перебувають, але оскільки вони можуть перегортати вкладки вперед і назад між вкладками, це буде перенасичувати їх історію записами без необхідності, роблячи кнопку "назад" насправді менш корисною. Це лише приклад - це може бути для будь-якого часу, коли потрібно зберегти тимчасовий стан, але не хочеться покладатися на файли cookie або заповнювати тимчасовий файл користувача. Коли ви оновлюєте, вміст js є таким, як ви його покинули - ви не покинули сторінку, і це не точка переходу до сторінки psuedo, тому запис історії може заважати лише стандартному навігації.

Відповіді:


95

location.replace("#hash_value_here");добре працював для мене, поки я не виявив, що він не працює на IOS Chrome. У такому випадку використовуйте:

history.replaceState(undefined, undefined, "#hash_value")

history.replaceState () працює точно так само, як history.pushState (), за винятком того, що substituState () змінює поточний запис історії замість створення нового.

Не забудьте зберегти #або остання частина URL-адреси буде змінена.


3
Повністю шлях для сучасних браузерів; будьте в курсі часткової історії сесії підтримки , однак має управління.
Метт

Я розгублений, як це використовувати. Чи варто все-таки користуватися, window.location.hash = 'my-hash';після чого слід history.replaceState(undefined, undefined, "#my-hash")?
Брам Ванрой

2
@BramVanroy Ні, використання останнього достатньо.
Люсія

2
Якщо ви не використовуєте: цільові селектори ..., то функції історії марні, оскільки ця частина специфікації (css взаємодія з операційними програмами історії), схоже, наразі не визначена, і стиль не перераховується в історію заміни більшості / всіх браузерів.
морфи

@Luxiyalu, чим history.replaceStateвідрізняється від location.replace?
Pacerier

99
location.replace("#hash_value_here"); 

Згадане вище, здається, робить те, що ви хочете.


4
Це воно. І якщо у вас є сегменти uri, файл location.replace (window.location + "#hash") збереже їх.
сідельників

7
Відправивши цей метод, набагато чіткіше, хотілося б, щоб його було зазначено як правильну відповідь.
joeellis

14
window.location.replace(('' + window.location).split('#')[0] + '#' + hash);просто оновити хеш
johnstorm

1
Я тестую його в Chrome 30 під Windows 8, якщо я перейду до Історії Chrome і під моєю тестовою URL-адресою виберіть "Більше з цього веб-сайту", я можу побачити всі хеші, додані цим методом.
Алекс Ван

1
Остерігайтеся, що location.replace ('# hash_value_here') змінює лише хеш-фрагмент, а не шлях, тому він не викликає завантаження сторінки .... За винятком випадків, коли документ містить базовий тег: <base href ="http://example.com/" /> Якщо він містить базовий тег , тоді, коли ви використовуєте метод заміни лише з ведучим, "#hash_value_here"він насправді буде таким, як якщо б ви сказали `location.replace (' example.com/#hash_value_here' ). Це здається очевидним, коли ви читаєте його тут, але це прихильність, коли ви знаходитесь на сторінці з фрагментом шляху і не розумієте, що база встановлена.
Тайлер Кастен

6

Редагувати: Пройшло вже пару років, і браузери еволюціонували.

@ Відповідь Луксіялу це шлях

- Стара відповідь -

Я теж вважаю, що це неможливо (в цей час). Але навіщо вам змінювати значення хеша, якщо ви не збираєтесь його використовувати?

Я вважаю, що головна причина, чому ми використовуємо хеш-значення як програмісти, - це дозволяти користувачеві робити закладки на наші сторінки або зберігати стан в історії браузера. Якщо ви нічого не хочете робити з цього, просто збережіть стан у змінній та працюйте звідти.

Я думаю, що причина використовувати хеш - це робота зі значенням, яке знаходиться поза нашим контролем. Якщо він вам не потрібен, то це, ймовірно, означає, що ви все маєте під своїм контролем, тому просто зберігайте стан у змінній та працюйте з ним. (Мені подобається повторювати)

Я сподіваюся, що це вам допоможе. Можливо, є більш просте рішення вашої проблеми.

ОНОВЛЕННЯ: Як щодо цього:

  1. Налаштуйте перший хеш і переконайтеся, що він зберігається в історії браузера.
  2. Коли буде вибрана нова вкладка, зробіть це window.history.back(1), це призведе до того, що історія повернеться з вашого першого init хеша.
  3. Тепер ви встановите новий хеш, тому вкладка зробить лише один запис в історії.

Можливо, вам доведеться використовувати деякі прапори, щоб знати, чи можна видалити поточний запис, повернувшись назад, чи просто пропустити перший крок. І щоб переконатися, що ваш метод завантаження для "хеша" не виконується, коли ви змушуєте history.back.


Цілком можливо, що мені щось не вистачає (виснаження - це приємний привід, я піду з цим), але ти кажеш, що я можу встановити змінну, яка збереже змінене значення при перезавантаженні? Крім печива? (Печиво здається непосильним, якось ..) Можливо, це було не ясно. Я буду використовувати хеш-значення - особливо при перезавантаженні. Дякуємо за відгук!

Щоб уточнити моє уточнення: якщо користувач натискає перезавантажити. Ось для чого і хеш. Я все ще намагаюся уникати перезавантаження при їх звичайному використанні (зміна / клацання вкладок).

Гаразд, ви будете використовувати деякі значення для інформації після перезавантаження. Ну, на жаль, хеш-значення буде вибране історією браузера. Вибачте, що сказати це, але з мого досвіду, файли cookie - найкраща ставка. Якщо ви хочете щось, що історія браузера не виявляє, але зберігається після перезавантаження, на жаль, файли cookie. Якщо користувач натискав посилання, то ви можете встановити посилання на запит ( ?mystate=greatness), навіть якщо він не повинен бути ajax, ви можете зберегти інформацію для читання JavaScript при ініціалізації запиту.
гуцарт

Так, хеш - це збереження інформації користувача після натискання перезавантаження, але проблема для вас ситуація полягає в тому, що деякі браузери збережуть ці зміни в історії, саме так вони працюють ... :(
guzart

Так, думаю, ти маєш рацію. Ну добре. (

-1

Ви завжди можете створити слухач подій, щоб вловлювати події клацання на гіперпосиланні та у функцію зворотного виклику поставити e.preventDefault (), що повинно перешкоджати браузеру вставляти його в історію.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.