Как проверить, может ли пользователь вернуться в историю браузера или нет

Question

Я хочу использовать JavaScript, чтобы увидеть, есть ли история или нет, я имею в виду, доступна ли кнопка назад в браузере или нет.

Answer 1

Краткий ответ: Вы не можете.

Технически существует точный способ, который бы проверял свойство:

history.previous

Однако это не будет работать. Проблема в том, что в большинстве браузеров это считается нарушением безопасности и обычно просто возвращает undefined .

history.length

Это свойство, которое предлагали другие ...
Однако , длина не работает полностью, потому что она не указывает , где в истории вы находитесь. Кроме того, он не всегда начинается с одного номера. Например, браузер, для которого не настроена целевая страница, начинается с 0, а другой браузер, использующий переводящую страницу, - с 1.

Большую часть времени добавляется ссылка, которая вызывает:

history.back();

или

 history.go(-1);

и ожидается, что если вы не сможете вернуться назад, то нажатие на ссылку ничего не даст.

Answer 2

Есть еще один способ проверить - проверить реферер. На первой странице обычно будет пустой реферер ...

if (document.referrer == "") {
    window.close()
} else {
    history.back()
}

Answer 3

Мой код позволяет браузеру вернуться на одну страницу назад, и в случае неудачи он загружает запасной URL.Он также обнаруживает изменения хэштегов.

Когда кнопка «Назад» была недоступна, резервный URL-адрес будет загружен через 500 мс, поэтому у браузера будет достаточно времени для загрузки предыдущей страницы.Загрузка резервного URL-адреса сразу после window.history.go(-1); приведет к тому, что браузер будет использовать резервный URL-адрес, поскольку сценарий js еще не остановился.

function historyBackWFallback(fallbackUrl) {
    fallbackUrl = fallbackUrl || '/';
    var prevPage = window.location.href;

    window.history.go(-1);

    setTimeout(function(){ 
        if (window.location.href == prevPage) {
            window.location.href = fallbackUrl; 
        }
    }, 500);
}

Answer 4

это похоже на хитрость:

function goBackOrClose() {  

    window.history.back();
    window.close(); 

    //or if you are not interested in closing the window, do something else here
    //e.g. 
    theBrowserCantGoBack();

}

Вызовите history.back (), а затем window.close ().Если браузер сможет вернуться в историю, он не сможет перейти к следующему утверждению.Если он не может вернуться назад, он закроет окно.

Однако обратите внимание, что если страница была достигнута путем ввода URL-адреса, то firefox не позволит сценарию закрыть окно.*

Answer 5

Вот как я это сделал.

Я использовал событие beforeunload , чтобы установить логическое значение. Затем я установил тайм-аут, чтобы посмотреть, сработал ли «beforeunload».

var $window = $(window),
    $trigger = $('.select_your_link'),
    fallback = 'your_fallback_url';
    hasHistory = false;

$window.on('beforeunload', function(){
    hasHistory = true;
});

$trigger.on('click', function(){

    window.history.go(-1);

    setTimeout(function(){
        if (!hasHistory){
            window.location.href = fallback;
        }
    }, 200);

    return false;
});

Похоже, что работает в основных браузерах (пока проверено FF, Chrome, IE11).

Answer 6

Вы не можете напрямую проверить, используется ли кнопка «Назад».Вы можете посмотреть на history.length>0, но это будет справедливо, если есть страницы впереди текущей страницы.Вы можете быть уверены , что кнопка «Назад» не работает, когда history.length===0.

Если этого недостаточно, все, что вы можете сделать, это позвонить history.back() и, если ваша страницавсе еще загруженный впоследствии, кнопка «Назад» недоступна!Конечно, это означает, что если кнопка «назад» доступна , вы только что ушли со страницы.Вам не разрешено отменять навигацию в onunload, поэтому все, что вы можете сделать, чтобы остановить возвращение, - это вернуть что-то из onbeforeunload, что приведет к появлению большого раздражающего запроса.Это того не стоит.

На самом деле, обычно это действительно плохая идея - делать что-либо с историей.История навигации для браузера Chrome, а не веб-страниц.Добавление ссылок «назад» обычно вызывает больше путаницы у пользователя, чем стоит.

Answer 7

В моих проектах используется фрагмент:

function back(url) {
    if (history.length > 2) {
        // if history is not empty, go back:
        window.History.back();
    } else if (url) {
        // go to specified fallback url:
        window.History.replaceState(null, null, url);
    } else {
        // go home:
        window.History.replaceState(null, null, '/');
    }
}

К вашему сведению: я использую History.js для управления историей браузера.

---

Зачем сравнивать history.length с номером 2?

Поскольку стартовая страница Chrome считается первым элементом в истории браузера.

---

Существует несколько возможностей history.length и поведения пользователя:

• Пользователь открывает новую пустую вкладку в браузере и затем запускает страницу. history.length = 2 и мы хотим отключить back() в этом случае, потому что пользователь перейдет на пустую вкладку.
• Пользователь открывает страницу в новой вкладке , щелкая ссылку где-то ранее. history.length = 1 и снова мы хотим отключить метод back().
• И, наконец, пользователь попадает на текущую страницу после перезагрузки нескольких страниц . history.length > 2 и теперь back() можно включить.

---

Примечание: Я опускаю случай, когда пользователь попадает на текущую страницу после нажатия на ссылку с внешнего сайта без target="_blank".

Примечание 2: document.referrer пусто, когда вы открываете сайт, вводя его адрес, а также когда сайт использует ajax для загрузки подстраниц, поэтому я прекратил проверку этого значения в первом случае.

Answer 8

Будьте осторожны с window.history.length, потому что он также включает записи для window.history.forward()

Таким образом, вы можете иметь window.history.length с более чем 1 записями, но без записей истории назад.Это означает, что ничего не произойдет, если вы выстрелите window.history.back()

Answer 9

history.length бесполезен, так как не показывает, может ли пользователь вернуться в историю.Также разные браузеры используют начальные значения 0 или 1 - это зависит от браузера.

Рабочим решением является использование события $(window).on('beforeunload', но я не уверен, что оно будет работать, если страница загружается через ajax и используетpushState для изменения истории окна.

Итак, я использовал следующее решение:

var currentUrl = window.location.href;
window.history.back();
setTimeout(function(){
    // if location was not changed in 100 ms, then there is no history back
    if(currentUrl === window.location.href){
        // redirect to site root
        window.location.href = '/';
    }
}, 100);

Answer 10

Я придумал следующий подход.Он использует событие onbeforeunload, чтобы определить, начинает ли браузер покидать страницу или нет.Если это не произойдет в определенный промежуток времени, он просто перенаправит на запасной вариант.

var goBack = function goBack(fallback){
    var useFallback = true;

    window.addEventListener("beforeunload", function(){
      useFallback = false;
    });

    window.history.back();

    setTimeout(function(){
        if (useFallback){ window.location.href = fallback; }
    }, 100); 
}

Вы можете вызвать эту функцию, используя goBack("fallback.example.org").