Не удается открыть новую вкладку или окно с помощью JavaScript / jQuery

#javascript #jquery #html #javascript-events

#javascript #HTML #jquery #jquery-события

Вопрос:

Обратите внимание, что это не для живого веб-сайта; это просто некоторые эксперименты для моего собственного обогащения. Я использую Chrome версии 35.0.1916.153 (последняя версия) на Mac OSX 10.9.3.

Как и многие другие пытались сделать, я пытаюсь заставить JavaScript открыть ссылку на новой вкладке. Существует множество примеров, но я не могу заставить ни один из них работать. Наиболее многообещающей идеей, по-видимому, является имитация cmd click на привязке. Происходит событие щелчка, и свойство объекта события metaKey устанавливается true равным , как я вижу, когда добавляю обработчик щелчка, но URL-адрес не открывается: ни нового окна, ни новой вкладки.

HTML:

 <a id="still" href="gv__.html?pictureMode=still" target="_blank">still</a>
<a id="motion" href="gv__.html?pictureMode=motion" target="_blank">motion</a>
  

JS:

 $(document).ready(function() {
    var e = $.Event( "click", { metaKey: true } );
                                
    $("a#motion").trigger(e);
    $("a#still").trigger(e);
    $("a#motion").trigger(e);
    $("a#still").trigger(e);
});
  

Что я делаю не так?

Ответ №1:

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

Таким образом, открытие новой вкладки / окна всегда должно быть вызвано действием пользователя. (В противном случае мы всегда были бы переполнены всплывающими объявлениями)

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

Пример JsFiddle

HTML:

 <a href="//google.com" target="blank">new tab google</a>

<button class="user">user triggered</button>
<button class="programatic">programatic</button>
  

js:

 $('a').on('click', function(e) {
    console.log('clicked', e);
    // unfortunately although we simulated 
    // the click on the <a/> , it will still 
    // not launch a new window - idk why.
    // therefore we can use the line below
    // to open the <a>'s href in a new tab/window
    // NOTE: this will only occur if the execution was
    // triggered by the user
    window.open(e.currentTarget.href);
});

var simulateClick = function(origEv) {
    var e = $.Event("click");
    e.ctrlKey = true;
    e.metaKey = true;
    e.originalEvent = origEv;
    $('a').trigger(e);
};

$('button.user').on('click', function(e) {
    // this call will actually open a window
    simulateClick(e);
});

$('button.programatic').on('click', function(e) {
    // this will result in a blocked popup
    $.get('/someurl').always(function() {
        // executes the method after a non-user event
        // results in blocked popup
        simulateClick(e);
    });
});

// this will result in a blocked popup
setTimeout(simulateClick, 1000);
  

Комментарии:

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

Ответ №2:

попробуйте это:

 var e = $.Event("click");
e.ctrlKey = true;
$("a#motion").trigger(e);
$("a#still").trigger(e);
$("a#motion").trigger(e);
$("a#still").trigger(e);