Использование Javascript: как создать ссылку "Назад", которая выводит пользователя на ссылку, если нет истории для вкладки или окна?

EDIT-2: Ни один из ответов не работает. Даже тот, который я ранее отмечал как ответ на этот вопрос. Любая помощь приветствуется. Спасибо.

Во-первых, я нашел googled для создания ссылки "Назад", которая позволяет пользователю вернуться на предыдущую страницу, и это два способа сделать это:

<a href="javascript:history.go(-1)">[Go Back]</a>

и...

<a href="#" onclick="history.go(-1);return false;">[Go Back]</a>

Какой из этих двух вариантов лучше? И почему? (Кроме того, проследите за совместимостью с браузером.)

Это одна половина вопроса. Теперь, если моя первая страница посетит пользователя, ссылка "Назад" не будет работать, верно? (Поскольку там нет ранее существовавшей истории для окна или вкладки.) В этом случае я хочу, чтобы ссылка была отложена и запустила пользователя http://example.com.

то есть. если история существует, пользователь переходит на предыдущую страницу, а если нет, то он принимает http://example.com.

Как мне это сделать? Надеюсь, кто-то может помочь.

РЕДАКТИРОВАТЬ: Обратите внимание: я не знаю JavaScript, поэтому любезно объясните свой ответ. Спасибо.

Ответ 1

Вы не можете проверить window.history.length, поскольку он содержит количество страниц, посещенных вами в общей сложности в данном сеансе:

window.history.length (целое число)

Только для чтения. Возвращает количество элементов в истории сеансов, включая загруженную в данный момент страницу. Например, для страницы, загруженной в новую вкладку, это свойство возвращает 1. Cite 1

Предположим, что пользователь посещает вашу страницу, нажимает на некоторые ссылки и возвращается:

www.mysite.com/index.html <-- first page and now current page                  <----+
www.mysite.com/about.html                                                           |
www.mysite.com/about.html#privacy                                                   | 
www.mysite.com/terms.html <-- user uses backbutton or your provided solution to go back

Теперь window.history.length равно 4. Вы не можете пройти через элементы истории из-за соображений безопасности. В противном случае on мог бы прочитать историю пользователя и получить идентификатор сеанса онлайн-банкинга или другую конфиденциальную информацию.

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

window.goBack = function (e){
    var defaultLocation = "http://www.mysite.com";
    var oldHash = window.location.hash;

    history.back(); // Try to go back

    var newHash = window.location.hash;

    /* If the previous page hasn't been loaded in a given time (in this case
    * 1000ms) the user is redirected to the default location given above.
    * This enables you to redirect the user to another page.
    *
    * However, you should check whether there was a referrer to the current
    * site. This is a good indicator for a previous entry in the history
    * session.
    *
    * Also you should check whether the old location differs only in the hash,
    * e.g. /index.html#top --> /index.html# shouldn't redirect to the default
    * location.
    */

    if(
        newHash === oldHash &&
        (typeof(document.referrer) !== "string" || document.referrer  === "")
    ){
        window.setTimeout(function(){
            // redirect to default location
            window.location.href = defaultLocation;
        },1000); // set timeout in ms
    }
    if(e){
        if(e.preventDefault)
            e.preventDefault();
        if(e.preventPropagation)
            e.preventPropagation();
    }
    return false; // stop event propagation and browser default event
}
<span class="goback" onclick="goBack();">Go back!</span>

Обратите внимание, что typeof(document.referrer) !== "string" важен, поскольку разработчики браузера могут отключить реферер из-за соображений безопасности (хэши сеанса, пользовательские URL-адреса GET). Но если мы обнаружим реферер, и он пуст, он, скорее всего, сохранит, чтобы сказать, что нет предыдущей страницы (см. Примечание ниже). Тем не менее, может возникнуть какая-то странная причуда браузера, поэтому безопаснее использовать таймаут, чем использовать простое перенаправление.

