#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);