本文讲解在 wordpress 归档页中，为多个文章链接绑定 web share api，实现点击不同链接时自动将对应标题和 url 传入分享接口，避免 id 重复、提升代码可维护性。
本文讲解在 wordpress 归档页中，为多个文章链接绑定 web share api，实现点击不同链接时自动将对应标题和 url 传入分享接口，避免 id 重复、提升代码可维护性。
在 WordPress 归档页中，常需为每篇文章提供一键分享功能。若直接使用 document.querySelector('#shareBtn') 绑定事件，会因多个元素共用同一 ID（违反 HTML 规范）导致仅首个元素生效。正确做法是：为每个链接分配唯一 ID，并通过事件委托或参数化函数动态读取其内容与 href 属性。
✅ 正确实现方式（推荐使用事件委托）
相比为每个链接单独添加监听器（如答案中所示），更简洁、可扩展的方案是采用事件委托——监听父容器，根据点击目标动态提取数据：
<!-- HTML：确保每个链接有唯一 data-* 属性，或直接利用原生属性 --> <div class="post-list"> <a href="https://example.com/post1" class="share-link">How to Use Git</a> <a href="https://example.com/post2" class="share-link">CSS Grid Explained</a> <a href="https://example.com/post3" class="share-link">JavaScript Closures</a> </div>
// JavaScript：事件委托 + Web Share API
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.post-list').addEventListener('click', (e) => {
const link = e.target.closest('.share-link');
if (!link || !navigator.share) return;
e.preventDefault(); // 阻止默认跳转，确保分享优先
navigator.share({
title: link.textContent.trim(), // 自动获取链接文本作为标题
url: link.href // 自动获取 href 作为分享 URL
})
.then(() => console.log('Shared successfully'))
.catch(err => {
console.warn('Web Share API not supported or cancelled:', err);
// 可降级：复制链接或跳转到分享页面
fallbackShare(link.href, link.textContent.trim());
});
});
});
// 可选：浏览器不支持时的备用方案
function fallbackShare(url, title) {
const textarea = document.createElement('textarea');
textarea.value = `${title}\n${url}`;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert('Link copied to clipboard!');
}⚠️ 关键注意事项
- ID 唯一性强制要求：HTML 中 id 必须全局唯一，重复 ID 将导致 getElementById() 行为不可预测，务必改用 class 或 data-* 属性配合事件委托。
- e.preventDefault() 不可省略：否则点击会立即跳转，中断分享流程。
- 兼容性兜底：navigator.share 仅支持较新版本 Chrome、Edge、Samsung Internet 等；Safari 和部分旧浏览器不支持，必须提供降级逻辑（如复制链接）。
- WordPress 动态输出建议：在主题模板中，可直接用 PHP 输出 data-title 和 data-url 属性，避免依赖 DOM 文本解析（防止空格/换行干扰）：
<!-- 在 WordPress 循环中 --> <a href="<?php the_permalink(); ?>" class="share-link" data-title="<?php echo esc_attr(get_the_title()); ?>" data-url="<?php echo esc_url(get_the_permalink()); ?>"> <?php the_title(); ?> </a>
然后 JS 中改为 title: link.dataset.title, url: link.dataset.url，更健壮可靠。
通过以上结构化实现，你不仅能优雅支持多文章动态分享，还能保障跨浏览器兼容性与 WordPress 场景下的稳定性。
