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

我知道大多数链接应该留给最终用户来决定如何打开,但是我们不能否认有时候你几乎不得不强迫进入一个新的窗口(例如,将数据保存在一个窗体中在当前页面上)。

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

我知道<a href="url" target="_blank">已经出来了。 我也知道, <a href="#" onclick="window.open(url);">不是理想的各种原因。 我也尝试用像<span onclick="window.open(url);">这样的东西完全replace锚点,然后将SPAN设置为一个链接。

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

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

更新:我说目标=“_空白”是一个不,因为我已经读了几个地方的目标属性将被淘汰的XHTML。

我正在使用你提出的最后一个方法。 我添加rel =“external”或类似的东西,然后使用jQuery遍历所有链接并为其分配一个点击处理程序:

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

我觉得这是最好的方法,因为:

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

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

它应该做你想要的。

编辑:(见评论)点,但我认为使用JavaScript做这样一个任务可能会导致有些人很不高兴(中间点击打开一个新窗口的习惯,和那些谁使用NoScript扩展)

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

原因是:

  • 它侵犯了最不惊讶的规则。
  • 后退button不起作用,用户不知道为什么。
  • 在标签式浏览器中发生了什么? 新标签页或新窗口? 无论发生哪种情况,如果混合了标签和窗口,是不是你想要的?

我总是听到赞成打开一个新窗口的原因是用户不会离开网站。 但可以肯定的是,我永远不会回到一个令我烦恼的网站。 而如果这个地方把我的控制权拿走了,这是一个很大的烦恼。

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

这里是我为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: '' } ); 

也许我误解了一些东西,但是为什么你不想使用target =“_ blank”? 我就是这么做的。 如果你正在寻找最兼容的,那么任何types的JavaScript都将被淘汰,因为你不能确定客户端已经启用了JS。

 <a href="http://some.website.com/" onclick="return !window.open( this.href );">link text</a> 

详情在我对另一个问题的回答中有描述。

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

这将仍然打开链接(尽pipe在同一个窗口),如果用户有JS禁用。 否则,它的工作方式与target = blank完全相同,而且它很容易使用,因为您只需将onclick函数(可能通过使用JQuery)附加到所有普通标记。

如果您使用任何严格的文档types或即将到来的真正的XHTML风味的味道,目标是不允许的…

使用过渡,无论是HTML4.01还是XHTML1,都可以使用Damirs解决scheme,但是无法实现window.open()中必需的windowName属性:

用纯html:

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

但是,如果您使用其中一个严格的文档types,您打开链接的唯一方法是使用此解决scheme,而不使用目标属性…

– 顺便说一下,非JS浏览器的数量往往失算,查询计数器的数字指的是非常不同的数字,我想知道有多less非JS浏览器是爬虫之类的! – )

如果我在一个表单页面上点击一个moreinfo.html链接(例如),导致我失去了数据,除非我在一个新的标签页/窗口打开它,告诉我。

你可以欺骗我用window.open()或target =“_ blank”打开一个新的标签页/窗口,但我可能会禁用目标和popup窗口。 如果您需要JS,目标和popup框来诱使我打开一个新的窗口/标签,请在开始之前告诉我。

或者,将表单请求链接到另一个页面,以便当访问者提交时,当前表单数据将被保存,以便可能的话可以继续上一次。

我用这个…

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