Javascript: подстановка нового адреса сайта с отсчётом времени до перехода
Тема избитая, поэтому я лишь приведу использованное сегодня решение и кратко сошлюсь на альтернативы.
Наш подход уместен, когда мы можем легко внедрить нужную разметку и код в шаблон страниц сайта.
В простейшем случае достаточно такого Javascript-кода:
<script>
setTimeout(function(){
window.location.href = "http://new-site.com";
// Задержка может предотвратить проблемы, связанные с немедленной переадресацией
}, 3000); // 3 секунды
</script>
или же
window.location.replace("http://new-site.com");
если мы не хотим, чтобы старый линк оставался в истории браузера.
Аналогично через jQuery:
$(location).prop('href', 'http://new-site.com');
Если нужно сохранить часть URL после домена, то
<script>
setTimeout(function(){
window.location = "http://new-site.com" + window.location.pathname;
}, 3000); // 3 секунды
</script>
В реальности обычно неплохо сообщать пользователю новый адрес, перекидывать на него возможные get-параметры URL и вести отсчёт времени, вот нужный нам скрипт с предшествующей разметкой HTML:
<p>Наш новый адрес: <span id="newAddr"></span> (<span id="redirTime"></span>)</p>
<script>
(function(url,urlId,time,timeId) {
document.getElementById(urlId).innerHTML = '<a href="'+url+'" target="_blank">'+url+'</a>';
let timeElem = document.getElementById(timeId);
timeElem.innerHTML = time;
let timeLeft = time;
let downloadTimer = setInterval(function() {
if (timeLeft <= 0){
clearInterval(downloadTimer);
timeElem.innerHTML = 0;
window.location = url + window.location.pathname + window.location.search;
}
else {
timeElem.innerHTML = timeLeft;
}
timeLeft--;
}, 1000);
}('http://new-site.com','newAddr',3,'redirTime'));
//Новый URL без "/" в конце, id элемента для вывода URL,
//время задержки в сек., id элемента для вывода времени
</script>
Есть и другие способы.
1. Редирект через HTML, добавить в секцию <head> тег вида
<meta http-equiv="refresh" content="0;url=http://new-site.com">
Вместо 0 можно указать желаемое количество секунд, а также предусмотреть возможную блокировку тега <meta> браузерами:
<noscript> <meta http-equiv="refresh" content="0; URL=http://new-site.com"/> <a href="http://new-site.com">Перейдите по ссылке</a> </noscript>
Хорошо, если на целевых страницах указано, что они канонические (также в секции <head>):
<link rel="canonical" href="http://new-site.com" />
2. Редирект через файл .htaccess - добавить туда директивы
RewriteEngine On
RewriteCond %{HTTP_HOST} old-site.com
RewriteRule (.*) http://new-site.com/$1 [R=301,L]
Возможны варианты, например, с get-параметрами:
RewriteCond %{REQUEST_URI} /index.php
RewriteRule ^(.*)$ http://new-site.com/ [R=301,L]
А вот этот скрипт позволяет посмотреть в диалоговом окне все доступные части ссылки (лучше разместить файл .html на сервере, например, локальном хосте, а не выполнять кликом по протоколу file://):
<script>
function showLoc() {
const logLines = [
"Property (Typeof): Value",
`location (${typeof location}): ${location}`,
];
for (const prop in location) {
logLines.push(
`${prop} (${typeof location[prop]}): ${location[prop] || "n/a"}`,
);
}
alert(logLines.join("\n"));
}
</script>
<button onclick="showLoc();">Show location properties</button>
23.11.2024, 21:24 [108 просмотров]