EDIT: Не используйте <a href='#'>...</a>, так как это добавит еще одну запись в историю сеансов. Лучше использовать <span> или какой-либо другой элемент. Обратите внимание: typeof document.referrer всегда "string" и не пуст, если ваша страница находится внутри фрейма (i).

См. также:

Ответ 2

проверьте window.history.length или просто history.length

EDIT: некоторые браузеры начинают свою историю с 0, другие с 1. настраивают соответственно.

если оно имеет значение 1, это означает, что это первая страница в этом окне/вкладке - тогда вы можете перенаправить JS.

<script>
    function backAway(){
        //if it was the first page
        if(history.length === 1){
            window.location = "http://www.mysite.com/"
        } else {
            history.back();
        }
    }
</script>

<a href="#" onClick="backAway()">Back</a>

Ответ 3

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

<a href="javascript:history.back();">[Go Back]</a>

Ответ 4

Причина использования return:false; хорошо объясняется в этом другом вопросе.

Для другой проблемы вы можете проверить referrer, чтобы узнать, пуст ли он:

    function backAway(){
        if (document.referrer == "") { //alternatively, window.history.length == 0
            window.location = "http://www.example.com";
        } else {
            history.back();
        }
    }

<a href="#" onClick="backAway()">Back Button Here.</a>

Ответ 5

echo "<p><a href=\"javascript:history.go(-1)\" title=\"Return to previous page\">&laquo;Go back</a></p>";

Вернется одна страница.

echo "<p><a href=\"javascript:history.go(-2)\" title=\"Return to previous page\">&laquo;Go back</a></p>";

Вернется назад две страницы.

Ответ 6

это похоже на трюк:

function goBackOrGoToUrl() {    

    window.history.back();
    window.location = "http://example.com";

}

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

Ответ 7

Следующий код помогло.

HTML:

<div class="back" onclick="goBackOrGoHome()">
  Back
</div>

JS:

home_url = [YOUR BASE URL];

pathArray = document.referrer.split( '/' );
protocol = pathArray[0];
host = pathArray[2];

url_before = protocol + '//' + host;

url_now = window.location.protocol + "//" + window.location.host;


function goBackOrGoHome(){
  if ( url_before == url_now) {
    window.history.back();    
  }else{
    window.location = home_url;
  };
}

Итак, вы используете document.referrer, чтобы установить домен страницы, из которой вы пришли. Затем вы сравниваете это с вашим текущим URL, используя window.location.

Если они из одного домена, это означает, что вы отправляетесь со своего сайта и отправляете их window.history.back(). Если они не совпадают, вы едете откуда-то еще, и вы должны перенаправлять домой или делать все, что вам нравится.

Ответ 8

Добавлен новый ответ для отображения отформатированного кода:

Дело в том, что вы проверяли document.referer, потому что вы были в ff, он возвращался всегда верно, тогда он переходил на http://mysite.com. Попробуйте следующее:

function backAway(){
    if (document.referrer) {
        //firefox, chrome, etc..
        i = 0;
    } else {
        // under ie
        i = 1;
    }
    if (history.length>i)
    {
        // there are items in history property
        history.back();
    } else {
        window.location = 'http://www.mysite.com/';
    }
    return false;
}

Ответ 9

просто используйте файлы cookie для сохранения списка посещенных страниц.

и примените некоторые, если else.

EDIT: также используйте ServerVariables HTTP_REFERER.

Ответ 10

Вам нужно проверить как document.referrer, так и history.length, как в моем ответе на аналогичный вопрос: fooobar.com/questions/1263/...

Ответ 11

Как использовать функцию замены истории, чтобы добавить сайт в историю браузеров?

Попробуйте выполнить следующее, как только загрузится окно -

history.replaceState("example", "title", "http://www.example.com");

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

Ответ 12

Вы должны использовать переменную окна - window.referrer. Эта переменная содержит последнюю страницу, которую посетил пользователь, если он попал на текущую страницу, щелкнув ссылку. Например:

  function goBack() {
    if(document.referrer) {
      window.location.href = document.referrer;

      return;
    } 

    window.location.pathname = '/';
  }

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