Javascript ссылка на другую страницу

Javascript ссылка на другую страницу

Скрипт переход по внешней ссылке на javascript

На одном из коммерческих сайтов, в back-end панеле для секретуток и офисного плангтона требовалось постить мануал ссылки на сторонние веб ресурсы. Но учитывая, что сторонние веб ресурсы могут палить переходы и в некоторой степени злоупотребить этим, решили подстраховаться и сделать заглушку для перехода по внешней ссылке. Так как эта задача является тривиальной, нужно сделать максимально просто и не используя серверного программного обеспечения. Зная, что на стороне клиента основным языком является javascript, этим и можно воспользоваться для переадресации на другой сайт.

Серверные языки использовать для перехода по внешней ссылке требуется в том случае если нужно контролировать большой поток публикаций от посещаемой аудитории как например вконтакте или комментарии на сайте. Естественно в таком случае нужно отсеивать нежеланные сайты-ссылки с вирусами и плохим содержимым. В данном случае скрипт на javascript является универсальным для переадресации. Можно как самостоятельно вести на страницу редиректа при написании ресурса или же серверным программным языком (php perl им подобным) фильтровать публикации и заменять ссылки на ссылку со страницей редиректа внешних ссылок.

  • пример: http://ftpn.ru/ref/?https://www.youtube.com/watch?v=GfWzVx7ijvE
  • Национальные домены — кириллица, латиница и д.р.
  • Популярные протоколы: ftp, http, https, и другие…
  • Если не задан протокол добавляет http
  • Seo: удерживает поисковых ботов
  • Поддерживает все браузеры включая IE6 и выше
  • Универсален, подходит для всех: ucoz сайты, динамичные, статичные сайты
  • Валидный код
  • Блокировка фишинговой страницы при target=_blank

Короче, создаем страницу для информирования посетителя о переадресации на другой сайт и указываем ей ссылку-url к примеру ref . Добавляем код в заголовок этой страницы между тегами head:

<!— html, javascript —> <meta name=»robots» content=»none» /> <noscript><meta http-equiv=»refresh» content=»0; url=/»></noscript> <!— если выключена поддержка скриптов —> <script type=»text/javascript»> window.opener = null; // fix control target=»_blank» if(window.location.search != ») { var referUrl = decodeURI(window.location.search.substr(1) + location.hash); referUrl = (referUrl.indexOf(‘://’) == -1) ? ‘http://’ + referUrl : referUrl; // хост var parser = document.createElement(‘a’); parser.href = referUrl; var referHostname = parser.hostname; } else { window.location.href = ‘/’; } function redirect(referUrl) { window.location.href = referUrl; } </script>

Далее между тегами body добавляем код:

<!— html, javascript —> <div style=»text-align:center;»> Вы собираетесь перейти на другой сайт <b><script type=»text/javascript»>document.write(referHostname);</script></b><br>подтвердите </div> <div style=»text-align:center; margin-top:5%; font-weight:bold»> <a href=»javascript:redirect(referUrl);» onclick=»redirect(referUrl);» style=»cursor:pointer; display:inline-block; border:1px dashed #E4E4E4; padding:10px;»> ДА, перейти </a> <a href=»javascript:close();» style=»cursor:pointer; display:inline-block; border:1px dashed #E4E4E4; padding:10px; margin-left:50px;»> НЕТ, вернуться </a> </div>

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

Правельно было бы, шифровать uri адрес переадресуемого сайта, чтобы ваш же сервер случайным образом не обрабатывал его. Если все же обрабатывает и при переадресации выдает http ошибку 404, удалите в начале переадресуемой строки http://. Скрипт сам добавит этот протокол при переадресации. Убедиться в этом поможет переменная document.write(referUrl);.

Автоматическое JavaScript-перенаправление на другую страницу

Если нужно автоматически перенаправить пользователя с одной страницы (URL1) на другую страницу (URL2), можно использовать следующий код:

window.location.href = ‘URL2’;

Необходимо вставить приведенный выше код на первую страницу (URL1). Замените URL2 на нужный адрес страницы. Лучше поместить этот код внутри элемента <head> (а не в нижней части страницы), чтобы страница перенаправлялась до того, как браузер начинает ее отображать.

