JS自动复制内容的几种方式

您所在的位置:网站首页 javascript网页复制 JS自动复制内容的几种方式

JS自动复制内容的几种方式

2024-07-03 09:49| 来源: 网络整理| 查看: 265

一、前言

现在很多网站,尤其是技术性强的论坛、博客等,用户都可能有大量复制需求。但用户手动复制在内容不止一屏时很不方便,且一些网站的设计可能导致用户无法正确复制内容。因此,就需要使用脚本复制内容,实现点击按钮自动复制的效果。

本文大部分属性及方法参考MDN开发者文档,并有对应页面的链接,可供参考。

注:末尾附录有无注释的源代码,可直接在项目中使用。

二、设置剪贴板数据[IE Only]

显然,最方便的方法便是直接设置剪贴版的数据。在IE中暴露了 window.clipboardData 属性,可获取到一个表示剪贴版数据的对象。

这个对象的类型,至少在符合规范的新版本中是DataTransfer。在剪贴版这一例中,用到的该借口的函数有三个:

getData(type),获取指定 type 类型的数据值。 setData(type,data),设置指定 type 类型的数据值为value。 clearData([type]),清空指定 type 类型的数据。如果不提供参数,则清空所有数据。

要注意该type不是通常意义的key,它的取值是固定的,如 text/plain(可直接使用 text), text/html , text/uri-list 等,显然是指 MIME 类型。

于是,简单地使用以下代码便可自动复制内容:

window.clipboardData.setData("text",data);

当然,这很不安全。因此,只有IE支持它。

三、选区操作

显然,上述操作剪贴版的方式使得用户在不同位置的数据暴露给未知的第三方。所以大多数浏览器禁止了这一操作。但是,至少单纯地复制选中区域风险不大,这通常是被允许的。

但是,这就要求系统将选区调整到某个包含所需文本的区域,然后再设法触发复制操作。如果自动复制功能只是复制现成的元素,并且内容是连续的话(目前只有Firefox允许多个区域同时选中,并且复制的内容无法保证正确),直接将选区调整到该段区域即可。

但大多数情况下我们需要像 setData 方法那样复制特定文本,还要防止各种元素被错误复制。因此,就需要创建一个临时的文本节点,从而达到复制的效果。

基本的复制函数如下(下附无注释完整版):

function copy(data) { var sel = window.getSelection(); //获取Selection对象 var range = document.createRange(); //创建Range对象 var node = document.createTextNode(data


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3