方法一,逐一判别处理法
方法很简单也很容易懂,就是通过判断客户端浏览器类别,来执行不同的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>
Atas ialah kandungan terperinci javaScript复制功能的几种调用方法实例汇总. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!