32

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

7 回答 7

26

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

解决方法：

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

例如来自片段

Ctrl-Enter
<Tab>

例如从控制台

Enter
<Tab>

setTimeout(async()=>console.log(
     await window.navigator.clipboard.readText()), 3000)
于 2020-04-14T19:50:50.207 回答
15

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

于 2019-06-11T13:31:21.147 回答
4

如果您想调试 a 并四处查看结果。也可以隐藏这个<p></p>。

async function readClipboard () {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }

  try {
    const text = await navigator.clipboard.readText();
    document.querySelector('.clipboard-content').innerText = text;
  } catch (err) {
    console.error('Failed to copy!', err)
  }
}

function updateClipboard() {
  // Here You Can Debug without DomException
  debugger
  const clipboard = document.querySelector('.clipboard-content').innerText;
  document.querySelector('.clipboard-content').innerText = 'Updated => ' + clipboard;
}
<button onclick="readClipboard()">Paste</button>
<p class="clipboard-content"></p>
<button onclick="updateClipboard()">Edit</button>

于 2020-01-28T17:36:34.180 回答
3

问题

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

解决方案

我假设您在尝试从开发工具中调用它时会遇到这种情况。好吧，为了让生活更轻松，我将Jannis 的回答采用了一种不那么以肾上腺素为导向的方式。:)

在从 Devtools 中点击“选项卡”后，我正在添加一个一次性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，因为它是一个异步调用。

于 2021-12-16T23:12:59.920 回答
2

正如异常消息所说，您需要让 Document 积极关注才能使用此 API。

于 2019-05-25T15:28:19.107 回答
1

假设有一个p元素。你想复制它的innerText. 所以，让我们不要使用navigation.clipboard（因为 0f 你面临的错误）

因此，下面给出了一个示例，该示例在单击该按钮时复制innerText元素p的。您不要依赖使用下面的代码手动“单击”按钮。您可以通过pElement.click()从 devtools 控制台执行代码来触发“点击”。

@jannis-ioannou 在上面的帖子中提到的您的 devtools 控制台问题不会发生！

function myFunction() {
  var copyText = document.getElementById("copy-my-contents");
  var range = document.createRange();
  var selection = window.getSelection();
  range.selectNodeContents(copyText);  
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand("copy");
}
<p id="copy-my-contents">copy-me</p>
<button onclick="myFunction()">Copy text</button>

于 2021-07-27T14:39:11.620 回答
0

我在赛普拉斯测试中遇到了这个问题，这为我解决了这个问题：

  1. 首先关注即将被点击的复制图标/按钮，然后
  2. 使用 cypress-real-events 中的 cy.realClick 而不是 cy.click
于 2022-01-12T22:24:16.993 回答