网页复制当前网址按钮 - 使用JQ实现

本文将介绍如何使用JQ实现一个简单的“点此复制本站网址”按钮，方便用户复制当前网页的URL地址。

**HTML代码：**

<button class='copy-url-btn'>点此复制本站网址</button>

**JS代码：**

$(document).ready(function() {
    $('.copy-url-btn').click(function() {
        var url = window.location.href;
        var tempInput = document.createElement('input');
        tempInput.value = url;
        document.body.appendChild(tempInput);
        tempInput.select();
        document.execCommand('copy');
        document.body.removeChild(tempInput);
        alert('已成功复制到剪贴板');
    });
});

**代码解析：**

1. 首先，我们创建一个按钮元素，并使用 copy-url-btn 类名来标识它。
2. 使用jQuery的 ready() 方法确保代码在DOM加载完成后执行。
3. 绑定 click 事件到按钮元素，当用户点击按钮时触发事件处理函数。
4. 在事件处理函数中，我们获取当前网页的URL地址。
5. 创建一个临时 input 元素，并将URL地址设置到它的 value 属性。
6. 将临时 input 元素添加到页面中。
7. 选中 input 元素的内容。
8. 使用 document.execCommand('copy') 方法复制选中的文本到剪贴板。
9. 最后，移除临时 input 元素，并将复制成功的提示信息显示给用户。

**总结：**

通过以上代码，我们就可以实现一个简单的网页复制按钮。用户点击按钮后，网页的URL地址就会被复制到剪贴板，方便用户进行分享或保存。

**注意：**

• 以上代码仅供参考，您可以根据实际需要进行修改和扩展。
• 为了提高用户体验，建议在按钮上添加动画效果，并在复制成功后显示相应的提示信息。
• 为了避免安全问题，请确保网站的URL地址是安全的，并且不要复制敏感信息。