如何将页面的 url 复制到剪贴板 javascript (1)

📌 相关文章

📜 如何将页面的 url 复制到剪贴板 javascript (1)

📅 最后修改于: 2023-12-03 14:53:05.223000 🧑 作者: Mango

如何将页面的 URL 复制到剪贴板 JavaScript

在 Web 开发中，当我们需要将当前页面的 URL 复制到剪贴板以供用户分享或粘贴时，可以使用 JavaScript 来实现该功能。本文将介绍如何使用 JavaScript 将页面的 URL 复制到剪贴板。

1. HTML 代码

首先，我们需要创建一个按钮来触发复制 URL 的 JavaScript 代码：

<button id="copy-button">复制 URL</button>

注意：需要为按钮指定 ID，以便在 JavaScript 代码中使用。

2. JavaScript 代码

有多种方式可以将页面的 URL 复制到剪贴板，本文将介绍其中一种基于 Clipboard API 的方法。

2.1 创建 Clipboard 对象

我们可以使用 navigator.clipboard 方法创建 Clipboard 对象：

const clipboard = navigator.clipboard;

由于该方法需要在 HTTPS 网站上才能正常使用，因此我们需要将代码部署在 HTTPS 环境下或者本地测试时在 Chrome DevTools 中打开安全设置：

安全设置

2.2 复制 URL

复制 URL 的具体代码如下：

const copyButton = document.querySelector('#copy-button');
copyButton.addEventListener('click', async () => {
  try {
    await clipboard.writeText(window.location.href);
    console.log('URL 已复制到剪贴板');
  } catch (err) {
    console.error('复制失败：', err);
  }
});

该代码会在用户点击按钮时将当前页面的 URL 复制到剪贴板。注意：该代码使用了 async/await 语法，因此在调用 writeText 方法时需要使用 await 关键字，以确保复制操作已完成。

附录

完整的 HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>复制 URL 示例</title>
</head>
<body>
<button id="copy-button">复制 URL</button>
<script>
  const copyButton = document.querySelector('#copy-button');
  const clipboard = navigator.clipboard;
  copyButton.addEventListener('click', async () => {
    try {
      await clipboard.writeText(window.location.href);
      console.log('URL 已复制到剪贴板');
    } catch (err) {
      console.error('复制失败：', err);
    }
  });
</script>
</body>
</html>

该示例可通过浏览器（如 Chrome 或 Firefox）打开，也可以通过本地服务器（如 Python 提供的 SimpleHTTPServer）运行，在浏览器中访问 http://localhost:8000 即可查看效果。