您现在的位置是:群英 > 开发技术 > web开发
JS怎样实现复制页面内容,有哪些实现方法
Admin发表于 2022-08-22 17:27:51574 次浏览
相信很多人对“JS怎样实现复制页面内容,有哪些实现方法”都不太了解,下面群英小编为你详细解释一下这个问题,希望对你有一定的帮助


现在有很多第三方插件能够实现 copy 功能,但如果让我们自己去做,我们知道如何去实现吗?

这篇文章介绍三种实现方案。

方式一:Async Clipboard API

使用 Async Clipboard API

这种方式使用起来最简单,但兼容性不太好,而且要求比较多。

示例代码:

const promise = navigator.clipboard.writeText(newClipText);

需要注意,方法的返回值是个 Promise。并且使用此方法时,页面必须处于 focus 状态,否则会报错。

方式二:Document.execCommand API

使用 Document.execCommand

此方法虽然警告被废弃,不再属于 web 标准,但历史因素较多,相信浏览器还会支持很久。

复制 DOM 元素内容

<p id="content">123456</p>
<button id="copyButton">复制</button>

复制 DOM 元素的时候,需要额外使用到 selection API 和 Range API。

developer.mozilla.org/en-US/docs/…

developer.mozilla.org/en-US/docs/…

示例代码:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('click', function () {
  const selection = window.getSelection();
  const range = document.createRange();
  // 设置选中内容
  range.selectNodeContents(content);
  // 清空选中内容
  selection.removeAllRanges();
  // 添加选中内容
  selection.addRange(range);
  document.execCommand('copy');
});

selection 需要先清空再添加 range。

这里会有一个细节问题,点击复制按钮之后,被复制的内容处于选中状态,有些突兀。

解决方式是在复制完成之后调用 selection.removeAllRanges() 清空选中内容即可。

再考虑一种情况,用户在复制之前就选中了页面的部分内容。在复制完成之后,除了清空选中的复制内容,还需要还原用户在复制之前就选中的内容。

实现代码如下:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('click', function () {
  const selection = window.getSelection();
  const range = document.createRange();
  // 缓存用户选中的内容
  const currentRange =
    selection.rangeCount === 0 ? null : selection.getRangeAt(0);
  // 设置文档片段
  range.selectNodeContents(content);
  // 清空选中内容
  selection.removeAllRanges();
  // 将文档片段设置为选中内容
  selection.addRange(range);
  try {
    // 复制到剪贴板
    document.execCommand('copy');
  } catch (err) {
    // 提示复制失败
  } finally {
    selection.removeAllRanges();
    if (currentRange) {
      // 还原用户选中内容
      selection.addRange(currentRange);
    }
  }
});

先缓存用户选中的内容,复制完成之后,再还原。

复制 input 元素内容

使用 input 元素对象的 select 方法即可选中内容,无需创建 range 片段设置选中内容。

示例代码:

const copyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('input');
copyButton.addEventListener('click', function () {
  const selection = window.getSelection();
  const currentRange =
    selection.rangeCount === 0 ? null : selection.getRangeAt(0);
  // 选中 input 内容
  inputEl.select();
  // 复制到剪贴板
  try {
    document.execCommand('copy');
  } catch (err) {
    // 提示复制失败
    // 。。。
  } finally {
    selection.removeAllRanges();
    if (currentRange) {
      // 还原用户选中内容
      selection.addRange(currentRange);
    }
  }
});

点击复制按钮,同样不会移除之前选中的内容。

方法三:覆写 copy 事件

w3c.github.io/clipboard-a…

引用上面链接内的一段代码作为示例:

// Overwrite what is being copied to the clipboard.
document.addEventListener('copy', function (e) {
  // e.clipboardData is initially empty, but we can set it to the
  // data that we want copied onto the clipboard.
  e.clipboardData.setData('text/plain', '西炒蛋');
  // This is necessary to prevent the current document selection from
  // being written to the clipboard.
  e.preventDefault();
});

在页面复制任何内容,粘贴输出的内容都会是 “西炒蛋”。


关于“JS怎样实现复制页面内容,有哪些实现方法”的内容就介绍到这,感谢各位的阅读,相信大家对JS怎样实现复制页面内容,有哪些实现方法已经有了进一步的了解。大家如果还想学习更多知识,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

相关信息推荐
2022-07-06 17:52:25 
摘要:这篇文章主要为大家介绍了Go语言教程关于GC垃圾回收三色标记的示例详解,本篇文章是Go语言七篇入门教程系列文章,有需要的朋友可以借鉴参考下,希望能够有所帮助
2022-09-30 17:55:24 
摘要:本文主要介绍了java关于@Async异步调用详细解析附代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2022-06-01 17:37:38 
摘要:php数组不是基本类型,而是复合数据类型。基本类型(标量数据类型)只能存储一个数据,而数组中可以存储任意多个数据。复合数据类型允许将多个类型相同的数据聚合在一起,表示为一个实体项;复合数据类型包括数组(Array)和对象(Object)。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部