大家都知道微信公众号和小程序中都有限制访问外部链接的情况,如果项目中的外部链接是可知且少量的,可以通过微信公众平台中管理项目白名单,这里不再赘述。但当项目中有大量不确定的外部链接且又想要让用户能够访问时,就需要给用户提供方便快捷的复制链接的功能。
找了好几种方法,尝试后发现有些方法不生效,最后终于找到最完整的方法,来源找不到了,见谅~
代码整理后如下(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 browser
const 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);