Nichts wie moderne oder benutzerdefinierte Code wird Ihnen irgendeine Art von Feature-Erkennung geben. Der Hauptgrund dafür ist, dass alle gängigen Browser eine Art Benutzeraktion erfordern, um ein neues Fenster programmatisch zu öffnen - normalerweise ein Klick. Das Erstellen einer Feature-Erkennung kommt also nicht in Frage.
Dies ist eine interessante Frage und eine, bei der das Denken in Bezug auf "progressive Enhancement" Ihnen helfen könnte, zu einer guten Lösung zu gelangen.
Zuerst nehmen wir an, dass Sie mehrere Fenster in beliebigen Browser nicht öffnen können. Was würden Sie tun? Zeigen Sie eine Liste von Links an, wie Sie es vorgeschlagen haben. Durch die Zugabe von etwas wie target="_blank" zu jeder Verbindung, wir haben jetzt eine Arbeits App ohne JavaScript (oder wenn der Benutzer JavaScript deaktiviert):
<section id="links-wrap">
<a href="/page-A.html" target="_blank" />
<a href="/page-B.html" target="_blank" />
</section>
Diese Baseline-Funktionalität auf jedem einzelnen Browser aller Zeiten arbeiten - Ihren Treo Besucher werden dich lieben. Diese Erfahrung ist jedoch weniger als ideal, da die Links wahrscheinlich neue Registerkarten anstelle von neuen Fenstern öffnen. Lassen Sie uns also JavaScript verwenden, um ein neues Fenster zu öffnen, wenn auf einen Link geklickt wird.Lets verstecken auch jeden Link, nachdem es angeklickt wird und jedes Fenster so positionieren, dass sie sich nicht überlappen:
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);
Jetzt kommt der schwierige Teil: Wie wir viele Fenster gleichzeitig öffnen können. Wie wir wissen, lässt Chrome nur ein Fenster pro Nutzerklick zu. Während andere Browser möglicherweise nicht die gleiche Einschränkung haben, können sie es in der Zukunft hinzufügen (Ich bin wirklich überrascht, dass sie nicht diese diese Einschränkung gerade haben). Nehmen wir an, dass alle Browser die gleichen Einschränkungen wie Chrome haben. Benutzer möchten nicht jedes Mal auf jeden einzelnen Link klicken - also geben Sie ihnen ein Klickziel, damit sie wirklich schnell klicken können, um alle Fenster zu öffnen. Creative-Formulierung wird die Belästigung dieser Aufgabe reduzieren.
<div id="rapid-click-box">
Click me really fast and see what happens!
</div>
... und einige 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';
}
});
Schließlich können von diesem Browser kümmern, die mehreren Fenster läßt auf einmal geöffnet werden. Wir müssen weiterhin den Benutzer anklicken, um window.open anzurufen - also lassen Sie uns kreativ werden und sehen, wie wir den Benutzer dazu bringen können, auf etwas zu klicken. Eine geschickt formuliert sollte Begrüßungsnachricht genügen:
<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>
... und wieder ein wenig 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';
}
});
Und eine Geige alles in Aktion zu zeigen:
https://jsfiddle.net/q8x5pqsw/