Navigator.share 仅支持纯文本、URL 和文件，无法直接分享 DOM 内容；需手动提取 innerText 或清洗 HTML，并确保 HTTPS 与用户手势触发，且须检查兼容性并提供降级方案。
Navigator.share 只能分享纯文本、URL 和文件，无法直接传递原始 DOM 内容（如 HTML 字符串、节点结构或富文本样式）。它调用的是系统级分享 API，浏览器会将数据序列化为平台兼容的格式（如 Android 的 Intent Extra 或 iOS 的 UIActivity），而 DOM 是浏览器内部对象，不被原生分享机制识别。
分享前必须先提取并转换 DOM 内容
若你想把某段网页内容（例如一个 article 元素）分享出去，需手动提取其可序列化的信息：
-
纯文本：用
element.innerText获取去标签的可读文本（推荐，兼容性好、语义清晰） -
简化 HTML：用
element.innerHTML+ 简单清洗（如移除 script/style、转义特殊字符），但多数系统分享界面不渲染 HTML，仅作纯文本显示 - 标题 + 摘要 + 当前页 URL：更实用，符合大多数社交/笔记类 App 的接收习惯
基本使用方式（需 HTTPS + 用户手势触发）
Navigator.share 要求页面运行在安全上下文（HTTPS 或 localhost），且必须由用户显式操作（如点击按钮）触发：
document.getElementById('share-btn').addEventListener('click', async () => {
const el = document.querySelector('#content-to-share');
const text = el?.innerText?.trim() || '无内容';
const url = window.location.href;
try {
await navigator.share({
title: document.title,
text,
url
});
} catch (err) {
// 用户取消或浏览器不支持
if (err.name !== 'AbortError') {
console.warn('分享失败:', err);
}
}
});
注意兼容性与降级方案
并非所有浏览器都支持 navigator.share，尤其桌面端支持有限（Chrome for Android / Safari on iOS 是主力支持平台）：
- 检查支持性：
if ('share' in navigator) - 不支持时，可降级为复制文本到剪贴板（
navigator.clipboard.writeText()）或生成分享链接（如https://twitter.com/intent/tweet?text=...） - 避免在非用户手势中调用，否则会抛出
NotAllowedError
不能分享 DOM 节点或复杂对象
以下写法是无效的：
-
navigator.share({ text: document.querySelector('#box') })—— 传入 Element 对象，会转成[object HTMLElement] -
navigator.share({ text: JSON.stringify(someNode) })—— 序列化结果不可读，且含大量无关属性 - 试图传入 Blob 或 canvas.toBlob() 后未正确设置 type —— 文件分享需明确 MIME 类型，且仅支持图片、PDF 等常见类型
