JavaScript是一门广泛运用于Web前端页面上的编程语言,广为人知的是JavaScript在处理前端动态性方面拥有众多优秀的功能。但是,还有一个问题始终困扰着开发者,那就是JavaScript无法直接复制内容至剪切板。
虽然网页的复制功能已经相当普及,但是从Web页面上复制固定的文本到剪切板却不是一件很容易的事情,因为JS中并没有提供复制到剪切板的方式。我们可以尝试写一个简单的函数:
function copyToClipboard(text) { var input = document.createElement('input'); input.style.position = 'fixed'; input.style.opacity = 0; input.value = text; document.body.appendChild(input); input.select(); document.execCommand('copy'); document.body.removeChild(input); }
但是,很明显这个函数并不能完全实现复制到剪切板的功能, 因为它只是将内容写到一个输入框里,点击“复制”按钮,浏览器将选中这个输入框中的文本,既然用户能够点击“复制”按钮,为什么不直接手工复制呢?
实际上,这就是JS无法复制的最根本原因,因为浏览器的安全策略的限制,JS无法直接操作剪切板的内容。浏览器的安全限制是很严格的,它不允许JS访问任何非JS源的元素和属性,而剪切板属于系统级功能,属于非JS源。
解决这个问题较为麻烦,你需要借助浏览器的Flash插件或者Silverlight控件进行复制。Flash、Silverlight等插件可以通过浏览器提供的相应方法调用操作系统底层API,实现对剪切板的操作。这种方式虽然能够解决粘贴板无法复制的问题,但是由于平台差异性很大而导致的可用性和兼容性问题也十分麻烦。
在jQuery等框架出现前,为了解决这个问题,开发者们不得不另外单独编写Flash或者Silverlight插件,而这对于绝大多数前端开发者来说,显然十分麻烦。而框架的出现,可以一定程度上解决这个问题,例如若要用jQuery实现复制功能,可以使用Clipboard.js这个插件,非常方便。
综上所述,JavaScript无法复制文本的问题并非JS的功能缺陷,而是浏览器的安全限制强制导致的结果。尽管有了很多解决方案,但仍然是个十分麻烦的问题。