Question

navigator.clipboard.writeText() 在特定的 IOS 设备上不起作用

2021-01-05

9984

javascript ios promise copy clipboard

我目前正在使用 navigator.clipboard.writeText() 将元素中的值复制到剪贴板，但是 它似乎可以在除 iPhone X 和 iPhone 6 Plus 之外的所有设备上运行 。

浏览器是最新的，根据 MDN，它们应该可以与这些版本的 Safari 兼容。该代码似乎可以在桌面、Android 和其他 IOS 设备（例如 iPhone 12）上运行。

在 iPhone X 和 6 Plus 上，它会在控制台中对这两台设备抛出 Promise 错误，并且不会复制到剪贴板：

未处理的 Promise 拒绝：TypeError：未定义不是对象（评估'navigator.clipboard.writeText'）

完整错误

有人遇到过类似的事情并看到/想出了解决方案吗？谢谢！

代码片段：

const coupon = couponSelector.value;
    if (notMissing(coupon) && coupon !== '') {
      navigator.clipboard
        .writeText(coupon)
        .then(() =>
          LOGGER.debug({}, `${LOGGER_PREFIX}: Promise Successful.Copied coupon: ${coupon}`),
        )
        .catch((e) => LOGGER.error({ e }, `${LOGGER_PREFIX}: Promise Failed:`));
    }

Answer 1

请参阅我对 Damian Demasi 的答案中链接的帖子的回答，为方便起见，在此处重现...

在 (移动版) Safari 中，此 API 存在安全限制，其中之一是它必须在使用 https 保护的网站上执行，因此无法在 localhost 上运行，例如：

The API is limited to secure contexts, which means that navigator.clipboard is not present for http:// websites.

The request to write to the clipboard must be triggered during a user gesture. A call to clipboard.write or clipboard.writeText outside the scope of a user gesture (such as "click" or "touch" event handlers) will result in the immediate rejection of the promise returned by the API call. […]

Answer 2

我遇到了同样的问题。尝试了不同的可能解决方案，但均未成功。我最终使用了这个包： copy-to-clipboard 。

用法：

import copy from 'copy-to-clipboard';
 
copy('Text');

这里有一个类似的问题，我从那里了解到了这个包。