Откройте URL в новой вкладке (а не в новом окне), используя JavaScript - PullRequest
Новая
       118

Откройте URL в новой вкладке (а не в новом окне), используя JavaScript

1837 голосов
/ 05 февраля 2011

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

Я видел похожие вопросы, где ответы выглядели бы примерно так: 

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

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

Ответы [ 26 ]

1503 голосов
/ 08 июля 2012

Это трюк, 

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/

806 голосов
/ 05 февраля 2011

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

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

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

344 голосов
/ 31 октября 2012

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-вызов в функции щелчка и хотите открыть окно в случае успеха, убедитесь, что вы выполняете Ajax-вызов с установленной опцией async : false.

239 голосов
/ 01 мая 2014

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?» ниже).

Демонстрация

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

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, открытии их в новых окнах при использовании из консоли браузера (, как отмечали другие люди ) и открыть их в новомindows при указании ширины и высоты.

Сводка

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

Дополнительное чтение

197 голосов
/ 06 февраля 2015

Один вкладыш: 

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("http://google.com");
63 голосов
/ 28 мая 2015

Если вы используете window.open(url, '_blank'), он будет заблокирован (блокировщик всплывающих окон) в Chrome.

Попробуйте: 

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

С чистым JavaScript, 

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
59 голосов
/ 05 апреля 2011

Чтобы разработать ответ Стивена Спилберга, я сделал это в таком случае: 

$('a').click(function() {
  $(this).attr('target', '_blank');
});

Таким образом, перед тем, как браузер перейдет по ссылке, я устанавливаю целевой атрибут, поэтому он сделаетссылка открывается в новой вкладке или окне ( зависит от настроек пользователя ).

34 голосов
/ 11 марта 2016

Я использую следующее, и это работает очень хорошо !!! 

window.open(url, '_blank').focus();
18 голосов
/ 18 октября 2013

Интересным фактом является то, что новая вкладка не может быть открыта, если действие не вызывается пользователем (нажатием кнопки или чего-то еще) или, например, если оно асинхронное, оно НЕ откроется в новой вкладке: 

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

Но это может открыться в новой вкладке, в зависимости от настроек браузера: 

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
15 голосов
/ 05 февраля 2011

Я думаю, что вы не можете это контролировать. Если пользователь настроил свой браузер на открытие ссылок в новом окне, вы не можете заставить его открывать ссылки на новой вкладке.

JavaScript открывается в новом окне, а не на вкладке

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...