Перенаправление на другую страницу или сайт

Бурное развитие интернет приводит к тому, что многие интернет-ресурсы часто меняют свое местонахождение. Чтобы не допустить появления разрушенных связей, администратор узла должен оставить по прежднему адресу ссылку на новый адрес документа. Иногда при работе в интернете мы получаем сообщение приблизительно следующего содержания: "Странице изменила свой адрес. Если вы собираетесь обратиться к данному документу, щелкните на ссылку, расположенную ниже." Далее следовала ссылка, по которой можно было перейти к документу по новому адресу. Нередко на указанном выше сообщении следовали такие слова: "Если вы в течении 10 секунд не предпримите ни каких действий, переход произойдет автоматически." При этом происходило перенаправление на другую страницу.

Давайте реализуем веб-страницу, выполняющую подобное перенаправление запроса пользователя, средствами JavaScript. Чтобы продемонстрировать работу с таймером, включим в состав документа специальное поле. В нем будет отображаться время, в течении которого пользователь может самостоятельно принять решение. По истечении отведенного времени браузер автоматически сгенерирует запрос на получение веб-документа, расположенному по новому адресу.

Пишем HTML-код.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Перенаправление</title>
<script language="JavaScript">
var seconds=11;
remain();
function remain(){
seconds--;
document.timer.clock.value=seconds;
if(seconds>0)
{window.setTimeout('remain()',1000)}
else
{
location.replace("index.html");}
}

</script>
</head>

<body onLoad="remain()">
<p>C недавнего времени расположение документа изменилось и теперь он находится по адресу</p>
<p>Чтобы обратиться по новому адресу, щелкните по ссылке.</p>
<p><a href="index.html">Ссылка</a></p>
<p>Через 10секунд переход произойдет автоматически.</p>
<form action="" method="get" name="timer">
На раздумье осталось
<input name="clock" type="text" size=2>
секунд
</form>

</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Разбереь скрипт.

В данном сценарии использовался метод setTimeout() объекта window. Этот метод часто применяют для отсчета времени. При вызове, методу передаются два параметра. Первый параметр 'remain()'представляет собой последовательность команд JavaScript, заключенных в кавычки. Второй параметр 1000 задает число милисекунд, через которые последовательность команд, указанная в первом параметре будет выполнена. Обратите внимание, что данный метод не останавливает работу сценария, а лишь планирует выполнение фрагмента кода через указанный промежуток времени.

Все действия по вычислению интервала времени выполняются в теле функции remain(), там же планируется новый вызов этой функции. Число секунд, оставшихся до загрузки нового документа, хранятся в переменной seconds. При каждом вызове функции remain() значение переменной seconds уменьшается на единицу и отражается в поле редактирования(команда document.timer.clock.value=seconds). Если текущее значение seconds еще не достигло нуля, то с помощью метода setTimeout() планируется новый вызов функции remain(), в противном случае в окно загружается новая веб-страница.

Метод setTimeout() обязательно должен присутствовать в функции remain(). Если вызов выражения будет отсутствовать в теле функции, то remain() выполнится один раз, после чего отсчет времени прекратится.

Метод replace() объекта Location загружает новый документ в окно браузера, но при этом новая запись в списке предистории заменяет запись о текущем документе. Таким же образом можно осуществить перенаправление на другой сайт.

Давайте рассмотрим еще один пример, при котором сообщение alert показывается через 5 секунд (5,000 миллисекунд) после того, как пользователь нажимает кнопку. Если пользователь нажимает вторую кнопку прежде, чем появилось сообщение, то блокировка по времени отменяется, и сообщение не показывается.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<script language="JavaScript">

function displayAlert(){
alert("Через 5 секунд окно будет заблокировано. Нажмите вторую кнопку")
}

</script>
</head>

<body>
<form action="" method="get" name="draw">
Через 5-секунд после нажатия кнопки "Пуск" появится сообщение. Чтобы его заблокировать нажмите "Стоп"<br>
<input name="op1" type="button" value="Пуск" onClick="timer=setTimeout('displayAlert()',5000)"><br>
<br>

<input name="op2" type="button" value="Стоп" onClick="clearTimeout(timer)">
</form>

</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В данном случае для отмены задержки процесса, запущенного с помощью метода setTimeout(), используется метод clearTimeout(идентификатор), который принимает в качестве параметра целочисленный идентификатор, возвращаемый соответствующим методом setTimeout().

Рассмотрим еще один пример, где щелчок на кнопке "Пуск" открывает через 5-секунд новое окно и загружает в него документ. В тоже время это действие можно отменить с помощью кнопки "Стоп", если щелкнуть по ней пока окно еще не открыто.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>

<script language="JavaScript">
var myfunih
function str(){
myfunih=setTimeout("window.open('strou16.html')",5000)
}
function spr(){
clearTimeout(myfunih)
}
</script>
</head>

<body>
<form action="" method="get" name="draw">
Через 5-секунд после нажатия кнопки "Пуск" появится новый документ. Чтобы его заблокировать нажмите "Стоп"<br>
<input id="start" name="op1" type="button" value="Пуск" onClick="str()"><br>
<br>

<input id="stop" name="op2" type="button" value="Стоп" onClick="spr()">
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.



  • Другие |
назадвверхвперед
Rambler's Top100