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

这似乎是从devtools控制台或代码片段执行代码时发生的。

解决方法：

您可以执行以下代码，并在3秒内通过单击某个位置或仅按<tab>来专注于窗口。

例如来自摘要

Ctrl-Enter
<Tab>

例如从控制台

Enter
<Tab>

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

Answer 2

如果要调试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>

Answer 3

如异常消息所述，您需要使文档处于主动集中状态才能使用此API。

Answer 4

正如Kaiido所说，您的DOM需要重点关注。在开发过程中，当我在代码中放置断点时，我遇到了同样的问题。使用相同的代码和相同的浏览器，如果关闭F12，一切都可以正常工作

Answer 5

编写后编写这样的警报功能。

navigator.clipboard.writeText(text);
alert("Copied");

Answer 6

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

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

@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>

调用navigator.clipboard.readText（）时出现DOMException

6 个答案: