Открыть ссылку в новой вкладке (не в новом окне) с помощью JavaScript

В статье описан принцип работы css свойства target со значением blank, а также предложен альтернативный, валидный вариант на js-коде, который позволяет открывать ссылки в новых вкладках браузера.

27 ответов

ничего автор не может выбрать Открыть в новой вкладке вместо нового окна. Это предпочтения пользователя.

CSS3 и предложил!–6–>target-new, а спецификация была заброшена.

на реверс неверно; путем указания измерений для окна в третьем аргументе window.open, вы можете запустить новое окно, когда предпочтение отдается вкладкам.

Это уловка,

function openInNewTab(url) { var win = window.open(url, ‘_blank’); win.focus();}

в большинстве случаев это должно происходить непосредственно в onclick обработчик для ссылки для предотвращения всплывающих блокировщиков и поведения “новое окно” по умолчанию. Вы можете сделать это таким образом или добавив прослушиватель событий в свой DOM “объект”.

<div onclick=”openInNewTab(‘www.test.com’);”>Something To Click On</div>

http://www.tutsplanet.com/open-url-new-tab-using-javascript-196/

window.open() не откроется в новой вкладке, если это не происходит на фактическом событии click. В приведенном примере URL-адрес открывается в фактическом событии click. это будет работать при условии, что пользователь имеет соответствующие настройки в браузере.

<a class=”link”>Link</a><script type=”text/javascript”> $(“a.link”).on(“click”,function(){ window.open(‘www.yourdomain.com’,’_blank’); });</script>

аналогично, если вы пытаетесь выполнить вызов Ajax в функции click и хотите открыть окно успеха, убедитесь, что вы выполняете вызов Ajax с помощью async : false установить вариант.

различные браузеры реализуют поведение window.open по-разному, особенно в отношении предпочтений браузера пользователя. вы не можете ожидать такого же поведения для window.open чтобы быть правдой во всех Internet Explorer, Firefox и Chrome, из-за различных способов, которыми они обрабатывают предпочтения браузера пользователя.

например, Internet Explorer (11) пользователи могут открывать всплывающие окна в новом окне или на новой вкладке, вы не можете заставить пользователей Internet Explorer 11 открывать всплывающие окна определенным образом через window.open, как указано в Квентин!–28–>.

что касается пользователей Firefox (29), используя window.open(url, ‘_blank’) зависит от настроек вкладки браузера, хотя вы все равно можете заставить их открывать всплывающие окна в новом окне, указав ширину и высоту (см. “Как насчет Chrome?” раздел ниже).

перейдите в настройки браузера и настройте его для открытия всплывающих окон в новом окне.

Блокировщик всплывающих окон

Рекламные попапы очень надоели посетителям, аж со времён 20-го века, поэтому современные браузеры всплывающие окна обычно блокируют. При этом пользователь, конечно, может изменить настройки блокирования для конкретного сайта.

Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя.

Как же браузер понимает – посетитель вызвал открытие окна или нет?

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

А если код был на странице и выполнился автоматически при её загрузке – у него этого флага не будет. Попапы будут заблокированы.

И я действительно имею в виду Новый TAB – НЕ НОВОЕ ОКНО.

С нетерпением жду какого-то рабочего решения. Спасибо!

3

Suman Armaan 6 Сен 2015 в 15:43

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Нажав на ссылку открыть несколько окон

