方法一,逐一判別處理法
方法很簡單也很容易懂,就是透過判斷客戶端瀏覽器類別,來執行不同的js程式碼來實現複製功能。雖然從理論上來說,這樣是行得通得。但是,事實並沒有我們想得那麼容易。因為我們並不太清楚一些瀏覽器下js複製程式碼的寫法,至少我所知道的也就是IE和FF。
如果只是相容IE和FF的話,那麼簡單得多了。這裡我使用一個網路上比較有名的判斷IE核的方法,13位元組法,這個也是我常用的。
if("\v"=="v") {//13个字节 //这里是IE核,执行的代码,亲测兼容IE8 }else{ //非IE核执行代码 }
這裡寫個大概的實作複製的架構
function clipBoard(object){ //获取object的值,即复制内容 var copyTxt=document.getElementById(object).value; //调用copy2Clipboar来实现浏览器,判断及执行代码 if(copy2Clipboard(copyTxt)!= false){ alert('复制成功'); } } copy2Clipboard = function(txt){ if("\v"=="v"){ //IE浏览器执行代码 window.clipboardData.clearData(); window.clipboardData.setData("Text",txt); return true; }else if(navigator.userAgent.indexOf("Firefox")>0){ //Firefox浏览器 return true; }else if(window.google && window.chrome){ //chrome浏览器 return true; }else{ alert("浏览器不支持"); return false; } }
根據需要可以自行新增不同的判斷瀏覽器程式碼,實作該瀏覽器下的複製功能。一般情況下,依照IE > FF > opera/chrome>其他,這樣的順序來判斷。
方法二,flash間接處理法
原理很簡單,透過建立一個flash,將複製的內容以變數的方式傳遞給flash,flash再將內容複製到記憶體中,這樣就實現了複製的功能。只要支援flash,按理上是可以兼容絕大部分的瀏覽器的,這個方法是我今天看到的,也測試驗證了。
安裝及使用方法,可以在上面兩個網址上找到,E文版,中文版只有透過搜尋去找咯!
這裡提供一下實作框架的簡單版,這裡有用到上面的實作方式。這裡有修改的,根據官方版說明方法,在單頁很容易就能實現該功能,但是在實際應用到某些CMS中,可能會遇到一些問題。什麼問題呢? IE核頁面會彈出 「該頁面已終止」。原因很簡單,就是js載入未完成就呼叫。竟然是IE的問題,那我們就可以使用判斷IE的方法,將IE獨立出來,其他核就使用flash方法實作。
function checkClient(object){//判断浏览器 var copyTxt=document.getElementById(object).value; //获取复制的内容 if("v"!="v"){ //这里根据官方文档设置 //这里设置flash位置,绝对相对都可以 ZeroClipboard.setMoviePath('ZeroClipboard.swf'); //创建一个复制对象 var clip = new ZeroClipboard.Client(); //设置手形 clip.setHandCursor(true); //设置复制的内容 clip.setText(copyTxt); //设置触发对象 >clip.glue('d_clip_button'); } }
這裡用來判斷是否為IE核,IE核將不使用flash處理法,直接使用複製機制
//复制处理 function clipBoard(object){ var copyTxt=document.getElementById(object).value; if(copy2Clipboard(copyTxt)!= false){ alert('复制成功'); } } copy2Clipboard = function(txt){ if("\v"=="v") { //判断是否是IE浏览器 window.clipboardData.clearData(); window.clipboardData.setData("Text",txt); return true; } else{ //非IE核直接返回 return true; }
以上為第二種方法的最簡單設定方法,將程式碼放到
之間即可不管是第一種,還是第二種方法都要在需要複製的頁面上添加下面兩行代碼<input type="text" id="textinfo" onmouseout="checkClient('textinfo')" value="复制的内容" size="65"/>
設定觸發物件按鈕
<p id="d_clip_button" onclick="copyCode('textinfo')">复制地址</p>
這是第二種方法才要新增的,設定偵測瀏覽器
<script>checkClient('textinfo');</script>
以上是javaScript複製功能的幾種呼叫方法實例匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章!