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

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

Ответы

Ответ 1

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

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

history.previous

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

history.length

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

alt text

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

history.back();

или

 history.go(-1);

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

Ответ 2

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

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

Ответ 3

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

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

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);
}

Ответ 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 не позволит script закрыть окно.

Ответ 5

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

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

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

Ответ 6

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

Я использовал событие '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 до сих пор).

Ответ 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 для загрузки подстраниц, поэтому я прекратил проверку этого значения в первом случае.

Ответ 8

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);

Ответ 9

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

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

Ответ 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").

Ответ 11

Существует еще одно идеальное решение, взятое из другого SO-ответа:

if( (1 < history.length) && document.referrer ) {
    history.back();
}
else {
    // If you can't go back in history, you could perhaps close the window ?
    window.close();
}

Кто-то сообщил, что он не работает при использовании target="_blank", но, похоже, работает для меня в Chrome.

Ответ 12

браузер имеет кнопку "Назад" и "Вперед". Я придумал решение по этому вопросу. но это повлияет на действие браузера и вызовет ошибку с некоторыми браузерами.

Он работает так: если браузер открывает новый URL-адрес, который никогда не был открыт, длина history.length будет расти.

чтобы вы могли изменить хеш, например

  location.href = '#__transfer__' + new Date().getTime()

чтобы получить не отображаемый url, тогда history.length получит истинную длину.

  var realHistoryLength = history.length - 1

но, он не всегда работает хорошо, и я не знаю, почему, особенно когда автоматически перескакивает URL-адрес.

Ответ 13

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

Если история страницы более одного, то мы можем вернуться на страницу, предшествующую текущей странице. Если нет, то эта вкладка является вновь открытой вкладкой, и нам нужно создать новую вкладку.

Иными словами, к ответам, связанным, мы не проверяем referrer как новая вкладка все еще будет иметь реферера.

if( (1 < history.length) {
    history.back();
}
else {
    window.close();
}

Ответ 14

var fallbackUrl = "home.php";
if(history.back() === undefined)
    window.location.href = fallbackUrl;

Ответ 15

Решение

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  }
}

Explaination

window.location.pathname выдаст вам текущий URI. Например, https://domain/question/1234/i-have-a-problem выдаст /question/1234/i-have-a-problem. См. Документацию о window.location для получения дополнительной информации.

Затем вызов функции split() даст нам все фрагменты этого URI. поэтому, если мы возьмем наш предыдущий URI, у нас будет что-то вроде ["", "question", "1234", "i-have-a-problem"]. См. Документацию о String.prototype.split() для получения дополнительной информации.

Вызов filter() здесь для того, чтобы отфильтровать пустую строку, созданную обратной косой чертой. Он будет возвращать только фрагмент URI, длина которого больше 1 (непустая строка). Таким образом, у нас будет что-то вроде ["question", "1234", "i-have-a-question"]. Это можно было бы написать так:

'use strict';
window.location.pathname.split('/').filter(function(fragment) {
  return fragment.length > 0;
});

См. Документацию о Array.prototype.filter() и назначении Destructuring для получения дополнительной информации.

Теперь, если пользователь пытается вернуться, находясь на https://domain/, мы не будем запускать оператор if и поэтому не window.history.back() вызывать метод window.history.back() чтобы пользователь оставался на нашем веб-сайте. Этот URL будет эквивалентен [] который имеет длину 0, а 0 > 0 - false. Следовательно, молча терпит неудачу. Конечно, вы можете что-то зарегистрировать или выполнить другое действие, если хотите.

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  } else {
    alert('You cannot go back any further...');
  }
}

Ограничения

Конечно, это решение не будет работать, если браузер не поддерживает History API. Проверьте документацию, чтобы узнать больше об этом, прежде чем использовать это решение.

Ответ 16

Я не уверен, что это работает, и оно полностью не проверено, но попробуйте следующее:

<script type="text/javascript">

    function goBack() {
        history.back();
    }

    if (history.length > 0) { //if there is a history...
        document.getElementsByTagName('button')[].onclick="goBack()"; //assign function "goBack()" to all buttons onClick
    } else {
        die();
    }
</script>

И где-то в HTML:

<button value="Button1"> //These buttons have no action
<button value="Button2">

EDIT:

Что вы также можете сделать, так это исследовать, какие браузеры поддерживают функцию back (я думаю, что все они делают), и использовать найденный стандартный объект обнаружения браузера JavaScript и подробно описан на эта страница. Тогда у вас могут быть две разные страницы: одна для "хороших браузеров", совместимая с кнопкой "Назад", а другая для "плохих браузеров", говорящая им, чтобы они обновили свой браузер.

Ответ 17

Проверьте, равен ли window.history.length 0.