【JS篇】通过点击或其他操作进行复制（链接，文字等）

大家都知道微信公众号和小程序中都有限制访问外部链接的情况，如果项目中的外部链接是可知且少量的，可以通过微信公众平台中管理项目白名单，这里不再赘述。但当项目中有大量不确定的外部链接且又想要让用户能够访问时，就需要给用户提供方便快捷的复制链接的功能。

找了好几种方法，尝试后发现有些方法不生效，最后终于找到最完整的方法，来源找不到了，见谅~
代码整理后如下(Toast提示是用了antd mobile的组件)：

const onCopyURL = (url, name) => {if (window.clipboardData) {window.clipboardData.clearData();window.clipboardData.setData('text', url);Toast.show({content: `【${name}】链接已复制，请用浏览器打开查看`,duration: 5000});} else if (document.execCommand) { // for modern browserconst element = document.createElement('span');element.textContent = url;document.body.appendChild(element);if (document.selection) {const range = document.body.createTextRange();range.moveToElementText(element);range.select();} else if (window.getSelection) {const range = document.createRange();range.selectNode(element);window.getSelection().removeAllRanges();window.getSelection().addRange(range);}document.execCommand('copy');element.remove ? element.remove() : element.removeNode(true);Toast.show({content: `【${name}】链接已复制，请用浏览器打开查看`,duration: 5000});}}

其中的execCommand方法常用功能大致列一下，感觉还是挺好用的，转载自这里：

【全选】将选种网页中的全部内容：document.execCommand(“selectAll”)
【打开】相当于单击文件中的打开按钮：document.execCommand(“open”)
【另存为】将该网页保存到本地盘的其它目录：document.execCommand(“saveAs”)
【打印】前提是装了打印机：document.execCommand(“print”)
【剪贴】剪贴选中的文字到剪贴板：document.execCommand(“Cut”,“false”,null);
【删除选中】删除选中的文字：document.execCommand(“Delete”,“false”,null);
【复制】复制选中的文字到剪贴板：document.execCommand(“Copy”,“false”,null);

【JS篇】通过点击或其他操作进行复制（链接，文字等）相关推荐

禁止微信H5页面点击右上角菜单时出现复制链接，但支持转发给好友和分享到朋友圈...
可以使用 JavaScript 来禁止点击右上角菜单时出现复制链接的功能.可以在页面的 JavaScript 代码中添加如下代码: document.addEventListener('context ...
Js篇-面试题9-请说一下Js中的事件循环机制
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
JS 实战: Drag 点击拖曳效果
JS 实战: Drag 点击拖曳效果文章目录 JS 实战: Drag 点击拖曳效果简介参考正文项目结构 & 静态模版添加元素添加 position 主要逻辑片段事件响应结构移 ...
2020年最新最全的前端面试题整理----原生JS篇
前言原生JS篇 JS是一种什么样的语言? 解释性脚本语言,代码不进行预编译主要用来向HTML页面添加交互行为可以直接嵌入HTML页面,但单独写成JS文件有利于结构和行为的分离跨平台性,在绝大多 ...
ie浏览器查看vue中js_浅析 Vue.js 中那些空间换时间的操作
Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...
php 跳转邮箱,实例详解JS简单实现点击跳转登陆邮箱功能的方法
本文主要介绍了JS简单实现点击跳转登陆邮箱功能的方法,涉及js针对hash表的遍历与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下,希望能帮助到大家前言注册的过程中往往需要填写邮箱,并登陆 ...
H5打造属于自己的视频播放器（JS篇1）
回顾 1)H5打造属于自己的视频播放器(HTML篇) 2)H5打造属于自己的视频播放器(逻辑篇) 前言在HTML篇当中我们写好了样式,今天我们为video新增一个样式 .bad-video vide ...
html显示隐藏内容点击显示数据表代码,js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格一.总结一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...
html简单留言板教程,JS实现简易留言板（节点操作）
本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下今天的案例主要是对节点进行操作创建节点.添加节点.删除节点以及为节点添加内容的操作. 就是一个简单的留言板功能,可以发布留 ...

【JS篇】通过点击或其他操作进行复制（链接，文字等）

【JS篇】通过点击或其他操作进行复制（链接，文字等）相关推荐

最新文章

热门文章