JS 复制按钮在浏览器出现错误信息

Question

以下是 JS 複杂按钮的代码，在使用浏览器检测功能，发现出现错误信息，请问如何修復这个问题?

GitHub开源项目：https://github.github.io/clipboard-copy-element

浏览器:
01. rocket-loader.min.js:1 A preload for 'https://unpkg.com/@github/clipboard-copy-element@latest'@github/clipboard-copy-element@latest' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

1. The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

2. The resource https://unpkg.com/@github/clipboard-copy-element@latest@github/clipboard-copy-element@latest was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

3. helloweb.htm#google_vignette:1 Tracking Prevention blocked access to storage for https://unpkg.com/@github/clipboard-copy-element@latest@github/clipboard-copy-element@latest.

代码:

<script type="module" src="https://unpkg.com/@github/clipboard-copy-element@latest"></script>
<script type="text/javascript">
  document.addEventListener('clipboard-copy', function (event) {
   const clipboardne = event.target.querySelector('.clipboardne')
    announcetws.setAttribute('aria-label', 'Copied');
     clipboardne.hidden = false
      setTimeout(function () {
       announcetws.setAttribute('aria-label', '');
        clipboardne.hidden = true
         }, 1000)
          });
</script>
<div aria-live="polite" id="announcetws"><!-- Copy --></div>
<input type="text" id="url" name="url" autocomplete="off" value="https://" />
<input type="submit" name="submit" value="产生!" />
<clipboard-copy for="url">复制<span class="clipboardne" hidden>成功</span></clipboard-copy>
<form name="biggbks">
<textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;display:block;"></textarea>
<clipboard-copy for="text">复制<span class="clipboardne" hidden>成功</span></clipboard-copy>
</form>

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

你遇到的错误信息主要涉及浏览器对 预加载资源（Preload） 的安全限制和跨域问题，同时代码中也存在一些逻辑上的错误。以下是详细分析及修复方案：

---

✅ 一、错误信息分析

1. Preload 资源未被使用

rocket-loader.min.js:1 A preload for 'https://unpkg.com/@github/clipboard-copy-element@latest'...
这是由于浏览器尝试预加载了某个资源（如 JavaScript 文件），但该资源并未在页面中正确使用。

2. 跨域问题（CORS）

Tracking Prevention blocked access to storage for https://unpkg.com/@github/clipboard-copy-element@latest...
这说明浏览器出于隐私保护，阻止了某些跨域请求，尤其是涉及到存储或敏感数据的资源。

3. 代码中的错误

• announcetws.setAttribute('aria-label', 'Copied'); 中的变量名拼写错误：announcetws 应为 announcer 或其他正确 ID。
• event.target.querySelector('.clipboardne') 可能无法找到正确的元素。
• 未处理用户点击事件，复制按钮没有绑定触发机制。

---

✅ 二、修复建议与解决方案

1. 修正 HTML 结构和 ID 拼写

确保所有 ID 和类名匹配，避免拼写错误。

<div aria-live="polite" id="announcer"><!-- Copy --></div>
<input type="text" id="url" name="url" autocomplete="off" value="https://" />
<input type="submit" name="submit" value="产生!" />
<clipboard-copy for="url">复制<span class="clipboardne" hidden>成功</span></clipboard-copy>

<form name="biggbks">
  <textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;display:block;"></textarea>
  <clipboard-copy for="text">复制<span class="clipboardne" hidden>成功</span></clipboard-copy>
</form>

---

2. 修正 JavaScript 逻辑

确保监听事件时能够正确获取目标元素，并更新对应的提示信息。

document.addEventListener('clipboard-copy', function (event) {
  const clipboardElement = event.target;
  const announcer = document.getElementById('announcer');
  const clipboardne = clipboardElement.querySelector('.clipboardne');

  if (clipboardne) {
    clipboardne.hidden = false;
    announcer.setAttribute('aria-label', 'Copied');
    
    setTimeout(() => {
      announcer.setAttribute('aria-label', '');
      clipboardne.hidden = true;
    }, 1000);
  }
});

---

3. 解决 CORS 与 Preload 问题

🔧 修复方式：

• 使用 crossorigin 属性来允许跨域请求。
• 确保预加载资源是真正需要的，并且配置正确。

修改你的 <script> 标签如下：

<script type="module" src="https://unpkg.com/@github/clipboard-copy-element@latest" crossorigin="anonymous"></script>

添加 crossorigin="anonymous" 可以避免部分浏览器的追踪防护策略。

---

4. 检查是否启用复制功能

确保 clipboard-copy 元素有正确的 for 属性指向目标输入框或文本区域。

例如：

<clipboard-copy for="url">复制<span class="clipboardne" hidden>成功</span></clipboard-copy>
<clipboard-copy for="text">复制<span class="clipboardne" hidden>成功</span></clipboard-copy>

---

✅ 三、完整修复后的代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>复制按钮测试</title>
  <script type="module" src="https://unpkg.com/@github/clipboard-copy-element@latest" crossorigin="anonymous"></script>
</head>
<body>

  <div aria-live="polite" id="announcer"><!-- Copy --></div>

  <input type="text" id="url" name="url" autocomplete="off" value="https://" />
  <input type="submit" name="submit" value="产生!" />

  <clipboard-copy for="url">复制<span class="clipboardne" hidden>成功</span></clipboard-copy>

  <form name="biggbks">
    <textarea name="text" id="text" rows="" cols="" style="width:160px;height:50px;display:block;"></textarea>
    <clipboard-copy for="text">复制<span class="clipboardne" hidden>成功</span></clipboard-copy>
  </form>

  <script>
    document.addEventListener('clipboard-copy', function (event) {
      const clipboardElement = event.target;
      const announcer = document.getElementById('announcer');
      const clipboardne = clipboardElement.querySelector('.clipboardne');

      if (clipboardne) {
        clipboardne.hidden = false;
        announcer.setAttribute('aria-label', 'Copied');
        
        setTimeout(() => {
          announcer.setAttribute('aria-label', '');
          clipboardne.hidden = true;
        }, 1000);
      }
    });
  </script>

</body>
</html>

---

✅ 四、总结

| 问题 | 修复方法 | |------|----------| | 预加载资源未使用 | 添加 crossorigin="anonymous" | | 跨域访问被阻止 | 确保资源支持 CORS | | 代码逻辑错误 | 修正 querySelector 和 id 拼写 | | 提示不显示 | 确保 aria-label 正确绑定 |

---

如有进一步问题，欢迎继续提问！