说起javascript的复制功能,可能很多人都只知道用document.execCommand("copy")来进行普通的文本复制,但很少人知道IE浏览器在兼容模式下还提供了一种更加强大的功能——复制任意dom节点。(IE11以上的版本都已经放弃支持该功能)
比如,我们要将一个div节点的内容复制到剪切板中,只需要使用以下代码:
var node = document.getElementById('myDiv'); var range = document.body.createTextRange(); range.moveToElementText(node); range.select(); range.execCommand("Copy");
首先获取目标节点,然后利用createTextRange()方法创建一个TextRange对象。moveToElementText()方法用来将TextRange对象的范围定位到目标节点,这样可以进行选择和操作。最后,使用execCommand()方法调用copy命令即可复制。
如果要将整个页面(或者页面片段)复制到剪切板中,也可以使用类似的方式。下面的代码将选择整个body节点,然后调用copy命令将其复制:
var range = document.body.createTextRange(); range.moveToElementText(document.body); range.select(); range.execCommand("Copy");
此外,代码中还可以通过一些方法来实现更复杂的节点操作。比如,可以使用moveStart()和moveEnd()方法来定位选中范围;使用collapse()方法将选中范围缩小到一个点;使用parentElement()方法获取选中范围所在的父节点等。
同时,需要注意的是,该功能在IE浏览器的兼容模式下才可用,因此建议不要过度依赖这个功能。特别是在现代的前端开发中,已经有更好的方法来实现节点复制功能,比如clipboard API等。
总之,javascript的复制功能在IE浏览器中有着更加强大的应用,如果你需要将一个dom节点或者整个页面复制到剪切板中,可以尝试使用TextRange对象的API来实现。