открыть две ссылки одним кликом
открыть ссылку в новом окне, поменять текущую страницу<a href=”http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html” onclick=”window.open(this.href); window.open(‘http://shpargalkablog.ru/p/html-css-javascript.html’); return false;”>открыть две ссылки одним кликом</a><a href=”http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#target” onclick=”window.open(this.href, ‘_self’); window.open(‘http://shpargalkablog.ru/p/html-css-javascript.html’); return false;”>открыть ссылку в новом окне, поменять текущую страницу</a>return false; нужен чтобы запретить переход по ссылке и выполнить скрипт

№229-04-2006 20:54:53

Anton Участник   Группа: Extensions Откуда: от верблюда Зарегистрирован: 14-12-2004 Сообщений: 3057 Веб-сайт

Re: Как JavaScript-ом открыть ссылку в новой вкладке?

Если попросить права у пользователя, то можно window. getBrowser (). addTab (url), а иначе никак.

Время настанет, время придет…
И лис кОнкурiентов на части порвет !!!

Отсутствует

Полный синтаксис window.open

Полный синтаксис:

win = window.open(url, name, params)

Функция возвращает ссылку на объект window нового окна, либо null, если окно было заблокировано браузером.

Параметры:

urlURL для загрузки в новое окно.nameИмя нового окна. Может быть использовано в параметре target в формах. Если позднее вызвать window.open() с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое.paramsСтрока с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно.

Значения параметров params.

  1. Настройки расположения окна:

left/top (число)

Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционировано за пределами экрана.

width/height (число)

Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.

Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.

  1. Свойства окна:

menubar (yes/no)Скрыть или показать строку меню браузера.toolbar (yes/no)Показать или скрыть панель навигации браузера (кнопки назад, вперёд, обновить страницу и остальные) в новом окне.location (yes/no)Показать/скрыть поле URL-адреса в новом окне. По умолчанию Firefox и IE не позволяют скрывать строку адреса.status (yes/no)Показать или скрыть строку состояния. С другой стороны, браузер может в принудительном порядке показать строку состояния.resizable (yes/no)Позволяет отключить возможность изменять размеры нового окна. Значение no обычно неудобно посетителям.scrollbars (yes/no)Разрешает убрать полосы прокрутки для нового окна. Значение no обычно неудобно посетителям.

  1. Ещё есть небольшое количество не кросс-браузерных свойств, которые обычно не используются. Вы можете узнать о них в документации, например MDN: window.open.

Браузер подходит к этим параметрам интеллектуально. Он может проигнорировать их часть или даже все, они скорее являются «пожеланиями», нежели «требованиями».

Важные моменты:

  • Если при вызове open указан только первый параметр, параметр отсутствует, то используются параметры по умолчанию. Обычно при этом будет открыто не окно, а вкладка, что зачастую более удобно.
  • Если указана строка с параметрами, но некоторые yes/no параметры отсутствуют, то браузер выставляет их в no. Поэтому убедитесь, что все нужные вам параметры выставлены в yes.
  • Когда не указан top/left, то браузер откроет окно с небольшим смещением относительно левого верхнего угла последнего открытого окна.
  • Если не указаны width/height, новое окно будет такого же размера, как последнее открытое.

Доступ к новому окну

Вызов window.open возвращает ссылку на новое окно. Она может быть использована для манипуляции свойствами окна, изменения URL, доступа к его переменным и т.п.

В примере ниже мы заполняем новое окно содержимым целиком из JavaScript:

var newWin = window.open(“about:blank”, “hello”, “width=200,height=200”);newWin.document.write(“Привет, мир!”);

А здесь модифицируем содержимое после загрузки:

var newWin = window.open(‘/’, ‘example’, ‘width=600,height=400’);alert(newWin.location.href); // (*) about:blank, загрузка ещё не началасьnewWin.onload = function() { // создать div в документе нового окна var div = newWin.document.createElement(‘div’), body = newWin.document.body; div.innerHTML = ‘Добро пожаловать!’ div.style.fontSize = ’30px’ // вставить первым элементом в body нового окна body.insertBefore(div, body.firstChild);}

Обратим внимание: сразу после window.open новое окно ещё не загружено. Это демонстрирует alert в строке (*). Поэтому в примере выше окно модифицируется при onload. Можно было и поставить обработчик на DOMContentLoaded для newWin.document.

Связь между окнами – двухсторонняя.

Родительское окно получает ссылку на новое через window.open, а дочернее – ссылку на родителя window.opener.

Оно тоже может его модифицировать.

Если запустить пример ниже, то новое окно заменит содержимое текущего на ‘Test’:

var newWin = window.open(“about:blank”, “hello”, “width=200,height=200”);newWin.document.write( “<script>window.opener.document.body.innerHTML = ‘Test'</scr” + “ipt>”);

Большинство действий, особенно получение содержимого окна и его переменных, возможны лишь в том случае, если URL нового окна происходит из того же источника (англ. – «Same Origin»), т.е. совпадают домен, протокол и порт.

Иначе говоря, если новое окно содержит документ с того же сайта.

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

Открыть окно определённого размера

открыть окно в 500px ширины и высоты, но не более размера экрана монитора<a href=”http://shpargalkablog.ru/2013/05/get-mouse-coordinates-inside-div.html#size-window” onclick=”window.open(this.href, ”, ‘scrollbars=1,height=’+Math.min(500, screen.availHeight)+’,width=’+Math.min(500, screen.availWidth)); return false;”>открыть окно в 500px ширины и высоты, но не более размера экрана монитора</a>

там есть ответ на этот вопрос и не нет.

я нашел легкую работу вокруг:

Шаг 1: Создайте невидимую ссылку:

<a id=”yourId” href=”yourlink.html” target=”_blank” style=”display: none;”></a>

Шаг 2: Нажмите на эту ссылку программно:

document.getElementById(“yourId”).click();

вот ты где! Это меня очаровывает.

как насчет создания <a> с _blank as target значение атрибута и url as href, с дисплеем стиля: скрытый с детским элементом? Затем добавьте в DOM, а затем запустите событие click для дочернего элемента.

События

Наиболее важные события при работе с окном браузера:

  • onresize – событие изменения размера окна.
  • onscroll – событие при прокрутке окна.
  • onload – полностью загрузилась страница со всеми ресурсами.
  • onfocus/onblur – получение/потеря фокуса.

Перемещение и изменение размеров окна

Существует несколько методов для перемещения/изменения размеров окна.

win.moveBy(x,y)Перемещает окно относительно текущего положения на x пикселей вправо и y пикселей вниз. Допускаются отрицательные значения.win.moveTo(x,y)Передвигает окно в заданную координатами x и y точку экрана монитора.win.resizeBy(width,height)Изменяет размер окна на заданную величину width/height (ширина/высота). Допускаются отрицательные значения.win.resizeTo(width,height)Изменяет размер окна на заданное значение.

Чтобы предотвратить использование этих методов с плохими целями, браузеры часто блокируют их выполнение. Как правило, они работают, если окно win открыто вызовом window.open из JavaScript текущей страницы и в нём нет дополнительных вкладок.

Заметим, что JavaScript не может ни свернуть ни развернуть ни «максимизировать» (Windows) окно.

Эти функции операционной системы от Frontend-разработчиков скрыты. Вызовы, описанные выше, в случае свёрнутого или максимизированного окна не работают.

Новое окно на JavaScript

<button onclick=”myWindow()”>Открыть</button><script>function myWindow() { var w = window.open(”, ”, ‘scrollbars=1’); w.document.write(‘<!DOCTYPE html>n<title>Заголовок</title>n<p>Содержание <button onclick=”window.close();”>Закрыть</button>n<script>nalert(“x27одинарные кавычки в скриптеx27;”);n<x2fscript>’);}</script>

Изменить открываемое окно

<button onclick=”myWindow3()”>Поменять заголовок, выделить его красным цветом</button><script>function myWindow3() { var w = window.open(‘http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#target’, ”, ‘scrollbars=1’); w.onload = function() { var z = this.document.getElementById(“target”); z.innerHTML = “Заголовок поменяли!!!!”; z.style.color = “red”; }}</script><button onclick=”myWindow5(this)”>Открыть</button><script>function myWindow5(e) { if (e.nextSibling.nodeName.toLowerCase() != “iframe”) { var iframe = document.createElement(‘iframe’); iframe.setAttribute(‘src’, ‘http://shpargalkablog.ru/2014/11/window-opener.html’); iframe.setAttribute(‘height’, ‘200’); e.parentNode.insertBefore(iframe, e.nextSibling); }}</script><style>iframe[src^=”http://shpargalkablog.ru/2014/11/window-opener.html”] { width: 100%; border: none;}</style><button onclick=”myWindow2();”>Закрыть</button><script>function myWindow2() { var raz = window.parent.document.querySelector(‘iframe[src^=”http://shpargalkablog.ru/2014/11/window-opener.html”]’); raz.parentNode.removeChild(raz);}</script><style>html { overflow: hidden; }</style>

Рейтинг
( 1 оценка, среднее 5 из 5 )
Загрузка ...