1. 程式人生 > >跨瀏覽器的“複製到剪貼簿”

跨瀏覽器的“複製到剪貼簿”

提醒:本文最後更新於 3806 天前,文中所描述的資訊可能已發生改變,請謹慎使用。

眾所周知,firefox的安全性比較高,但是安全帶來的弊端就是很多功能不支援。比如說在IE下可以通過指令碼來設當前網頁為首頁,firefox卻不行。今天要討論的是另外一個問題:怎麼在firefox等不支援window.clipboardData的瀏覽器下實現複製呢?

首先,我們來看網易郵箱是怎麼解決這個問題的。我們在firefox下進到寫郵件頁面,點選編輯器上的全部功能,然後點選左邊的“複製”按鈕,“您的瀏覽器安全設定不允許編輯器自動執行拷貝操作,請使用鍵盤快捷鍵(Ctrl C)來完成”,網易郵箱給了我們這麼一個提示。我覺得這個解決方案可以得80分,因為它告訴了我們兩個資訊:其一,之所以複製操作沒有完成是因為我的瀏覽器很安全,為了安全損失一點使用者體驗一般使用者是可以接受的;其二,它還提示了我們可以通過鍵盤快捷鍵ctrl c來完成操作,這對剛上網的新手來說很人性化。但是,有沒有更好的解決方案呢?

網上大致有兩種解決方案,一種是需要修改firefox配置,其實firefox也是支援複製的,但是需要到about:config裡去手動開啟,這裡不做介紹了;另外一種解決方案是本文要用到的flash。因為flash可以方便的把文字拷貝到系統剪下板中,所以我們利用flash來做跳板,只需要一行程式碼就能搞定:

System.setClipboard(clipboard);

這句程式碼的含義後面還會提到。有了這個swf的跳板,剩下的工作就簡單了,如果瀏覽器不支援window.clipboardData,就在複製的時候把內容傳給這個flash,就OK了,關鍵程式碼如下:

if (window.clipboardData){
    window
.clipboardData.setData("Text",str); }else{ var flashId = '_clipboard_'; var flashContent = '<embed src="clipboard.swf" FlashVars="clipboard=' str.replace(/\ /g,"+") '" width="0" height="0" type="application/x-shockwave-flash"></embed>'; if(!document.getElementById(flashId)){ var
flash = document.createElement("div"); flash.id = flashId; flash.innerHTML = flashContent; document.body.appendChild(flash); }else{ document.getElementById(flashId).innerHTML = flashContent; } }

測試地址

adobe的文件中對setClipboard有如下解釋:

NOTE Because of security concerns, it is not possible to read the contents of the system Clipboard. In other words, there is no corresponding System.getClipboard() method.

由此可見,我們只能利用flash把文字複製到系統剪貼簿中,而不能把系統剪下板中的內容拷貝出來。

--EOF--

提醒:本文最後更新於 3806 天前,文中所描述的資訊可能已發生改變,請謹慎使用。

相關推薦

使用ZeroClipboard解決瀏覽器複製剪貼簿的問題

Zero Clipboard的實現原理 Zero Clipboard 利用透明的Flash讓其漂浮在複製按鈕之上,這樣其實點選的不是按鈕而是 Flash ,這樣將需要的內容傳入Flash,再通過Flash的複製功能把傳入的內容複製到剪貼簿。 Zero Clipboard的安

Mac Alfred快速複製剪貼簿和指定文字

這裡主要考慮如下兩種需求 快速喚出剪貼簿歷史,並複製某一項 快速複製某一段固定內容的文字 第一項在Mac上有很多小工具實現,第二項在輸入密碼時經常會碰到,比如我在終端sudo執行命令或者連線redis資料庫時需要輸入密碼,這些密碼我又不想人肉記住,希望每

Android Clipboard(複製/剪貼簿)

Android提供的剪貼簿框架,複製和貼上不同型別的資料。資料可以是文字,影象,二進位制流資料或其它複雜的資料型別。 Android提供ClipboardManager、ClipData.Item和ClipData庫使用複製和貼上的框架。為了使用剪貼簿的框架,需要把資料轉化為剪輯物件,然後把該物件為全系統剪

ZeroClipboard2瀏覽器複製貼上

摘要:我們平時常用到的複製貼上功能,在瀏覽器端,要想使用一個按鈕來實現,使用原生js程式碼來實現,是困難的,幸好ZeroClipboard的出現,解決了這一尷尬的問題。 ZeroClipboard2簡介 在前端頁面設計時,按鈕常常伴隨著資料的提交或重置出

Android App實現點選撥號、複製剪貼簿、新增手機聯絡人

