Как разрушить фрейм при переходе на сайт

Вопрос возник в связи с тем, что у клиента на странице регистрации во фрейме установлена форма. При клике по кнопке «Далее» должен осуществляться переход на другую страницу сайта. Однако при этом новая страница открывается в том же фрейме, в котором отображается форма.

Пришлось решать вопрос, как разрушить фрейм при переходе на другую страницу сайта. И помог в этом простенький скрипт.

Чтобы был понятен сценарий, сначала приведу примерный код кнопки, по которой происходит клик.

  <button id="btn" type="button">Далее</button>

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

<script>
$('#btn').on('click', function(){
  self.parent.location="page-1.html"
});
</script>

page-1.html — это адрес страницы, на которую нужно совершить переход. Заменить на свой.

Для работы данного скрипта необходимо подключить библиотеку jquery.

Разрушаем фрейм при загрузке страницы

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

Для этого вначале страницы (можно прямо в хедере) вставляем такой скрипт:

 <script>
   if (self.parent.frames.length != 0) self.parent.location="page-1.html"
 </script>

В данном примере page-1.html — это собственно адрес той страницы, на которой и установлен скрипт. Теперь, если происходит попытка открыть данную страницу в фрейме, скрипт определяет это и страница открывается в окне браузера, как обычно, а не во фрейме.

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

Единственный случай, когда скрипт не сработает, — если у посетителя в браузере будет отключен джаваскрипт. Но такое бывает сейчас крайне редко.

Поделиться с друзьями