技术博客

越是喧闹,越是孤独。越是寂寞,越是丰富
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浏览器复制URL引发的研究探索

2022-09-26 Mendel
工具


最近遇到了一个情况:使用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.