Документ с фреймами

Why does a target attribute set to «_top» or «_parent» opens up in a new tab

I’ve set the following links (found on DEMO) to open in the same tab by using the «_top» target (tried «_parent» as well, but for some reason they keep opening in a new tab. I’ve tried different browsers, and different devices but it still happens.

$(document).ready(function() < // for slide-out menu $('.js-nav').click(function() < $(this).parent().find('.menu').toggleClass('active'); if ($(this).find('i.fa').hasClass('fa-bars')) < $(this).find('i.fa').removeClass('fa-bars').addClass('fa-times'); >else if ($(this).find('i.fa').hasClass('fa-times')) < $(this).find('i.fa').removeClass('fa-times').addClass('fa-bars'); >>); >);

html, body < width: 600px; height: 50px; >.toggle-nav < margin: auto 0 auto 0; float: left; color: #423c4c; >.toggle-nav:hover < color: #423c4c; >.nav-wrap < overflow: hidden; >.menu < float: left; visibility: hidden; position: relative; right: 100%; transition-duration: 5s; -webkit-transition-duration: 5s; >.menu.active < visibility: visible; right: 0px; transition-duration: 1s; -webkit-transition-duration: 1s; >.menu ul < text-align: justify; min-width: 400px; margin: 0 auto; padding-right: 20px; >.menu ul:after < content: ''; display: inline-block; width: 100%; >.menu ul li < margin-top: 2%; display: inline-block; text-align: center; text-transform: uppercase; font-family: 'Alef', sans-serif; font-size: 13px; color: #423c4c; >.menu ul li a:link < color: #423c4c; text-decoration: none; >.menu ul li a:visited < color: #423c4c; text-decoration: none; >.menu ul li a:hover < text-decoration: none; background-color: #fce2e2; ; color: red; > .menu ul li a:active < color: #423c4c; >.menu ul li ul < display: inline-block; position: absolute; right: 272px; top: 25px; >.menu ul li ul li

We use target _top for iframe, If you are usign iframe and want all click open in parent tab then you can use _top otherwise no need to use it.

did you try removing target ? default is to open in same tab when link is in main page and not in a frame

3 Answers 3

Your problem stems from the presence of the sandbox attribute on the iFrame used by JSFiddle and other such sites including StackOverflow’s StackSnippets.

Your code works when stand alone like here

By having the attribute set but NOT having the allow-top-navigation set, it is not allowed to break out of the frame except to a new window/tab

• allow-forms: Allows the embedded browsing context to submit forms. If this keyword is not used, this operation is not allowed.
• allow-modals: Allows the embedded browsing context to open modal windows.
• allow-orientation-lock: Allows the embedded browsing context to disable the ability to lock the screen orientation.
• allow-pointer-lock: Allows the embedded browsing context to use the Pointer Lock API.
• allow-popups: Allows popups (like from window.open, target=»_blank», showModalDialog). If this keyword is not used, that functionality will silently fail.
• allow-popups-to-escape-sandbox: Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page.
• allow-presentation: Allows embedders to have control over whether an iframe can start a presentation session.
• allow-same-origin: Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.
• allow-scripts: Allows the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.
• allow-top-navigation: Allows the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.

Источник

Фреймы

Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный html-документ. Фреймы использовались для оформления следующих документов:

• Оглавление. Если вы поместите на Web-страницу оглавление в виде вертикального столбца, то пользователь сможет обратиться к нему в любой момент, и ему не нужно будет постоянно щелкать на кнопке возврата к предыдущей странице. Поскольку, находясь во фрейме, оглавление всегда будет под рукой, пользователю нужно будет просто выбрать другой его пункт и сразу же получить нужную информацию.
• Неподвижные элементы интерфейса. Можно зафиксировать на экране какое-то графическое изображение, например, логотип фирмы, в то время как остальная часть страницы будет прокручиваться в другом фрейме.
• Формы и результаты. Можно создать форму в одном фрейме, а в другом отобразить результаты запроса.

Обычные фреймы на данный момент считаются устаревшей технологией и не поддерживаются в HTML5. Не используйте обычные фреймы в своих проектах! В HTML5 тегов frame, frameset и noframes уже просто нет, вместо них предусмотрен один единственный тег iframe (встроенный или плавающий фрейм).

Тег

Тег заменяет тег и используется для разделения экрана. Имеет закрывающий тег.

Атрибуты тега

cols Делит экран по вертикали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретный столбец будет занимать всю остальную часть экрана rows Делит экран по горизонтали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретная строка будет занимать всю остальную часть экрана frameborder Определяет наличие рамок, т.е. границ фреймов. Принимает значения «yes» или «no» border Ширина рамки в пикселях bordercolor Цвет рамок. По умолчанию (если используется стандартная цветовая схема системы Windows) границы фреймов имеют тусклый, серый оттенок. Но при желании можно выбрать любой другой цвет. При определении цвета можно выбрать как его название, так и числовой эквивалент в системе RGB. Например, blue или #0000ff

В отдельном теге имеет смысл использовать только один из атрибутов – cols или rows. Это означает, что фреймовая структура будет состоять или только из столбцов, или только из строк. Чтобы создать строки внутри столбцов или столбцы внутри строк, вам потребуется вложенные контейнеры ….

Открыть пример в фрейме
 

 

       <p>Ваш браузер не отображает фреймы</p>