Использование 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\">«Go back</a></p>";
Вернется одна страница.
echo "<p><a href=\"javascript:history.go(-2)\" title=\"Return to previous page\">«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 не существует.