首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js 复制本文地址

在JavaScript中复制文本到剪贴板可以通过多种方式实现。以下是一个简单的方法,使用现代浏览器支持的navigator.clipboard.writeText API:

代码语言:txt
复制
function copyToClipboard(text) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text).then(function() {
      console.log('文本已成功复制到剪贴板');
    }).catch(function(err) {
      console.error('无法复制文本: ', err);
    });
  } else {
    // 兼容旧浏览器的方法
    var textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? '成功复制到剪贴板' : '无法复制';
      console.log(msg);
    } catch (err) {
      console.error('无法复制文本: ', err);
    }

    document.body.removeChild(textArea);
  }
}

// 使用方法
copyToClipboard(window.location.href); // 复制当前页面的URL

这段代码首先检查navigator.clipboard.writeText是否存在,如果存在则使用这个API来复制文本。这个API是异步的,所以使用了.then().catch()来处理成功和失败的情况。

如果浏览器不支持navigator.clipboard.writeText,代码将回退到一个兼容旧浏览器的方法。这个方法创建了一个临时的textarea元素,将要复制的文本设置为其值,然后选择这个文本并执行浏览器的复制命令。最后,临时创建的textarea元素被移除。

请注意,出于安全考虑,大多数浏览器要求复制操作必须在用户的交互事件(如点击事件)中触发,否则可能会失败。

如果你想在网页上提供一个按钮让用户复制当前页面的URL,你可以这样做:

代码语言:txt
复制
<button onclick="copyPageUrl()">复制页面地址</button>

<script>
function copyPageUrl() {
  copyToClipboard(window.location.href);
}
</script>

在这个例子中,当用户点击按钮时,copyPageUrl函数会被调用,它又会调用前面定义的copyToClipboard函数,并传入当前页面的URL(window.location.href)。这样用户就可以轻松地复制页面地址到剪贴板了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • JS深浅复制

    ❝焦虑很多时候就是因为想的太多 ❞ 简明扼要 JS在语言层面「仅支持浅复制」,深复制需要手动实现 instanceof 判断的是 a和A是否有「血缘关系」 扩展运算符在副本中「直接定义新的属性」 Object.assign...浅复制 VS 深复制 针对JS引用类型数据(复杂数据)的复制,有两种处理模式。...❝JS在语言层面「仅支持浅复制」,深复制需要手动实现 ❞ ---- 2. 浅谈浅复制 在JS中,存在几个内置属性天然支持数据浅复制,但是每个属性都有一定的适用条件和范围。...扩展运算符不能复制内置对象的特殊属性 我们在前面介绍JS数据类型的时候,介绍了在浏览器宿主环境下,JS = ECMAScript + DOM + BOM。...== copy.work // 指向不同的引用地址 使用嵌套扩展运算符实现深复制,有一个很重要的前提条件就是:模板数据简单并且你对在何处使用扩展运算符了然于心。而对于复杂数据,就不太适用了。

    4.1K20

    js中复制方法总结

    js中有深拷贝和浅拷贝两种复制形式,下面总结一下常用方法,方便平时工作复习使用 一、浅拷贝 1、json对象浅拷贝 var newObj = JSON.parse(JSON.stringify( someObj...)  如果没有第一个参数则为浅拷贝 $.extend(true, {}, obj) 5、JSON对象的方法 var obj2 = JSON.parse(JSON.stringify(obj1)) 熟悉js...的人对这两个方法肯定不陌生,利用原生JSON对象的两个可以非常方便地实现对象的深复制。...这种方法也有弊端: 只能复制能用json表示的属性,比如String、Number、Array等,对于不能用json表示的属性例如Function、Regexp等则会丢失 对象的原型链丢失 复制效率较低...但是这种方式也没有考虑Function、Regexp、Error等类型,需要更多的判断,但是核心思想也还是递归遍历对象复制,另外这种方式比JSON的深复制效率稍高。

    3.6K40

    在组复制中指定恢复IP地址

    作者:AníbalPinto 译:徐轶韬 组复制分布式恢复是关键功能之一,到目前为止,它仅限于在mysql系统变量port和host上自动定义的mysql连接点上执行。...通过group_replication_recovery_endpoints我们可以指定通过哪个接口对给定成员进行组复制恢复,以便它控制恢复流量在网络中的流向。...可以通过以下方式指定端点主机: IPV4地址 方括号内的IPV6地址 主机名 绑定到MySQL服务器实例,但也允许/包含在bind_address上。...使用group_replication_recovery_endpoints我们可以指定使用哪些网络接口来执行组复制恢复。...我们将继续改进组复制,以更好地满足所有MySQL用户的需求。如果您需要更多有关group_replication_endpoints的信息,请查阅文档。

    79920
    领券