越是喧闹,越是孤独。越是寂寞,越是丰富
The more noisy, the more lonely. The more lonely, the more rich
越是喧闹,越是孤独。越是寂寞,越是丰富
The more noisy, the more lonely. The more lonely, the more rich
最近遇到了一个情况:使用Edge浏览器上网,发现某个网址不错,于是从地址栏复制,粘贴到WPS中,不料粘贴的是一个超链接,而不是网址本身,需要选择“只粘贴文本”才能将URL本身放进来。如下图所示:
复制网址:
粘贴效果:
接着我试了一下Chrome,发现正常,只粘贴了URL文本。于是引发了我的思考,会不会是Edge在复制网址的时候做了一些额外的处理方式?
01
—
Edge的复制粘贴设置
尝试从浏览器设置中去寻找是否有相关选项,果然有收获,在“共享、复制和粘贴”这一设置项中,就有关于URL复制的方式:
之前默认选中的就是“链接”这一项,难怪粘贴到某些app里显示的是链接的形式。切换成“纯文本”模式后就正常了。
点击“了解更多信息”,即可查看Microsoft官网对Edge浏览器复制粘贴URL的优化,讲解的很详细:
(https://support.microsoft.com/en-us/microsoft-edge/improved-copy-and-paste-of-urls-in-microsoft-edge-d3bd3956-603a-0033-1fbc-9588a30645b4)
02
—
剪贴板研究
虽然Edge复制URL的时候选择了链接的形式,但是粘贴在不同的app中结果还不太一样。例如粘贴在微信聊天输入框、记事本中是文本形式,而粘贴在WPS、公众号图文消息编辑区,就是链接形式。所以我想了解到底在剪贴板中的原始内容是什么,于是计划通过JS的剪贴板API去一探究竟。
JS操作剪贴板有多种形式,目前最modern的方式是使用 navigator.clipboard API,它有read()和readText()两种方法可读取剪贴板。其中readText()就是直接读取文本,不论是否带有格式。而read()就是读取原始内容,需要做一些处理来打印输出其内容。
<button type="button" onclick="getClipBoard()">获取剪贴板内容</button>
async function getClipBoard() {
const items = await navigator.clipboard.read();
const textBlob = await items[0].getType("text/html");
const text = await (new Response(textBlob)).text();
console.log(text)
}
在getType中写成text/html的方式,即可获取到剪贴板中的超链接内容:
这样就验证了Edge复制URL的主要机制了。
03
—
注意事项
关于navigator.clipboard 操作剪贴板,有两个注意事项:
1、必须由用户手动操作触发,不能将代码直接在console中执行,不然会报错
Uncaught (in promise) DOMException: Document is not focused.
2、需要在安全的网络环境中才能使用,包括 localhost 和 https 协议的站点。如果用IP地址或http协议访问的页面,是无法访问到剪贴板对象的,此时 navigator.clipboard 为 undefined.