web一键复制与粘贴

本文节选至https://mp.weixin.qq.com/s?__biz=MzIzNjcwNzA2Mw==&mid=2247486973&idx=1&sn=2bff5a7321f25af822306e9386727f6b&chksm=e8d28065dfa50973c350892ff2c98bec155d7622967c8fcfaa45eba5540a9f03a6c2e216e065&mpshare=1&scene=1&srcid=&sharer_sharetime=1575630540373&sharer_shareid=0756610ab67db8a88654263d0b215c95&exportkey=CFdXhh9udMqbF3pXEUAtgLg%3D&pass_ticket=ofUBk1VeYf%2BvkUVA66BU8dwqSMgwAyoNP5MkdxkzFBsJ81%2BzHBZa4%2Bn1BXcFsTXs#rd

在Web中, 剪切板的API曾被禁止使用, 如今又开放了相关接口, 让我们一起探索吧。

在最近的 Web 开发中, 有遇到使用Clipboard的场景。即在 B 侧 Web 业务中, 对于复杂页面的配置, 希望提供复制粘贴功能。思考了几种方案:

• 依赖后台接口, 新增数据

  从需求角度来讲, 比较简单的方案就是调用后台接口, 生成一条新数据, 用户在新增数据上进行修改即可。此方法适用于同一环境(product或devnet)的复制粘贴。

• 前端本地存储, 新增操作时检测

  在用户触发复制 行为时, 将数据存入本地localStorage, 当用户进行新增 操作时, 检测localStorage是否有已复制数据。由于是前端保留了复制 的数据, 就可以不用考虑后台的环境问题, 可以使用测试环境与现网环境之间的复制粘贴。但这里的测试环境与现网环境切换依赖了代理配置。对于通过不同域名区分环境的应用(例如, https://xxx.xx.com or https://test.xxx.xx.com), localStorage 被同源策略限制, 无法跨域读取数据。

• 使用 Clipboard

  在上述前端本地存储方案的基础上, 想到了clipboard的方案。类似于淘口令的方案, 将数据存入 Clipboard, 然后在新增数据时, 检测 Clipboard 即可。使用 Clipboard 是利用了系统的数据存储, 也解决了不同域名间的跨域问题。

Clipboard 的写入

document.execCommand

docment.execCommand是一个可以操作可编辑内容区域的同步方法。

// 语法
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);

方法第一个参数aCommandName传入命令字, 包括了copy, cut, bold, backColor等操作。方法第二个参数aShowDefaultUI指是否展示用户界面, 一般不使用这个参数。方法第三个参数aValueArgument是传入操作命令时的一些额外参数。方法返回了一个 bool 值, 描述操作是否成功。详细情况可以参考MDN（https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand）

我们要做的需求是将需要的内容写入 Clipboard, 使用的也就是上述提到的copy

话不多说, 我们通过代码看下如何使用这个功能

    
    copy

const i = document.querySelector('input');
// 获得焦点
i.select();
document.execCommand('copy');

点击按钮, Copy Content就会被写入剪切板, 之后就可以将剪切板内容内容复制粘贴到其他地方了。

讲到这里, 大家就会好奇, "为什么要用input组件呢？", 当然啦, 其实用textarea也是可以的。上述提到了可编辑区域, 只有input, textarea或具有contenteditable属性的元素才可以被execCommand操作

那如果不想页面中出现可编辑区域, 那可以怎么办呢?

/**
 * @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);
};

可以使用如上取巧方法即可~

navigator.clipboard.writeText

上述document.execCommand是一个同步操作, navigator.clipboard是浏览器提供的剪切板 API, 可以通过此 API 实现剪切板的操作, 各大浏览器厂商最近也都支持了navigator.clipboardAPI.

image

浏览器兼容性

那么如何使用呢? 我们还是从代码一一道来。

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 {
        // 如果被拒绝，请不要做任何操作。
    }
});

image

剪切板权限申请提示

navigator.permissions是浏览器向用户请求使用敏感接口的 API, 调用接口会向用户弹出 Prompt 框, 询问用户是否可以使用相关权限。上述代码先查询请求使用了clipboard-write剪切板的使用权限。在权限通过之后, 调用了navigator.clipboard.writeText方法。

navigator.clipboardAPI 被计划用于取代document.execCommand接口, 所以也建议使用clipboardAPI 去进行复制操作。

代码如下:

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);
}

Clipboard 的读取

document.execCommand

考虑到安全原因, document.execCommand('paste')操作已经被禁止了。

那有什么办法可以读取剪切板的内容呢?

监听 paste 事件

document.addEventListener('paste', event => {
    // 从event中读取clipboardData
    const pasteContent = (event.clipboardData || window.clipboardData).getData('text');
    // do whatever
});

在本需求场景中, 希望可以由前端读取的剪切板内容, 而不是用户主动触发, 所以这里就不再详述了。

那还有什么方案呢?

navigator.clipboard.readText

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.clipboardAPI必须要接入HTTPS。

HTTP网站是不支持此接口的, 仅支持document.execCommand('copy')和监听paste事件

从用户角度考虑, 也建议大家的网站都接入HTTPS