web-dev-qa-db-fra.com

Quelle est la meilleure façon d'ouvrir une nouvelle fenêtre de navigateur?

Je sais que la plupart des liens doivent être laissés à l'utilisateur final pour décider de la manière d'ouvrir, mais nous ne pouvons pas nier qu'il y a des moments où vous avez presque "devoir" forcer une nouvelle fenêtre (par exemple pour maintenir des données sous une forme. sur la page actuelle).

Ce que j'aimerais savoir, c'est ce que le consensus est sur le "meilleur" moyen d'ouvrir un lien dans une nouvelle fenêtre de navigateur.

Je sais que <a href="url" target="_blank"> Est sorti. Je sais aussi que <a href="#" onclick="window.open(url);"> n'est pas idéal pour une variété de raisons. J'ai également essayé de remplacer complètement les ancrages avec quelque chose comme <span onclick="window.open(url);">, puis styez la portée pour ressembler à un lien.

Une solution que je me penche vers est <a href="url" rel="external"> Et utilisez JavaScript pour définir toutes les cibles sur '_blank' sur ces ancres marquées "externes".

Y a-t-il d'autres idées? Ce qui est mieux? Je cherche le moyen le plus conforme XHTML et le plus simple de le faire.

Mise à jour: je dis cible = "_ vide" est un non non, car j'ai lu plusieurs lieux plusieurs places que l'attribut cible va être supprimé de xhtml.

javascripthtmlbrowser
36
Kon

J'utilise la dernière méthode que vous avez proposée. J'ajoute rel = "externe" ou quelque chose de similaire, puis utilisez jQuery pour itérer tous les liens et attribuez-leur un gestionnaire de clic:

$(document).ready(function() {
  $('a[rel*=external]').click(function(){
    window.open($(this).attr('href'));
    return false; 
  });
});

Je trouve cela la meilleure méthode parce que:

  • il est très clair sémantiquement: vous avez un lien vers une ressource externe
  • il est conforme aux normes
  • il se dégrade gracieusement (vous avez un lien très simple avec un attribut régulier href)
  • il permet toujours à l'utilisateur de cliquer sur le lien de cliquer et de l'ouvrir dans un nouvel onglet s'il souhaite
37
Damir Zekić

Pourquoi est-ce target="_blank" Une mauvaise idée?

C'est censé faire exactement ce que vous voulez.

eDIT: (voir Commentaires) Point pris, mais je pense que l'utilisation de JavaScript pour faire une telle tâche peut conduire à avoir des personnes assez contrariées (ceux qui cliquent sur une nouvelle fenêtre par habitude et ceux qui utilisent une extension Noscript. )

13
Luk

S'il vous plaît, Ne forcez pas Ouvrir un lien dans une nouvelle fenêtre.

Raisons contre cela:

  • Cela enfreint la règle du moins d'étonnement.
  • Le bouton arrière ne fonctionne pas et l'utilisateur ne sait pas pourquoi.
  • Qu'est-ce qui se passe dans les navigateurs à onglets? Nouvel onglet ou nouvelle fenêtre? Et ce qui se passe, est-ce ce que vous voulez, si vous mélangez des onglets et des fenêtres?

La raison pour laquelle j'entends toujours en faveur de l'ouverture d'une nouvelle fenêtre est que l'utilisateur ne quittera pas le site. Mais assurez-vous que je ne reviendrai jamais à un site qui m'énerve. Et si le site enlève le contrôle de moi, c'est une grosse gêne.

Une manière peut être que vous donnez deux liens, l'un est normal, l'autre l'ouvre dans une nouvelle fenêtre. Ajoutez la seconde avec un petit symbole après la liaison normale. De cette façon, les utilisateurs de votre site restent en contrôle du lien qu'ils veulent cliquer sur.

11
Mnementh

