调用 navigator.clipboard.readText() 时出现 DOMException

Question

以下代码行在 chrome 升级到版本 74.0.3729.169（官方版本）（64 位）后用于工作并停止工作。现在，即使权限设置正确，我也会收到 DOMException。感谢您能否解释错误和解决方法。异常详情：

消息：文档不是重点名称：NotAllowedError 代码：0

        navigator.permissions.query({ name: 'clipboard-read' }).then(result => {
            // If permission to read the clipboard is granted or if the user will
            // be prompted to allow it, we proceed.

            if (result.state === 'granted' || result.state === 'prompt') {
                navigator.clipboard.readText()
                    .then(text => {
                        //my code to handle paste
                    })
                    .catch(err => {
                        console.error('Failed to read clipboard contents: ', err);
                    });

Answer 1

我遇到的问题是，我收到一条警报，提示文本已被复制，这导致文档焦点消失。具有讽刺意味的是，这导致文本无法被复制。解决方法非常简单：

    clipboard.writeText(clippy_button.href).then(function(x) {
      alert("Link copied to clipboard: " + clippy_button.href);
    });

只需在 Promise 解决时显示警报即可。这可能无法解决每个人的问题，但如果您是基于搜索错误来到这里的，这可能是您代码的正确修复方法。

Answer 2

正如 Kaiido 所说，你的 DOM 需要专注。当我在代码中放置断点时，我在开发过程中遇到了同样的问题......控制台开发人员获取了焦点并出现了错误。使用相同的代码和相同的浏览器，如果 F12 关闭，一切正常

Answer 3

从 devtools 控制台或片段执行代码时似乎会发生这种情况。

解决方法：

您可以执行以下代码并在 3 秒内通过单击某处或仅按 来关注窗口<tab>。

例如从片段

Ctrl-Enter
<Tab>

例如从控制台

Enter
<Tab>

setTimeout(async()=>console.log(
     await window.navigator.clipboard.readText()), 3000)

Answer 4

问题

显然，这是一个安全风险。:)

解决方案

我假设当您尝试从开发工具调用它时您会遇到这个问题。好吧，为了让生活更轻松，我采用詹尼斯的答案，以一种不那么肾上腺素为导向的方式。:)

我添加了一个一次性focus侦听器，以便window在从开发工具中点击“选项卡”后神奇地完成这些操作。

function readClipboardFromDevTools() {
    return new Promise((resolve, reject) => {
        const _asyncCopyFn = (async () => {
            try {
                const value = await navigator.clipboard.readText();
                console.log(`${value} is read!`);
                resolve(value);
            } catch (e) {
                reject(e);
            }
            window.removeEventListener("focus", _asyncCopyFn);
        });
    
        window.addEventListener("focus", _asyncCopyFn);
        console.log("Hit <Tab> to give focus back to document (or we will face a DOMException);");
    });
}

// To call:
readClipboardFromDevTools().then((r) => console.log("Returned value: ", r));

注意：返回值是一个 Promise，因为它是异步调用。

Answer 5

正如异常消息所示，您需要主动关注文档才能使用此 API。