对比前端和后端方案给WordPress文章链接在新窗口打开

本文介绍了两种实现外部链接在新窗口打开的方法：前端使用jQuery遍历页面链接，通过域名比较识别外部链接并添加target和rel属性；后端使用PHP正则匹配内容中的链接，解析域名后为外部链接添加相应属性。两种方案均能有效处理外部链接跳转并增强安全性。

[wechat_pay text=”赞助我一杯咖啡” url=”https://your-wechat-qrcode-url.com“]

[site_intro title=”欢迎来到好嘢科技”]

前端JS方法，

遍历所有连接，给连接添加属性，让它在新窗口打开。

jQuery(document).ready(function($) {
        // 获取当前域名
        var currentDomain = window.location.hostname;
        
        // 选择所有链接
        $('a').each(function() {
            var href = $(this).attr('href');
            
            // 确保链接存在且不是空链接、锚点链接或javascript链接
            if (href && href !== '#' && !href.startsWith('javascript:') && !href.startsWith('tel:') && !href.startsWith('mailto:')) {
                try {
                    // 尝试创建URL对象来解析链接
                    var url = new URL(href, window.location.href);
                    
                    // 检查链接是否为外部链接（不包含当前域名）
                    if (url.hostname !== currentDomain && url.hostname !== '') {
                        // 为外部链接添加target和rel属性
                        $(this).attr('target', '_blank');
                        $(this).attr('rel', 'noopener noreferrer');
                    }
                } catch(e) {
                    // 如果URL解析失败（可能是相对路径），则忽略
                    console.log('URL解析失败:', href);
                }
            }
        });
    });
    </script>

• 域名检测：获取当前网站的域名
• 链接遍历：使用jQuery遍历页面上的所有<a>标签
• 链接过滤：排除以下类型的链接：
  • 空链接或#锚点链接
  • javascript:协议链接
  • tel:电话链接
  • mailto:邮件链接
• 外部链接判断：
  • 使用URL对象解析链接
  • 比较链接域名与当前网站域名
  • 如果域名不同，则认为是外部链接
• 属性设置：为外部链接添加：
  • target="_blank"：在新窗口打开
  • rel="noopener noreferrer"：增强安全性，防止新窗口访问原窗口