作为我们努力发展 Web 平台并使其可供新设备访问的一部分,我们正在努力减少 Web 对 Flash 的依赖。作为该努力的一部分,我们正在标准化并公开目前仅对 Flash 可用的有用功能,使其可供整个 Web 平台使用。
许多网站仍然使用 Flash 的原因之一是其复制和剪切剪贴板 API。Flash 公开了用于在按钮按下时以编程方式将文本复制到用户剪贴板的 API。这已用于实现一些方便的功能,例如 GitHub 的“克隆 URL”按钮。它也适用于编辑器 UI 等内容,这些 UI 想要公开用于复制到剪贴板的按钮,而不是要求用户使用键盘快捷键或上下文菜单。
![]()
不幸的是,Web API 尚未提供通过 JavaScript 将文本复制到剪贴板的功能,这就是为什么在禁用 Flash 的情况下访问 GitHub 会显示一个丑陋的灰色框,而该按钮应该位于该位置。幸运的是,我们有一个解决方案。编辑器 API 提供 document.execCommand 作为执行编辑器命令的入口点。"copy" 和 cut" 命令以前已对网页禁用,但 Firefox 41(目前处于 Beta 版,计划于 9 月中旬发布)将使其在用户操作触发的回调中可供 JavaScript 使用。
使用 execCommand("cut"/"copy")
execCommand("cut"/"copy") API 仅在用户触发的回调(如单击)期间可用。如果您尝试在其他时间调用它,execCommand 将返回 false,这意味着该命令无法执行。运行 execCommand("cut") 将把当前选择复制到剪贴板,因此让我们来实现一个基本的复制到剪贴板按钮。
<pre>// 我们要附加事件的按钮
var button = ...;
// 包含我们想要复制的文本的输入
var input = ...;
button.addEventListener("click", function(event) {
event.preventDefault();
// 选择输入节点的内容
input.select();
// 复制到剪贴板
document.execCommand("copy");
});</pre>
该代码将在 Firefox 41 及更高版本中,在单击按钮时触发将输入中的文本复制到剪贴板。但是,您可能还想处理失败情况,可能回退到其他基于 Flash 的方法,例如 ZeroClipboard,甚至只是告诉用户他们的浏览器不支持该功能。
如果操作失败,例如由于在用户触发的回调之外调用,execCommand 方法将返回 false,但在旧版本的 Firefox 中,如果尝试使用 "cut" 或 "copy" API,我们也会抛出安全异常。因此,如果您想确保捕获所有失败,请确保将调用包含在 try-catch 块中,并将异常解释为失败。
<pre>// 我们要附加事件的按钮
var button = ...;
// 包含我们想要复制的文本的输入
var input = ...;
button.addEventListener("click", function(event) {
event.preventDefault();
input.select(); // 选择输入节点的内容
var succeeded;
try {
// 复制到剪贴板
succeeded = document.execCommand("copy");
} catch (e) {
succeeded = false;
}
if (succeeded) {
// 复制成功!
} else {
// 复制失败 :(
}
});</pre>
"cut" API 也通过相同的机制公开给网页,因此只需 s/copy/cut/,您就可以开始使用!
功能测试
编辑器 API 提供了一个方法 document.queryCommandSupported("copy"),旨在允许 API 使用者确定浏览器是否支持某个命令。不幸的是,在早于 41 的 Firefox 版本中,我们从 document.queryCommandSupported("copy") 返回 true,即使网页实际上无法执行复制操作。但是,尝试执行 document.execCommand("copy") 将抛出 SecurityException。因此,尝试在加载时复制并检查此异常可能是检测 Firefox 中对 document.execCommand("copy") 支持的最简单方法。
<pre>var supported = document.queryCommandSupported("copy");
if (supported) {
// 检查浏览器是否不是 41 之前的 Firefox
try {
document.execCommand("copy");
} catch (e) {
supported = false;
}
}
if (!supported) {
// 回退到其他方法,例如 ZeroClipboard
}</pre>
其他浏览器中的支持
Google Chrome 和 Internet Explorer 也都支持此 API。Chrome 使用与 Firefox 相同的限制(必须在用户触发的回调中运行)。Internet Explorer 允许在任何时候调用它,但它会首先提示用户一个对话框,询问他们是否允许访问剪贴板。
有关 API 和浏览器支持的更多信息,请参阅 MDN 文档,了解 document.execCommand().
24 条评论