在最近的 Web 开发中, 有遇到使用Clipboard
的场景。即在 B 侧 Web 业务中, 对于复杂页面的配置, 但愿提供复制粘贴
功能。 思考了几种方案:javascript
依赖后台接口, 新增数据 从需求角度来说, 比较简单的方案就是调用后台接口, 生成一条新数据, 用户在新增数据上进行修改便可。此方法适用于同一环境(product
或devnet
)的复制粘贴。前端
前端本地存储, 新增操做时检测 在用户触发复制行为时, 将数据存入本地localStorage
, 当用户进行新增操做时, 检测localStorage
是否有已复制数据。因为是前端保留了复制的数据, 就能够不用考虑后台的环境问题, 可使用测试环境与现网环境之间的复制粘贴。 但这里的测试环境与现网环境切换依赖了代理配置。对于经过不一样域名区分环境的应用(例如, xxx.xx.com or test.xxx.xx.com), localStorage 被同源策略限制, 没法跨域读取数据。java
使用 Clipboard 在上述前端本地存储方案的基础上, 想到了clipboard
的方案。相似于淘口令的方案, 将数据存入 Clipboard, 而后在新增数据时, 检测 Clipboard 便可。使用 Clipboard 是利用了系统的数据存储, 也解决了不一样域名间的跨域问题。web
docment.execCommand
是一个能够操做可编辑内容区域
的同步方法。api
// 语法
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
复制代码
方法第一个参数aCommandName
传入命令字, 包括了copy
, cut
, bold
, backColor
等操做。方法第二个参数aShowDefaultUI
指是否展现用户界面, 通常不使用这个参数。方法第三个参数aValueArgument
是传入操做命令时的一些额外参数。方法返回了一个 bool 值, 描述操做是否成功。详细状况能够参考MDN跨域
咱们要作的需求是将须要的内容写入 Clipboard, 使用的也就是上述提到的copy
浏览器
话很少说, 咱们经过代码看下如何使用这个功能安全
<div>
<input type="text" value="Copy Content"/>
<button onclick="handleClick">copy</button>
</div>
复制代码
const i = document.querySelector('input');
// 得到焦点
i.select();
document.execCommand('copy');
复制代码
点击按钮, Copy Content
就会被写入剪切板, 以后就能够将剪切板内容内容复制粘贴到其余地方了。app
讲到这里, 你们就会好奇, "为何要用input
组件呢?", 固然啦, 其实用textarea
也是能够的。上述提到了可编辑区域
, 只有input
, textarea
或具备contenteditable
属性的元素才能够被execCommand
操做dom
那若是不想页面中出现可编辑区域
, 那能够怎么办呢?
/** * @description 复制内容到剪切板 * @param {string} content 文本内容 */
function copy2Clipboard = content => {
const dom = document.createElement('input');
dom.value = content;
document.body.appendChild(dom);
dom.select();
document.execCommand('copy');
document.body.removeChild(dom);
};
复制代码
可使用如上取巧方法便可~
上述document.execCommand
是一个同步操做, navigator.clipboard
是浏览器提供的剪切板 API, 能够经过此 API 实现剪切板的操做, 各大浏览器厂商最近也都支持了navigator.clipboard
API.
那么如何使用呢? 咱们仍是从代码一一道来。
navigator.permissions.query({ name: 'clipboard-write' }).then(function(result) {
// 多是 'granted', 'denied' or 'prompt':
if (result.state === 'granted') {
// 可使用权限
// 进行clipboard的操做
navigator.clipboard.writeText('Clip Content').then(
function() {
/* clipboard successfully set */
// 成功设置了剪切板
},
function() {
/* clipboard write failed */
// 剪切板内容写入失败
}
);
} else if (result.state === 'prompt') {
// 弹窗弹框申请使用权限
} else {
// 若是被拒绝,请不要作任何操做。
}
});
复制代码
navigator.permissions
是浏览器向用户请求使用敏感接口的 API, 调用接口会向用户弹出 Prompt 框, 询问用户是否可使用相关权限。 上述代码先查询请求使用了clipboard-write
剪切板的使用权限。 在权限经过以后, 调用了navigator.clipboard.writeText
方法。
navigator.clipboard
API 被计划用于取代document.execCommand
接口, 因此也建议使用clipboard
API 去进行复制操做
。
代码以下:
async function copy2Clipboard(content) {
const res = await navigator.permissions.query({ name: 'clipboard-write' });
if (res.state === 'granted') {
return navigator.clipboard.writeText(content);
}
return Promise.reject(res);
}
复制代码
关注【IVWEB社区】公众号查看最新技术周刊,作更优秀的本身!
考虑到安全缘由, document.execCommand('paste')
操做已经被禁止了。
那有什么办法能够读取剪切板的内容呢?
监听 paste 事件
document.addEventListener('paste', event => {
// 从event中读取clipboardData
const pasteContent = (event.clipboardData || window.clipboardData).getData('text');
// do whatever
});
复制代码
在本需求场景中, 但愿能够由前端读取的剪切板内容, 而不是用户主动触发, 因此这里就再也不详述了。
那还有什么方案呢?
navigator.clipboard.readText
也是浏览器提供的剪切板操做 API, 与writeText
相似, 也须要请求剪切板权限。
// 申请使用剪切板读取权限
navigator.permissions.query({ name: 'clipboard-read' }).then(function(result) {
// 多是 'granted', 'denied' or 'prompt':
if (result.state === 'granted') {
// 可使用权限
// 进行clipboard的操做
navigator.clipboard
.readText()
.then(text => {
console.log('复制粘贴文本: ', text);
})
.catch(err => {
// 读取剪切板内容失败
console.error('Failed to read clipboard contents: ', err);
});
} else if (result.state === 'prompt') {
// 弹窗弹框申请使用权限
} else {
// 若是被拒绝,请不要作任何操做。
}
});
复制代码
首先咱们要申请使用剪切板的clipboard-read
权限, 在得到用户权限后, 便可经过navigator.clipboard.readText
获取权限了。
固然监听paste
事件也是能够的
document.addEventListener('paste', event => {
event.preventDefault();
navigator.clipboard.readText().then(text => {
console.log('Pasted text: ', text);
});
});
复制代码
所以, 咱们就能够将读取剪切板内容的功能抽象出来:
/** * @description 读取剪切板内容 * @return {string} */
async function readClipboard() {
const result = await navigator.permissions.query({ name: 'clipboard-read' });
if (result.state === 'granted' || result.state === 'prompt') {
return navigator.clipboard
.readText()
.then(text => text)
.catch(err => Promise.reject(err));
}
return Promise.reject(result);
}
复制代码
浏览器并无提供能够清理剪切板的接口。若是网站在使用完剪切板内容后, 须要进行清理内容的话, 能够从新写入数据
// ...
input.value = ' '; // input的值必须有值, 不能是空字符串
input.select();
document.execCommand('copy')
// 或者使用clipboard
navigator.clipboard.writeText('');
复制代码
Web操做剪切板内容具备必定的安全风险。浏览器为了保证用户隐私, 要求使用navigator.clipboard
API必需要接入HTTPS
。
HTTP网站是不支持此接口的, 仅支持document.execCommand('copy')
和监听paste
事件
从用户角度考虑, 也建议你们的网站都接入HTTPS
可能会支持更通用的write
与read
方法, 提供二进制数据的写入等等(例如图片等)。