clipBoardEvent, execCommand等粘贴板相关研究

来源:互联网 发布:鼎金网络投教中心 编辑:程序博客网 时间:2024/03/29 22:14

起因

这几天想研究一个手机与PC互传文件的WEB,构想是通过一个页面,以最简便的方式,各自可以把粘贴板内的内容读取出来,传递给对方。折腾许久,除了读取粘贴板内容,其他的都已经实现。于是研究起来。

execCommand

想起前一段做的CHROME扩展,那时研究的不够彻底,断言无法使用粘贴板。如果那时跳入execCommand这个坑,研究明白,就不会有今天的折腾。
首先 execCommand('copy') 是可以完成复制的,只要先设置选定区域。百般尝试,execCommand('paste') 是无法使用的,经过GOOGLE了许多官方文档,此方法暂时是无法实现的,也就是说,粘贴当前粘贴板的内容,是无法使用JS代码实现的,只有使用CTRL + V右键菜单里的粘贴
具体可见CANIUSE里的PASTE事件各浏览器支持列表与W3C cliPboard Api draft

P.S. 补充一点,execCommand(‘copy’)必须由用户实际操作才能触发,比如放在函数体内,绑定在按钮上;而且通过模拟DOM点击,是无法触发复制效果的。

<input type='text' id='testInput' value="这是测试问题" onclick='copy(this)'><script>//onclick时触发的copy函数function copy(obj){obj.select(); document.execCommand("Copy");alert("已复制好");}//模拟点击var obj = document.getElementById("testInput");obj.click();</script>

clipBoardEvent

粘贴无法实现,我就又想了一种方法,自己模拟一个粘贴事件,于是从FIREFOX官网查得
var pasteEvent = new ClipboardEvent('paste');
pasteEvent.clipboardData.items.add('My string', 'text/plain');
document.dispatchEvent(pasteEvent);

只有FIREFOX支持这个事件,CHROME等都不支持,发觉自己的路越走越窄了。。。而且官网的代码,第二行也不正确,估计是文档未及时更新的缘故。
又参看了这篇FIREFOX的文章,使用下列代码

var pasteEvent = new ClipboardEvent('paste', {dataType: 'text/plain', data: 'My string' } );
document.dispatchEvent(pasteEvent);

可以模拟一个粘贴事件,使用
addEventListener('paste',function(event){
监听粘贴事件
}

可以监听到模拟的事件,但是~模拟的事件内容,是自定义的,仍然无法获取粘贴板的内容。我刚开始还天真的以为,只要模拟一个和粘贴事件PASTE一样名字的事件,就可以捕捉到粘贴板的内容,想法不错。

FIREFOX测试模拟粘贴事件

后来仔细看了文档,已经明确的写明,自定义事件是无法访问系统粘贴板的。
*A synthetic paste event must not give a script access to data on the real system clipboard. Synthetic cut and copy events must not modify data on the system clipboard.
Synthetic paste events do not have any default action. Even if such an event is dispatched in an editable context, the implementation must not insert any data.*

总结

暂时clipboard是无法使用粘贴的,文档上写的是安全考虑。但是粘贴方法execCommand(‘copy’)已经得到浏览器很好的支持了,可以脱离第三方插件(如zeroClipboard.js、clipBoard.js)。

0 0