Firefox 会不会“正确”打开在 JavaScript 加载页面时添加了 target="_blank" 属性的链接？答案

【问题标题】：Will Firefox not "correctly" open links with a target="_blank" attribute added on page load by JavaScript?Firefox 会不会“正确”打开在 JavaScript 加载页面时添加了 target="_blank" 属性的链接？
【发布时间】：2012-04-02 10:41:10
【问题描述】：

我正在使用以下代码（使用 Underscore.js 库）将属性 target="_blank" 和 rel="external" 添加到页面加载时的所有非本地链接。我的代码如下所示：

(function($){
    $(document).ready(function(){

        // Create a matching regex pattern based on current host name
        var regexPattern = new RegExp(location.origin);

        // Gather all non-local links
        nonLocalLinks = _(jQuery('a')).reject(function(link) { 

            return link.href.match(regexPattern);

        });

        // Add attributes to all non-local links
        _(nonLocalLinks).each(function(item) { 
            item.target = '_blank'; 
            item.rel = 'external';
        });

    })
})(jQuery)

此代码在所有经过测试的浏览器（Chrome 17、IE7、IE8、IE9、Safari）中都能正常工作，但在 Firefox 10 中不起作用。在锚标记上设置了 target="_blank" 属性的链接作为 HTML 输出的一部分由服务器功能按预期。这对 Firefox 中的页面加载不起作用，还是我还缺少其他东西？

另外 - 我感谢任何和所有的意见，但请不要暗示这是糟糕的用户体验等。我同意，但我别无选择 - 这是给客户的，这就是他们的想; “否”不是一个选项。

编辑：这个“不起作用”意味着链接在同一个选项卡中打开。 firebug 控制台中没有错误 - 链接的行为就像 target="_blank" 未设置一样。

【问题讨论】：

你为什么直接设置“target”而用jQuery“attr”函数设置“rel”>？如果你出于某种原因必须在那里使用 jQuery，你应该使用“.prop()”而不是“.attr()”，几乎可以肯定。当你说它不起作用时，究竟是什么问题？你怎么能说它不起作用。
那是旧代码的遗迹 - 感谢您指出。修复了问题和实际来源。为问题添加了更多详细信息。
另外，如果您发布该正则表达式会很有帮助，因为这可能就是问题所在。
Here 是一个简单的 jsfiddle，它展示了通过 JavaScript 将“目标”添加到 <a> 链接在 Firefox 中效果很好。
@Pointy - 您对正则表达式的评论将我引向了这个问题。位置对象在 Firefox 中没有 origin 属性。我将它更新为location.origin || location.host，现在它可以工作了。你有没有机会把它作为答案让我接受？

标签： javascript firefox

【解决方案1】：

Firefox 在window.location 上没有origin 属性。这意味着您的regexPattern 最终会变为//，而nonLocalLinks 则为空。

演示（观看控制台）：http://jsfiddle.net/ambiguous/tS4WB/

你必须用这样的方式来解释缺少的location.origin：

var origin = location.origin;
if(!origin)
    origin = location.protocol + '//' + location.host;

演示：http://jsfiddle.net/ambiguous/envWe/

您可能还想在您的正则表达式中添加一个^ 锚点，或者只是检查indexOf 是否给您零。

如果您查看MDN documentation on window.location，您会发现支持以下属性：

散列
主持人
主机名
href
路径名
端口
协议
搜索

没有来源。

【讨论】：