Открыть URL-адрес в новой вкладке (а не в новом окне).

javascript


Я пытаюсь открыть URL в новой вкладке, в отличие от всплывающего окна.

Я видел сопутствующие вопросы,ответы на которые выглядели бы как-то так:

window.open(url,'_blank');
window.open(url);

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




Answer 1 Quentin


Автор ничего не может сделать, чтобы открыть новую вкладку вместо нового окна; это предпочтение пользователя . (Обратите внимание, что пользовательские настройки по умолчанию в большинстве браузеров предназначены для новых вкладок, поэтому тривиальный тест в браузере, в котором эти настройки не были изменены, не продемонстрирует этого.)

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

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




Answer 2 Rinto George


Это уловка,

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/




Answer 3 Venkat Kotra


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

<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 .




Answer 4 Peter Mortensen


window.open не может надежно открывать всплывающие окна на новой вкладке во всех браузерах

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

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

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

Demonstration

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

Internet Explorer (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

Тест-страница

После настройки Internet Explorer (11) для открытия всплывающих окон в новом окне, как показано выше, используйте следующую тестовую страницу для тестирования window.open :

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

Обратите внимание, что всплывающие окна открываются в новом окне, а не в новой вкладке.

Вы также можете протестировать эти фрагменты выше в Firefox (29),в котором предпочтения на закладке установлены на новые окна,и увидеть те же результаты.

Как насчет Chrome? Он window.open отличие от Internet Explorer (11) и Firefox (29).

Я не уверен на 100%, но похоже, что Chrome (версия 34.0.1847.131 m ) не имеет каких-либо настроек, которые пользователь может использовать, чтобы выбрать, открывать ли всплывающие окна в новом окне или новой вкладке (например, Firefox и Internet Explorer есть). Я проверил документацию Chrome для управления всплывающими окнами , но ничего подобного не упоминалось.

Также, опять же, разные браузеры, похоже, по-разному реализуют поведение window.open . В Chrome и Firefox указание ширины и высоты вызовет всплывающее окно, даже если пользователь установил Firefox (29) для открытия новых окон на новой вкладке (как упоминалось в ответах на JavaScript, которые открываются в новом окне, а не на вкладке ) :

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

Однако тот же фрагмент кода выше всегда будет открывать новую вкладку в Internet Explorer 11, если пользователи устанавливают вкладки в качестве своих настроек браузера, даже если не указать ширину и высоту, для них появится новое всплывающее окно.

Таким образом, поведение window.open в Chrome, по-видимому, заключается в открытии всплывающих окон на новой вкладке при использовании в событии onclick , открытии их в новых окнах при использовании из консоли браузера ( как это было отмечено другими людьми ) и их открытии. в новых окнах при указании ширины и высоты.

Summary

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

Дополнительные материалы для чтения




Answer 5 pie6k


Один лайнер:

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

Это создает виртуальный a элемент, дает ему target="_blank" , так что открывается в новой вкладке, дает ему правильную url href , а затем нажимает кнопку.

И если хочешь,на основе этого ты можешь создать какую-нибудь функцию:

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    href,
  }).click();
}

и тогда ты сможешь использовать его как:

openInNewTab("https://google.com"); 

Важное примечание:

openInNewTab (как и любое другое решение на этой странице) должен вызываться во время обратного вызова действия пользователя - например, внутри события щелчка (не обязательно в функции обратного вызова напрямую, но во время действия щелчка).

Если вы позвоните ему вручную в какой-нибудь случайный момент (например,через интервал или после ответа сервера)-он может быть заблокирован браузером (что имеет смысл,так как это было бы риском для безопасности и могло бы привести к очень плохому опыту пользователя)