jQuery attr设置target="_blank"失效？如何仅对外部链接生效？

嘿，我来帮你搞定这个问题！你遇到的两个核心需求——让News板块的链接在新窗口打开，以及只对外部链接生效，我都给你梳理清楚解决方案。

先解决「设置新窗口打开失效」的问题 #

你之前的代码没生效，大概率是DOM加载时机不对，或者代码写法可以更简洁。先看修正后的基础版代码：

$(document).ready(function() {
  // 定位News板块对应的区块
  const newsBlock = $('[data-block-json*="9dac9e62587eab820575"]');
  // 找到板块内所有新闻标题链接
  const newsLinks = newsBlock.find('.summary-item .summary-title a');
  
  // 批量给链接添加新窗口打开属性（加上安全属性rel）
  newsLinks.attr({
    'target': '_blank',
    'rel': 'noopener noreferrer'
  });
});

关键修正点： #

1. 包裹在$(document).ready()里：确保DOM完全加载后再执行代码，避免找不到目标元素的情况。
2. 简化选择器：直接链式找到所有目标链接，不用单独遍历items再找链接，更高效。
3. 添加rel="noopener noreferrer"：这是安全最佳实践，防止新打开的外部页面通过window.opener控制你的网站页面。

再实现「仅对外部链接生效」的逻辑 #

要区分外部链接，核心是对比链接的域名和当前网站的域名。下面是升级后的代码：

$(document).ready(function() {
  // 获取当前网站的纯净域名（统一处理www前缀和大小写）
  const getCleanHost = (host) => host.toLowerCase().replace(/^www\./, '');
  const currentSiteHost = getCleanHost(window.location.hostname);

  const newsBlock = $('[data-block-json*="9dac9e62587eab820575"]');
  const newsLinks = newsBlock.find('.summary-item .summary-title a');
  
  newsLinks.each(function() {
    const $link = $(this);
    const linkHost = $link.prop('hostname'); // 用prop获取解析后的域名，比attr更可靠
    
    // 判断是否为外部链接：有域名，且和当前网站域名不同
    if (linkHost && getCleanHost(linkHost) !== currentSiteHost) {
      $link.attr({
        'target': '_blank',
        'rel': 'noopener noreferrer'
      });
    }
  });
});

逻辑说明： #

1. getCleanHost函数：统一处理域名的大小写和www前缀，避免www.sunsetstudiosent.com和sunsetstudiosent.com被误判为不同域名。
2. 用prop('hostname')获取域名：attr('href')会返回原始的链接字符串，而prop('hostname')会解析出标准的域名（相对路径的链接hostname为空，不会被判定为外部链接）。
3. 条件判断：只有当链接有独立域名，且和当前网站域名不一致时，才添加新窗口打开属性。

额外排查点 #

如果还是没生效，可以检查：

• 打开浏览器控制台（F12），看看有没有报错，比如jQuery是否正确引入。
• 确认[data-block-json*="9dac9e62587eab820575"]这个选择器确实能定位到News板块（可以在控制台输入$('[data-block-json*="9dac9e62587eab820575"]')看返回结果）。

内容的提问来源于stack exchange，提问作者ThisGuy