概要:
- 下周将会上线一个功能,表述为点击按钮复制某个dom下的内容或文本.百度后得到一个简单粗暴的解决方式:
window.clipboardData.setData ("Text", "demo"); - 但是,本人编写demo运行后发现报错:
jsonp.html:15 Uncaught TypeError: Cannot read property 'setData' of undefined - 查询相关资料,发现MSDN (https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx) 中有这么一行附注:
This object is available in script as of Microsoft Internet Explorer 5. -
http://help.dottoro.com/ljctuhrg.php 也表示该方法出于对安全性的考虑,现在只支持IE;
In Firefox, Opera, Google Chrome and Safari, use the execCommand method with the 'Paste' command to retrieve and with the 'Copy' command to set the text content of the clipboard. Because of security restrictions, this method may not always work, see Example 2 for details.
解决思路:
参考资料: http://help.dottoro.com/ljctuhrg.php
- 1.对于IE直接调用clipboardData()方法,省心省事;
- 2.创建一个"隐形"的临时dom用来存储目标参数;
- 3.对于非IE,创建一个range对象;
- 4.模拟一次选中操作;
- 5.尝试通过上面创建的dom作为"中间变量"模拟一次In操作;
- 6.尝试在FireFox下经行授权操作;
- 7.尝试通过dom再进行一次Out操作;
- 8.删除临时dom;
代码:
function CopyToClipboard (input) {
var textToClipboard = input;
var success = true;
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData ("Text", textToClipboard);
}
else {
// create a temporary element for the execCommand method
var forExecElement = CreateElementForExecCommand (textToClipboard);
/* Select the contents of the element
(the execCommand for 'copy' method works on the selection) */
SelectContent (forExecElement);
var supported = true;
// UniversalXPConnect privilege is required for clipboard access in Firefox
try {
if (window.netscape && netscape.security) {
netscape.security.PrivilegeManager.enablePrivilege ("UniversalXPConnect");
}
// Copy the selected content to the clipboard
// Works in Firefox and in Safari before version 5
success = document.execCommand ("copy", false, null);
}
catch (e) {
success = false;
}
// remove the temporary element
document.body.removeChild (forExecElement);
}
if (success) {
alert ("The text is on the clipboard, try to paste it!");
}
else {
alert ("Your browser doesn't allow clipboard access!");
}
}
function CreateElementForExecCommand (textToClipboard) {
var forExecElement = document.createElement ("div");
// place outside the visible area
forExecElement.style.position = "absolute";
forExecElement.style.left = "-10000px";
forExecElement.style.top = "-10000px";
// write the necessary text into the element and append to the document
forExecElement.textContent = textToClipboard;
document.body.appendChild (forExecElement);
// the contentEditable mode is necessary for the execCommand method in Firefox
forExecElement.contentEditable = true;
return forExecElement;
}
function SelectContent (element) {
// first create a range
var rangeToSelect = document.createRange ();
rangeToSelect.selectNodeContents (element);
// select the contents
var selection = window.getSelection ();
selection.removeAllRanges ();
selection.addRange (rangeToSelect);
}
总结:
思路新奇,长姿势了
