Открытие ссылки из iframe в родительском окне: решение

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для того, чтобы ссылки в iframe открывались не в самом iframe, а в родительском окне, примените атрибут target="_parent" внутри тегов <a>:

HTML

Скопировать код

<!-- В документе iframe -->
<a href="http://stackoverflow.com" target="_parent">Переход на Stackoverflow</a>

Благодаря данной настройке ссылки будут перенаправлять пользователя непосредственно в родительское окно.

Тег base в центре внимания

Все возможности тега base

Тег <base> служит для определения основных параметров поведения ссылок и изображений внутри iframe. Размещайте его в секции <head> документа iframe:

HTML

Скопировать код

<!-- Рассматривайте секцию <head> документа iframe как управляющий блок -->
<base target="_parent">

В результате все ссылки автоматически будут открываться в родительском окне, и вам не надо будет каждый раз указывать target="_parent". Проще некуда!

Ограничения по доменам

Не забывайте о политике одного источника: для возможности взаимодействия между iframe и родительским окном при использовании target="_parent", оба должны принадлежать одному домену. В противном случае вы столкнётесь с ограничениями безопасности браузера.

Совместимость с браузерами

Учитывайте совместимость тега <base> с разными браузерами. Рекомендуется проверить её на сайте caniuse.com.

Javascript и jQuery на помощь

Управление через JavaScript

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

HTML

Скопировать код

<a href="#" onclick="window.top.location='http://stackoverflow.com'">Перейти на Stackoverflow</a>

JavaScript дарит вам управление над действиями пользователей, словно вы – дирижер оркестра.

Простота использования jQuery

Если вам требуется контролировать несколько iframe или ссылок, jQuery значительно облегчит выполнение этой задачи. Селектор .contents() дает возможность получить содержимое iframe и изменить атрибуты тегов <a>:

Скопировать код

$('iframe').contents().find('a').attr('target', '_parent');

Теперь все ссылки внутри iframe настроены на открытие в родительском окне. Благодарим jQuery за простоту и комфорт!

Играйте по своим правилам

Контроль над ссылками

Если вам требуется, чтобы лишь некоторые ссылки открывались в родительском окне, добавьте target="_parent" к каждой такой ссылке индивидуально:

HTML

Скопировать код

<a href="http://lovely-exception.com" target="_parent">Посетите lovely-exception.com в родительском окне</a>

Переход на самый верх

Если вашей целью является открытие ссылки на самом верхнем уровне, например, при работе с вложенными iframe, используйте _top вместо _parent:

HTML

Скопировать код

<!-- Откройте новые горизонты с переходом на верхний уровень -->
<a href="http://another-example.com" target="_top">Перейти на another-example.com в верхнем окне</a>

Безопасность – это важно!

Уведомлям вас быть крайне внимательными к безопасности при работе с поведением ссылок в iframe. Всегда проверяйте URL-адреса и защищайте свой сайт от возможных атак, таких как кликджекинг. Безопасный интернет-просмотр должен быть вашим приоритетом!

Визуализация

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

HTML

Скопировать код

<iframe>
  <a href="http://example.com" target="_parent">Перейти на Example.com</a>
</iframe>

Помните, что target="_parent" гарантирует перенаправление в родительское окно:

Markdown

Скопировать код

Внутри iframe: 🖼️ [Ссылка] 
- Правила? Правила не для кошек! 🐱‍👤

Сахар and начальник цель 🖼️ [Ссылка 🧭] 
- Дисциплинированно открывается в родительском окне. Как надёжный пёс! 🐶

Полезные материалы

<iframe>: Элемент встроенного фрейма – MDN — подробное руководство по использованию элемента <iframe>.
html – Как сделать так, чтобы ссылка в iframe открывалась в родительском окне – Stack Overflow — обсуждение в сообществе Stack Overflow по перенаправлению ссылок в iframe.
Как использовать HTML5 Full-Screen API — SitePoint — руководство по использованию API для полноэкранного режима, которое может пригодиться для полноэкранного содержимого в iframe.
.contents() | jQuery API Documentation — документация jQuery по работе с элементами iframe.
Webappsec/frame navigation – W3C Wiki — вики W3C по вопросам безопасности при навигации в рамках.