1.概述 今天介紹一下實現Android App內實現點選撥號、複製剪貼簿、新增手機聯絡人等相關操作 2.實現效果 沒有gif圖 3.實現步驟 直接上程式碼: private void initService() { String[] info = n

選擇複製剪貼簿裡面的內容——小工具

在使用電腦的時候我麼經常會多次複製很多東西,每次按Ctrl+C複製出來的東西是眾多複製內容中最近複製的一條內容,經常這條內容並不是我們真正需要的,而是之前複製的某條內容。此時最希望有一個不佔太多記憶體

zeroclipboard實現瀏覽器複製功能

所需檔案 1. ZeroClipboard.js 2. ZeroClipboard.swf 使用 1. 設定好ZeroClipboard.swf的位置,可在ZeroClipboard.js中修改,也可呼叫ZeroClipboard.setMoviePath方法 2. var clip = new Zero

ZeroClipboard2.2.0版本瀏覽器複製(兼解決IE下相容問題)

複製到剪貼簿的JS實現--ZeroClipboard (兼解決IE下相容問題)   相信絕大多數人都遇到過這樣的功能實現,“複製”或者“複製到剪貼簿”這樣的功能。但是由於各大瀏覽器的實現方案不一樣,導致幾乎沒有統一的實現這樣功能的方案。而被各大程式猿喜歡的jQuery也

瀏覽器的“複製剪貼簿”.續

提醒:本文最後更新於 3425 天前,文中所描述的資訊可能已發生改變,請謹慎使用。 很早之前,寫過一篇“跨瀏覽器“複製到剪貼簿”的解決方案”,當時給出的解決方案是,IE使用window.clipboardData,firefox等其它瀏覽器使用flash來呼叫System.setClipboard方

瀏覽器的“複製剪貼簿

提醒:本文最後更新於 3806 天前,文中所描述的資訊可能已發生改變,請謹慎使用。 眾所周知,firefox的安全性比較高,但是安全帶來的弊端就是很多功能不支援。比如說在IE下可以通過指令碼來設當前網頁為首頁,firefox卻不行。今天要討論的是另外一個問題:怎麼在firefox等不支援window

**萬能的“一鍵複製剪貼簿”,支援IE、火狐、谷歌及移動版瀏覽器**

說到點選按鈕“複製到剪貼簿",大家都可能用過,但是之前的實現方不是隻支援某些瀏覽器,就是要在網頁內嵌swf(Flash)檔案。 這兩種方法:第一種不能很好的相容多數瀏覽器,第二種方式下開發人員可能會擔心Flash的安全性問題。 現在出現了一種新的實現方式:clipboard

jQuery+layer+clipboard實現複製剪貼簿的功能,相容各大主流瀏覽器

最近在研發微信公眾平臺的後臺管理,上傳永久素材時會用到複製到剪貼簿的功能,想著提升使用者體驗,也方便自己後臺的操作。於是在網上找了發現有個外掛可以實現,有些網友也分享了示例,但還是不能滿足我的需求,便琢磨了如何結合 jQuery+layer+clipboard,利用layer

JS複製內容到剪貼簿(相容FF/Chrome/Safari所有瀏覽器)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

js實現複製剪貼簿功能,相容所有瀏覽器

前段時間做專案的時候,有點選按鈕複製文字的需求,想使用操作windows剪下板實現,在網上查了些資料,發現目前好像只有IE支援直接訪問剪下板,實現需求的時候也只做了IE中的點選複製功能,其餘瀏覽器: if(window.clipboardData){ window.clip

瀏覽器實現複製內容到剪貼簿 -- clipboard.js

因為產品涉及到分銷以及分銷統計之類的  需要根據分銷者角色產生便於識別和統計的分銷連結。因此後臺管理系統在支援顯式手動複製時也做了複製功能按鈕,便於使用者直接點選複製 1、引入clipboard.j

【js複製內容到剪貼簿(相容任何瀏覽器)】+【 tooltip() :前端同學 自定義 好看的提示框】+【confirmDel()自定義刪除提示框(head.jsp裡)】

====》【js複製內容到剪貼簿(相容任何瀏覽器)】====test.jsp<%-- Created by IntelliJ IDEA. User: szh Date: 2017/11/13 Time: 10:41 To change this te

sublimetext寫外掛實現複製當前檔案的檔名到剪貼簿和列出所有的檔名

在sublimetext的tools中new plugin import sublime, sublime_plugin, os class FilenametoclipboardCommand(sublime_plugin.TextCommand): def run(self, e

【編輯器】Unity複製和貼上字元到剪貼簿

功能 相當於右鍵的複製和貼上功能 效果 程式碼 //複製方法1 可以不在編輯器的情況下使用 public void CopyFunction1(string value) { TextEditor text = new TextEd

JavaScript 實現複製剪貼簿

可編輯區域選中(input,textarea) 方法一 選中時,選中區域會有選中樣式 <p>點選複製後在右邊textarea CTRL+V看一下</p> <input type="text" id="inputTex

使用JavaScript讀取所選文字並將其複製剪貼簿

詢問大多數開發人員如何將使用者選擇的內容複製到剪貼簿,他們會提到Flash的需求(因此 Zeroclipboard等指令碼的流行 )。然而,這種想法的調整現在歸功於最近瀏覽器對JavaScript中關鍵技術的支援的改進,這使得複製到剪貼板本身成為可能。這種JavaScript方法在IE9 +,Firefox