СОВЕТ: Если вы используете встроенный JavaScript (т.е. без внешнего файла .js), не забудьте поместить код JavaScript в теги <script></script>.

Перенаправление на другую страницу через X секунд

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

setTimeout(function(){ window.location.href = ‘homepage-url’; }, 5 * 1000);

Необходимо вставить приведенный код JavaScript на странице приветствия. Не забудьте заменить homepage-url на URL-адрес домашней страницы.

Мы использовали метод setTimeout, чтобы указать скрипту выполнить перенаправление через 5 секунд (умножаем 5 на 1000, чтобы преобразовать секунды в миллисекунды).

СОВЕТ: В JavaScript значения времени всегда рассчитываются в миллисекундах.

Перенаправление на другую страницу, исходя из условия

Например, можно выполнить перенаправление в зависимости от браузера посетителя (хотя это не рекомендуется), размера экрана, времени суток, или другого условия.

Используйте следующий код для перенаправления посетителей, которые удовлетворяют определенному условию:

if (CONDITION) { window.location.href = ‘redirect-url’; }

Например, этот код перенаправляет посетителей на другую страницу, если ширина их экрана меньше 600 пикселов:

if (screen.width < 600) { window.location.href = ‘redirect-url’; }

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

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

Следующий код будет перенаправлять посетителя на целевую страницу после нажатия на #mybutton:

document.getElementById(‘mybutton’).onclick = function() { window.location.href = ‘redirect-url’; };

Можно сделать то же самое, используя следующий код:

<button onclick=»window.location.href = ‘/'»>Go to Homepage</button>

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

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

Данная публикация представляет собой перевод статьи «Redirect to Another Page with JavaScript» , подготовленной дружной командой проекта Интернет-технологии.ру

Еще не голосовали рейтинг из ХорошоПлохо Ваш голос принят

Плавный переход по всем якорным ссылкам, якорям на сайте

У меня на сайте уже была статья о якорях, ознакомится с ней можно по ссылке — . В ней тоже организован плавный переход, но только для определенного, выделенного меню. Скрипт который мы рассмотрим в этой статье применит плавный переход по ссылкам для любых якорных ссылок на сайте, потому как он универсален. Работает для якорных ссылок типа все якоря (#) и на a. Ну и можете посмотреть пример его работы:



Чаще всего применяется следующая структура якорей:

  1. Блоку к которому нужно прокрутить присваивается айди, например id=»y1″, ну или если у блока уже есть свой айди то его нужно скопировать и выполнить второй пункт.
  2. Вторым шагом, создается ссылка, где вместо пути указывается айди нужного блока с решеткой перед ним. Выглядит это примерно так: <a href=»#y1″>Якорь 1</a>

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

Работает он на основе jQuery, поэтому на сайте должна быть подключена библиотека jQuery. Убедитесь в этом, если таковой нет то добавьте ее. Можете воспользоваться статей Как и где подключить скрипт?, если не знаете как это сделать.

<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js»></script>

Ну и собственно сам скрип, который тоже подключаете к сайту. любым удобным способом описаным в статье, что упоминалась чуть выше.

<script> jQuery(function($){ $(‘a’).on(‘click.smoothscroll’, function( e ){ var hash = this.hash, _hash = hash.replace(/#/,»), theHref = $(this).attr(‘href’).replace(/#.*/, »); if( theHref && location.href.replace(/#.*/,») != theHref ) return; var $target = _hash === » ? $(‘body’) : $( hash + ‘, a’).first(); if( ! $target.length ) return; e.preventDefault(); $(‘html, body’).stop().animate({ scrollTop: $target.offset().top — 0 }, 400, ‘swing’, function(){ window.location.hash = hash; }); }); }); </script>

Особых настроек тут нет, так что можно просто добавить на сайт и все. Разве что, можно настраивать плавность прокрутки. В скрипте есть значение — 400. Это время прокрутки в миллисекундах. Можете сменить на большее число. для замедления или наоборот для ускорения анимации плавной прокрутки к якорю.

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

На этом все, спасибо за внимание. 🙂


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *