複製文章內容(連結)按鈕-IE﹑Firefox﹑Chrome﹑Safari﹑Opera

發表留言 人氣: 4162°c

由於現時!大部份的"複製“按鈕只支持IE瀏覽器,使其他的瀏覽器無法複製文章內容,

例如現時流行的Firefox﹑Chrome﹑Safari﹑Opera瀏覽器,如果想修正此問題,

我們可以利用zeroclipboard實現複製連結﹑內容﹑链接等支持多瀏覽器….

首先請到 https://github.com/zeroclipboard/zeroclipboard 下載zeroclipboard文件包!

解壓縮後其他的文件及檔案不需要,只需拿取這2份檔案︰"ZeroClipboard.js" & “ZeroClipboard.swf" 即可!

並將這兩份檔案文件使用FTP軟體,上傳到網站的"根目錄"或"程序目錄"中….

複製代碼範例︰
<html>
<head>
<style type="text/css">
#d_clip_button {
text-align:center;
border:1px solid black;
background-color:#ccc;
margin:10px; padding:10px;
}
#d_clip_button.hover { background-color:#eee; }
#d_clip_button.active { background-color:#aaa; }
</style>
</head>
<body>
<script type="text/javascript" src="ZeroClipboard.js"></script>
Copy to Clipboard: <input type="text" id="clip_text" size="40" value="Copy me!"/><br/><br/>
<div id="d_clip_button">Copy To Clipboard</div>
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( '' ); // will be set later on mouseDown
clip.setHandCursor( true );
clip.setCSSEffects( true );
clip.addEventListener( 'load', function(client) {
// alert( "movie is loaded" );
} );
clip.addEventListener( 'complete', function(client, text) {
alert("Copied text to clipboard: " + text );
} );
clip.addEventListener( 'mouseOver', function(client) {
// alert("mouse over");
} );
clip.addEventListener( 'mouseOut', function(client) {
// alert("mouse out");
} );
clip.addEventListener( 'mouseDown', function(client) {
// set text to copy here
clip.setText( document.getElementById('clip_text').value );
// alert("mouse down");
} );
clip.addEventListener( 'mouseUp', function(client) {
// alert("mouse up");
} );
clip.glue( 'd_clip_button' );
</script>
</body>
</html>

如果ZeroClipboard.swf檔案文件與ZeroClipboard.js分開不同的目錄存放或不同的路徑,請修改js代碼。
找: clip.glue( ‘d_clip_button’ );
在之上加入︰ZeroClipboard.setMoviePath( ‘/flash/ZeroClipboard.swf’ );

演示網址︰ http://www.ifreesite.com/gbk-big5-gb2312-utf8.htm

標籤: