HTML怎么做复制链接分享_HTML复制链接分享功能实现【保姆级教程】-html教程-PHP中文网

navigator.clipboard.writeText()需在HTTPS/localhost安全上下文且由用户手势（如click）触发，异步调用会报错；降级可用document.execCommand('copy')配合临时textarea，Vue/React中须避免在useEffect等非交互时机调用。

html怎么做复制链接分享_html复制链接分享功能实现【保姆级教程】

浏览器原生支持复制链接，不需要引入任何库，navigator.clipboard.writeText() 就够用；但直接调用会触发权限拒绝或安全上下文限制，必须处理好触发时机和降级逻辑。

为什么 `navigator.clipboard.writeText()` 有时不生效

这个 API 只能在安全上下文（HTTPS 或 localhost）中使用，且必须由用户手势（如 click、touchend）触发——不能在异步回调（如 setTimeout、fetch.then）里调用，否则抛出 "Permission denied" 或 "clipboard-write permission denied" 错误。

确保页面运行在 HTTPS 或 localhost（开发时可用 http://localhost:8080）
复制操作必须绑定在用户可感知的交互事件上，例如：button.onclick、a.addEventListener('click', ...)
不要在 Promise.then、setTimeout、scroll 回调中调用它
部分旧版 Safari 需要先调用 navigator.clipboard.readText() 触发权限提示（但一般不推荐主动读）

兼容低版本浏览器的降级方案：用 `document.execCommand('copy')`

document.execCommand('copy') 已废弃但仍在多数浏览器中有效，适合需要支持 IE11 或老版 Android WebView 的场景。它要求把目标文本塞进一个临时或并选中，再执行命令。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

创建不可见的，设置 value 为当前 URL（window.location.href）或自定义链接
用 textarea.select() 选中内容，再调用 document.execCommand('copy')
执行后立即 textarea.remove()，避免 DOM 泄漏
注意：该方法在 iOS Safari 13+ 和部分新版 Chrome 中可能静默失败，需配合 try/catch 判断是否成功

function fallbackCopy(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.left = '-9999px';
  document.body.appendChild(textarea);
  textarea.focus();
  textarea.select();
  try {
    return document.execCommand('copy');
  } catch (e) {
    return false;
  } finally {
    document.body.removeChild(textarea);
  }
}

一键复制当前页面链接的完整写法

把现代 API 和降级逻辑封装成一个健壮函数，点击按钮即可复制 window.location.href，并反馈结果。

优先尝试 navigator.clipboard.writeText()
捕获 NotAllowedError（权限未授予）、TypeError（API 不可用）等错误
失败时自动 fallback 到 execCommand 方案
复制成功后建议用 button.textContent 短暂提示“已复制”，2 秒后还原

function copyCurrentUrl() {
  const url = window.location.href;
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(url).catch(err => {
      if (err.name === 'NotAllowedError') {
        console.warn('Clipboard write denied: not triggered by user gesture');
      } else if (err.name === 'TypeError') {
        fallbackCopy(url);
      }
    });
  } else {
    fallbackCopy(url);
  }
}

真正容易被忽略的是：很多开发者在 Vue/React 组件里把复制逻辑写在 useEffect 或 mounted 钩子中，结果因非用户触发而失败；还有人把链接硬编码成 'https://example.com'，忘了动态取 window.location.href 或路由对象的 fullPath —— 这些细节比 API 本身更常导致功能失灵。