方法一,逐一判别处理法
方法很简单也很容易懂,就是通过判断客户端浏览器类别,来执行不同的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;
}
以上为第二种方法的最简单设置方法,将代码放到<head></head>之间即可不管是第一种,还是第二种方法都要在需要复制的页面上添加下面两行代码
设置复制内容的文本域
<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复制功能的几种调用方法实例汇总的详细内容。