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

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

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

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

history.previous

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

history.length

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

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

history.back();

или

 history.go(-1);

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

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

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

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

Если кнопка «Назад» недоступна, резервный URL-адрес будет загружен через 500 мс, поэтому у браузера будет достаточно времени для загрузки предыдущей страницы. Загрузка резервной ссылки сразу после window.history.go(-1);этого заставит браузер использовать запасную ссылку, потому что сценарий 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);
}

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

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

это, кажется, делает трюк:

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

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

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

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

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

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

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

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

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

Я придумал следующий подход. Он использует событие 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").

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

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

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

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

Есть еще одно почти идеальное решение, взятое из другого 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.

в браузере есть кнопка «назад» и «вперед». Я придумаю решение по этому вопросу. но это повлияет на действие браузера вперед и вызовет ошибку в некоторых браузерах.

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

так что вы можете изменить хэш, как

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

чтобы получить никогда не показанный URL, то history.length получит истинную длину.

  var realHistoryLength = history.length - 1

но, это не всегда работает хорошо, и я не знаю почему, особенно когда url auto jump быстро.

Я пытался найти решение, и это лучшее, что я мог получить (но работает отлично, и это самое простое решение, которое я нашел даже здесь).

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

Решением было, как только приложение загрузилось, я просто заменил состояние истории:

history.replaceState( {root: true}, '', window.location.pathname + window.location.hash)

Таким образом, мне просто нужно проверить, history.state.rootпрежде чем вернуться. Если это правда, я делаю вместо истории замену:

if(history.state && history.state.root)
    history.replaceState( {root: true}, '', '/')
else
    history.back() 

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

Решение

'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()будем запускать метод, чтобы пользователь оставался на нашем веб-сайте. Этот URL будет эквивалентен тому, []который имеет длину 0, и 0 > 0является ложным. Следовательно, молча терпит неудачу. Конечно, вы можете записать что-нибудь или выполнить другое действие, если хотите.

'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 . Проверьте документацию, чтобы узнать больше об этом, прежде чем использовать это решение.

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

<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">

РЕДАКТИРОВАТЬ:

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

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