Ссылки

Как открыть ссылку в новом окне?

Создать ссылку, которая открывает документ в новом окне.

Решение

По умолчанию ссылки открываются в том же окне, где они расположены. Чтобы любая ссылка открывалась в новом окне, к тегу следует добавить атрибут target со значением _blank , как показано в примере 1.

Пример 1. Ссылка в новом окне

      
Ссылка откроется в этом окне
 
Ссылка откроется в новом окне
  

Учтите, что при использовании строгого атрибут target в HTML4 и XHTML осуждается и код с ним не пройдет валидацию. Чтобы в таком случае сделать ссылку для открытия в новом окне и соблюсти корректность кода, одних HTML и CSS недостаточно, поэтому придется обратиться к скриптам. Вначале необходимо как-то выделить ссылки, которые будут открываться в новом окне, например, атрибутом rel со значением external . Этот атрибут кратко описывает ссылку или куда она ведет. Браузеры не воспринимают этот атрибут, но это и не требуется, поскольку мы будем проверять все ссылки через JavaScript (пример 2). К нужным ссылкам добавляется все тот же target . Но так как это делается программно, то валидатор уловки не заметит.

Пример 2. Открытие ссылки через JavaScript

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

       
Ссылка откроется в текущем окне
 
Ссылка откроется в новом окне
  

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Источник

Открытие нового окна window.open() или одной страницы внутри другой с помощью iframe | JavaScript

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

Считаю, что этот вариант более удачный по сравнению с модальным окном только на CSS, так как дополнительный HTML подгружается после нажатия на кнопку или другого действия посетителя сайта Страница родителя Открыть   Вложенная страница, вернее страница, которая будет открыта внутри iframe Закрыть   window.parent даёт доступ к ближайшему родительскому окну из iframe или object, позволяет изменять его элементы, если домены одинаковы window.top даёт доступ к верхнему iframe в иерархии объектов, позволяет изменять его элементы, если домены одинаковы

Изменить содержимое iframe

Заменить фон   iframe.contentWindow позволяет изменять содержимое фрейма, если домены одинаковы. В том числе прокручивать к нужному месту документ в фрейме postMessage позволяет делать тоже самое и с разными доменами (есть пример использования)

Источник

How to open a new window on form submit

I have a submit form and want it to open a new window when users submits the form so i can track it on analytics. Here is the code I’m using:

9 Answers 9

No need for Javascript, you just have to add a target=»_blank» attribute in your form tag.

Glad to have stumbled upon this post! Adding target=»_blank» to the form tag solved my problem of needing to open a new window!

this doesn’t exactly answer the OP’s question, but it is the more useful answer in general- use target=»_blank» instead of Javascript

at least on IE 11, target=»_blank» creates a new tab in the current browser window instead of creating a new browser window. IMHO, a new tab is different than a new browser window

The correct solution to «open a new window» is target=»_blank» . Whether the new window is added as a tab is a browser choice. Many modern browsers deem it a better user experience to add new windows as tabs.

In a web-based database application that uses a pop-up window to display print-outs of database data, this worked well enough for our needs (tested in Chrome 48):

The trick is to match the target attribute on the tag with the second argument in the window.open call in the onsubmit handler.

OMG, memories 🙂 I used that method in Netscape around 1995 ! you could adjust the size of window, how big, even the position.

Late to the party but I just spent 3 days trying to get popup windows using JavaScript to submit necessary behind the scenes jQuery values to my database, something which is plain trivial to do in PHP. (I’m building a roll-your-own blog, a page with multiple submit buttons). This is exactly the solution I’ve been looking for. Mucho thanks!

For a similar effect to form’s target attribute, you can also use the formtarget attribute of input[type=»submit]» or button[type=»submit»] .

• _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
• _blank: Load the response into a new unnamed browsing context.
• _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
• _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

Looks like they removed that content from the input element page. Similar info about the formtarget attribute can be found on the button element page: developer.mozilla.org/en-US/docs/Web/HTML/Element/…

onclick may not be the best event to attach that action to. Anytime anyone clicks anywhere in the form, it will open the window.

The code you have given, needs to be corrected. In form tag you have to enclosed the onClick attribute value in double quote:

You also need to take care that first parameter of window.open should also be enclosed using quotes.

I generally use a small jQuery snippet globally to open any external links in a new tab / window. I’ve added the selector for a form for my own site and it works fine so far:

// URL target $('a[href*="//"]:not([href*="'+ location.hostname +'"]),form[action*="//"]:not([href*="'+ location.hostname +'"]').attr('target','_blank'); 

Thumbs up to @Awerealis for an authentic, php popup window solution.

But after getting the popup window and using it to insert data into my database, I ran into the further problem of having the results page of the db entry fill up the popup window. I wanted the popup window to go away and have the original (parent) page refresh with the new data.

I achieved that with the following:

On the parent page (from which the popup window is issued), I added this code to the element:

 window.onunload = refreshParent; function refreshParent() 

At the end of the popup (child) window, I added:

Upon returning to the parent page, the new data is displayed giving altogether the feeling of an ajax call from the popup window which is what I was looking for.

Источник

Атрибут target

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . Этот атрибут может принимать следующие значения:

_blank — загружает страницу в новое окно браузера;

_self — загружает страницу в текущее окно;

_parent — загружает страницу во фрейм-родитель;

_top — отменяет все фреймы и загружает страницу в полном окне браузера.

В примере 1 показано создание ссылки на сайт, который открывается в новом окне.

Пример 1. Открытие документа в новом окне

      
Ссылка открывает новое окно на сайт htmlbook.ru
  

Для создания валидного кода атрибут target может использоваться только при переходном , как показано во всех примерах этой статьи.

Если на сайте используются фреймы, то в качестве значения target можно использовать имя фрейма (пример 2).

Пример 2. Открытие документа во фрейме

      
Сайт htmlbook.ru
  

Ссылка в примере 2 ведет на сайт htmlbook.ru, открывающийся во фрейме с именем newframe .

Когда у target указано неизвестное значение, например, имя фрейма набрано с ошибкой, то это приводит к тому, что ссылка открывается в новом окне.

Если на веб-странице необходимо сделать, чтобы все ссылки открывались в новом окне, нет необходимости добавлять во все теги target=»_blank» . Код можно сократить, если вначале страницы добавить строку , как показано в примере 3.

Пример 3. Использование тега

     
Ссылка откроется в новом окне
 
Ссылка откроется в текущем окне
  

Сделать так, чтобы ссылка открывалась в текущем окне, в таком случае можно, если добавить к тегу атрибут target=»_self» , как показано в данном примере.

Источник