课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > 复制功能调用实现方案
  • 复制功能调用实现方案

    发布:昆明Java培训      来源:达内新闻      时间:2016-04-15

  • 说到使用js实现点击复制的功能,昆明java培训下面想说的方法也是和网上的大同小异的。

    js实现是很简单,最难的是兼容问题,毕竟用IE以外的人还是有很多的。

    方法一、逐一判别处理法

    方法很简单也很容易懂,就是通过判断客户端浏览器类别,来执行不同的js代码来实现复制功能。

    虽然从理论上来说,这样是行得通得。

    但是,事实并没有我们想得那么容易。因为我们并不太清楚一些浏览器下js复制代码的写法,至少我所知道的也就是IE和FF。

    如果只是兼容IE和FF的话,那么简单得多了。

    这里长沙java培训使用一个网上比较有名的判断IE核的方法,13字节法,这个也是我常用的。

    代码如下:

    if("\v"=="v") {//13个字节

    //这里是IE核,执行的代码,亲测兼容IE8

    }else{

    //非IE核执行代码

    }

    这里长沙java培训写个大概的实现复制的构架,具体代码我不粘上来的,网上可以很简单就找到,给大家参考

    代码如下:

    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"/>

    设置触发对象按钮

    代码如下:

    <div id="d_clip_button" onclick="copyCode('textinfo')">复制地址</div>

    这是第二种方法才要添加的,设置检测浏览器

    代码如下:

    <script>checkClient('textinfo');</script>

    大概的步骤就是这样了,其中还有些id的名称可以按需要修改。至少完整代码,有更多关于学习java的问题,欢迎向昆明java培训小编提问,我们会尽快为你解决你的疑惑。

    推荐文章

上一篇:js随机数是这么产生的!

下一篇:遍历td tr等html元素

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:11/30

Java--零基础业余班

Java--零基础业余班

开班日期:11/30

Java--周末提升班

Java--周末提升班

开班日期:11/30

Java--零基础周末班

Java--零基础周末班

开班日期:11/30

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56