Voici un plugin que j'ai écrit pour JQuery

 (function($){  
  $.fn.newWindow = function(options) {       
    var defaults = {
        titleText: 'Link opens in a new window'     
    };

     options = $.extend(defaults, options);

     return this.each(function() {  
       var obj = $(this);

       if (options.titleText) {        
           if (obj.attr('title')) {
                     var newTitle = obj.attr('title') + ' (' 
                                                + options.titleText + ')';
           } else {
                    var newTitle = options.titleText;
           };              
           obj.attr('title', newTitle);            
       };          

       obj.click(function(event) {
          event.preventDefault();  
          var newBlankWindow = window.open(obj.attr('href'), '_blank');
          newBlankWindow.focus();
        });     
       });    
  };  
 })(jQuery);

exemple d'utilisation

$('a[rel=external]').newWindow();

Vous pouvez également modifier ou supprimer le texte du titre en passant dans certaines options.

Exemple de modification du texte du titre:

$('a[rel=external]').newWindow( { titleText: 'This is a new window link!' } );

Exemple de retirer son allocation

$('a[rel=external]').newWindow( { titleText: '' } );
5
alex
<a href="http://some.website.com/" onclick="return !window.open( this.href );">link text</a>

Les détails sont décrits dans mon Réponse à une autre question .

2
Fczbkk

Peut-être que je vais mal comprendre quelque chose, mais pourquoi ne voulez-vous pas utiliser cible = "_ vide"? C'est comme ça que je le ferais. Si vous recherchez le plus compatible, tout type de JavaScript serait alors que vous ne pouvez pas être sûr que le client a activé JS.

2
BoboTheCodeMonkey
<a href="http://www.google.com" onclick="window.open(this.href); return false">

Cela ouvrira toujours le lien (bien que dans la même fenêtre) si l'utilisateur dispose de JS désactivé. Sinon, cela fonctionne exactement comme cible = vide, et il est facile à utiliser car il vous suffit d'ajouter la fonction OnClick (peut-être en utilisant JQuery) à toutes les étiquettes normales.

1
Mark S. Rasmussen

J'utilise ça ...

$(function() {
  $("a:not([href^='"+window.location.hostname+"'])").click(function(){
    window.open(this.href);
    return false;
  }).attr("title", "Opens in a new window");
});
0
Mac

Si je suis sur une page de formulaire et que vous cliquez sur un lien MoreInfo.html (par exemple), cela me fait perdre des données, sauf si je l'ouvre dans un nouvel onglet/fenêtre, dites-moi simplement.

Vous pouvez me tromper pour ouvrir un nouvel onglet/fenêtre avec fenêtre.Open () ou cible = "_ vide", mais je pourrais avoir des cibles et des fenêtres contextuelles désactivées. Si JS, cibles et fenêtres contextuelles sont nécessaires pour que vous puissiez me tromper dans une nouvelle fenêtre/onglet, dites-moi avant de commencer sur le formulaire.

Ou, faire des liens vers une autre page une demande de formulaire, de sorte que lorsque le visiteur soumet, les données de formulaire actuelles sont enregistrées afin qu'elles puissent continuer à partir de la dernière fois, si possible.

0
Shadow2531

Si vous utilisez une saveur de Strict Doctype ou les vrais flavors XHTML à venir, la cible n'est pas autorisée ...

Utilisation de la transition, quel que soit l'étant HTML4.01 ou XHTML1, vous pouvez utiliser la solution Damirs, bien qu'elle ne puisse mettre en œuvre la propriété Windowname qui est nécessaire dans la fenêtre.Open ():

Dans HTML uni:

<a href="..." target="_blank" onclick="window.open(this.href, 'newWin'); return false;">link</a>

Si toutefois vous utilisez l'un des doctypes stricts, votre seul moyen d'ouvrir des liens serait d'utiliser cette solution sans l'attribut cible ...

- En passant, le nombre de navigateurs non-JS est souvent mal calculé, en regardant les numéros de comptoirs renvoient des nombres très différents, et je me demande combien de ces brouilles non-JS-navigateurs et autres! -)

0
roenving