Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能

本文链接：https://blog.youkuaiyun.com/FOR_CHINA2012/article/details/11261619

本文介绍了Zero Clipboard库，它利用Flash实现了一个跨浏览器的复制功能，解决了在非IE浏览器中复制到剪贴板的难题。Zero Clipboard通过一个透明的Flash元素覆盖在复制按钮上，实现灵活的剪贴板交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发中经常会用到复制的功能，在 IE 下实现比较简单，但要想做到跨浏览器比较困难了。

本文将介绍一个跨浏览器的库类 Zero Clipboard ，它利用 Flash 进行复制，所以只要浏览器装有 Flash 就可以运行，而且比 IE 的 document.execCommand("Copy") 更加灵活。

Zero Clipboard 的实现原理

Zero Clipboard 利用 Flash 进行复制，之前有 Clipboard Copy 解决方案，其利用的是一个隐藏的 Flash，但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板，所以 Zero Clipboard 对此进行了改进，用了一个透明的 Flash ，让其漂浮在按钮之上，这样其实点击的不是按钮而是 Flash ，也就可以使用 Flash 的复制功能了。

<html>
<head>
	<title>Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		body {
			background: url("images/grid.gif") repeat;
		}
		.clip_container {
			width: 500px;
			height: 198px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin:-210px 0 0 -250px;
			border: 2px solid #FF8000;
			background: #FFFFFF;
		}
		
		.clip_title {
			height: 35px;
			font-family: arial,sans-serif;
			font-size: 21px;
			color: #FFFFFF;
			line-height: 35px;
			background: #FF9B08;
		}
		
		.clip_button {
			width: 50px;
			height: 18px;
			padding: 3px;
			margin: 5px 0px 5px 5px;
			font-size: 14px;
			font-weight: