打开新浏览器窗口的最佳方法是什么？

Question

我知道大多数链接应由最终用户决定如何打开,但我们不能否认有时你几乎"必须"强行进入一个新窗口(例如维护表单中的数据)在当前页面上).

我想知道的是,在新的浏览器窗口中打开链接的"最佳"方式的共识是什么.

我知道那<a href="url" target="_blank">是出局.我也知道由于<a href="#" onclick="window.open(url);">各种原因这并不理想.我也尝试用类似的东西完全替换锚点,<span onclick="window.open(url);">然后将SPAN的样式看起来像一个链接.

我倾向于<a href="url" rel="external">使用的一个解决方案是使用JavaScript将所有目标设置为标记为"外部"的锚点上的"_blank".

还有其他想法吗？什么更好？我正在寻找最符合XHTML标准且最简单的方法.

更新:我说target ="_ blank"是一个否定的,因为我已经在几个地方读过目标属性将逐步退出XHTML.

Answer 1

我正在使用你提出的最后一种方法.我添加rel ="external"或类似的东西然后使用jQuery迭代所有链接并为它们分配一个点击处理程序:

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

我发现这是最好的方法,因为:

• 语义非常清楚:你有一个外部资源的链接
• 它符合标准
• 它优雅地降级(你有一个非常简单的常规href属性链接)
• 它仍然允许用户中间点击链接,如果他们愿意,可以在新标签中打开它

Answer 2

为什么是target="_blank"个坏主意？

它应该完全符合你的要求.

编辑:(见评论)点了,但我确实认为使用javascript来完成这样的任务可能会让一些人感到非常沮丧(那些中间点击在习惯上打开一个新窗口的人,以及那些使用NoScript扩展的人)

Answer 3

请不要强制在新窗口中打开链接.

反对的原因:

• 它侵犯了最不惊讶的规则.
• 后退按钮不起作用,用户不太可能知道原因.
• 选项卡式浏览器会发生什么？新标签页或新窗口？无论哪个发生,如果你混合标签和窗口,它是你想要的吗？

我总是听到打开一个新窗口的原因是用户不会离开该网站.但可以肯定的是,我永远不会回到一个让我烦恼的网站.如果该网站取消了我的控制权,那将是一个很大的烦恼.

一种方法可能是,你给两个链接,一个是正常的,另一个是在一个新窗口中打开它.在普通链接后添加带有小符号的第二个.这样,您网站的用户就可以控制他们想要点击的链接.

Answer 4

这是我为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); 

示例用法

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

您还可以通过传递一些选项来更改或删除标题文本

更改标题文本的示例:

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

完全删除它的示例

$('a[rel=external]').newWindow( { titleText: '' } );