Ничто, как modernizr или любой пользовательский код, не даст вам никаких признаков обнаружения объектов. Основная причина заключается в том, что все основные браузеры требуют какого-либо действия пользователя, чтобы открыть новое окно программно - обычно щелчок. Поэтому создание функции обнаружения не может быть и речи.
Это интересный вопрос и тот, где мышление с точки зрения «прогрессивного улучшения» может помочь вам найти хорошее решение.
Во-первых, предположим, что вы не можете открыть несколько окон в любым браузером. Что бы вы сделали? Покажите список ссылок, которые вы предложили. Добавляя что-то вроде target="_blank" к каждой ссылке, теперь у нас есть работающее приложение без какого-либо JavaScript (или, если пользователь имеет JavaScript выключено):
<section id="links-wrap">
<a href="/page-A.html" target="_blank" />
<a href="/page-B.html" target="_blank" />
</section>
Эти базовая функциональность будет работать на каждом браузере когда-либо сделанный - ваш Treo посетители будут любить вас. Однако этот опыт не идеален, потому что ссылки, скорее всего, откроют новые вкладки вместо новых окон. Поэтому давайте использовать JavaScript для открытия нового окна всякий раз, когда нажимается ссылка.Позволяет также скрыть каждую ссылку после того, как она нажата и положение каждого окна таким образом, чтобы они не дублировали:
function openWindowFromLink (link, idx) {
var top = idx % 2 * 600;
var left = Math.floor(idx/2) * 600;
var win = window.open(link.href, 'Window '+ top +'x'+ left, 'width=600,height=600,top='+ top +',left='+ left);
if (win) {
link.style.display = "none";
}
return win;
}
function handleLinkClick(ev) {
ev.preventDefault();
var link = ev.target;
var idx = 0;
var prev = link.previousSibling;
while (prev) {
if (prev.nodeType === 1) {
idx++;
}
prev = prev.previousSibling;
}
openWindowFromLink(link, idx);
}
document.getElementById('links-wrap').addEventListener('click', handleLinkClick);
Теперь приходит трудная часть: как мы можем открыть несколько окон одновременно. Как известно, Chrome позволяет открывать только одно окно для каждого пользователя. В то время как другие браузеры могут не иметь такого же ограничения, они могут добавить его в будущем (я действительно удивлен, что они не все имеют это ограничение прямо сейчас). Итак, допустим, что все браузеров имеют то же ограничение, что и Chrome. Пользователи не хотят каждый раз щелкнуть каждую ссылку - так что дайте им цель щелчка, чтобы они могли быстро щелкнуть, чтобы открыть все окна. Творческая формулировка уменьшит досаду этой задачи.
<div id="rapid-click-box">
Click me really fast and see what happens!
</div>
... и некоторые JavaScript:
var clickBox = document.getElementById('rapid-click-box');
var clickCount = 0;
clickBox.addEventListener('click', function handleRapidClick (ev) {
var link = links[clickCount];
if (link.style.display !== 'none') {
openWindowFromLink(link, clickCount);
}
if (++clickCount === links.length) {
clickBox.removeEventListener('click', handleRapidClick);
clickBox.style.display = 'none';
}
});
Наконец, давайте заботиться о тех, браузер, который позволяет несколько окон, которые будут открыты одновременно. Нам все еще нужен пользователь, чтобы позвонить, чтобы позвонить window.open - так что давайте начнем креатив и посмотрим, как мы можем заставить пользователя щелкнуть что-нибудь. Хитро сформулировано приветственное сообщение должно хватить:
<div id="welcome-message" style="display:none">
<h1>Hey, welcome to my site. Are you a human?</h1>
<button>Yes</button>
</div>
<script>
// show the welcome message immediately if JS is enabled
document.getElementById('welcome-message').style.display = 'block';
</script>
... и еще раз, немного JavaScript:
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', function handleYesClick (ev) {
ev.preventDefault();
button.removeEventListener('click', handleYesClick);
document.getElementById('welcome-message').style.display = 'none';
for (var i = 0, l = links.length; i < l; i++) {
if (!openWindowFromLink(links[i], i)) {
break;
}
}
if (i === links.length) {
clickBox.style.display = 'none';
}
});
И скрипку, чтобы показать все это в действии:
https://jsfiddle.net/q8x5pqsw/