单击复制文字兼容各浏览器的完美解决方案

单击复制文字的js。找了很久,由于之前没有接触过,完全不知道兼容ie及标准dom浏览器,不仅仅要通过js,而且需要flash的帮忙。clipboard.swf这个在网上都有下载.

ie允许访问剪贴板。window.clipboardData可以访问
但是标准dom。看了一些文章说的都是用flash设置隐藏。但是flash10是不支持。
但是,还有个方法是可行的,固记录一下,以下方法支持标准dom.


代码如下:

(function () {
window['Util'] = {
CACHE:{},
getText : function(){
return Util.CACHE.CLIPBOARD_TEXT;
},
successHide : function(){
alert("复制北海365网招聘邮件地址!");
},
Copy : function (pStr,hasReturn, isdo) {
var html = [];
html.push('<object type="application/x-shockwave-flash" data="clipboard.swf?gettext=Util.getText&success=Util.successHide" width="50" height="40" style="position:relative;top:11px;left:-50px;" id="ff_clipboard_swf">');
html.push('<param name="quality" value="high" />');
html.push('<param name="allowScriptAccess" value="sameDomain" />');
html.push('<param name="allowFullScreen" value="true" />');
html.push('<param name="wmode" value="transparent" />');
html.push('</object>');
var yu=document.getElementById('copy').innerHTML;
document.getElementById('copy').innerHTML=yu+html.join('');
Util.CACHE.CLIPBOARD_TEXT = pStr;
}
}
Util.Copy('zhaopin@beihai365.com ');
})();

  
如果要兼容ie。还得加上


代码如下:

if (window.clipboardData) {
window.clipboardData.setData("Text",pStr);
Util.successHide();
}

  
最后这样能实现单击复制文字,并且兼容各浏览器。记住。swf的路径一定要对!如果不对是不出现手型的,这是特征。


代码如下:

(function () {
window['Util'] = {
CACHE:{},
getText : function(){
return Util.CACHE.CLIPBOARD_TEXT;
},
successHide : function(){
alert("复制北海365网招聘邮件地址!");
},
Copy : function (pStr,hasReturn, isdo) {
var copy=document.getElementById('copy');
if (window.clipboardData) {
copy.onclick=function(){
window.clipboardData.setData("Text",pStr);
Util.successHide();
}
} else {
var html = [];
html.push('<object type="application/x-shockwave-flash" data="clipboard.swf?gettext=Util.getText&success=Util.successHide" width="50" height="40" style="position:relative;top:11px;left:-50px;" id="ff_clipboard_swf">');
html.push('<param name="quality" value="high" />');
html.push('<param name="allowScriptAccess" value="sameDomain" />');
html.push('<param name="allowFullScreen" value="true" />');
html.push('<param name="wmode" value="transparent" />');
html.push('</object>');
var yu=copy.innerHTML;
copy.innerHTML=yu+html.join('');
Util.CACHE.CLIPBOARD_TEXT = pStr;
}
}
}
Util.Copy('zhaopin@beihai365.com ');
})();

(0)

相关推荐

  • 单击复制文字兼容各浏览器的完美解决方案

    单击复制文字的js.找了很久,由于之前没有接触过,完全不知道兼容ie及标准dom浏览器,不仅仅要通过js,而且需要flash的帮忙.clipboard.swf这个在网上都有下载. ie允许访问剪贴板.window.clipboardData可以访问 但是标准dom.看了一些文章说的都是用flash设置隐藏.但是flash10是不支持. 但是,还有个方法是可行的,固记录一下,以下方法支持标准dom. 复制代码 代码如下: (function () { window['Util'] = { CACH

  • JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)

    新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下 使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master 引入插件:目录\clipboard.js-master\dist\clipboard.min.js 目录中有各种demo,分别实现了固定的文字复制,input的复制等等,可以看下找找思路: 下边来记录下使用的方式: 一:引入插件: <script src=&quo

  • JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

  • JavaScript 实现完美兼容多浏览器的复制功能代码

    分享一段利用 JavaScript 实现复制功能的代码,兼容多浏览器,兼容IE和火狐浏览器. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript 复制功能代码,兼容多浏览器&l

  • jQuery.event兼容各浏览器的event详细解析

    介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是通过jQuery方法绑定的,就不需要进行转换了! jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断. 1.event.type属性该方法作用是可以获取到时间的类型 复制代码 代码如下: $("a").cl

  • vue+iview 兼容IE11浏览器的实现方法

    最近在搞一个基于vue的后台管理系统兼容IE浏览器,眼泪都要掉下来.后来和产品说了,同意兼容IE11,感动得我眼泪啊 这里也就是记录一下我遇到的超级烦的bug 首先是'babel-polyfill' 和 "autoprefixer-loader" 这个不用多说,资源一大堆 然后 打包之后一直  const  去不掉,查了之后是 webpack 有 webpack-dev 不支持IE低版本了,要把 webpack 版本往下调,我是拒绝的 1.IE  new Date() 失败 new D

  • 兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)

    小项目龙里中学多媒体教室管理系统中后台管理用到了iframe.由于要动态载入内容,所以需要iframe自适应内容页的高度.用谷歌搜索到很多答案,其中成功的是这段代码 复制代码 代码如下: <script type="text/javascript"> function SetCwinHeight() { var iframeid = document.getElementById("maincontent1"); //iframe id if (docu

  • javascript获取设置div的高度和宽度兼容任何浏览器

    Javascript如何获取和设置div的高度和宽度,并且兼容任何浏览器?看代码: 复制代码 代码如下: <div id="div1" style="height:300px;width:200px;">http://www.itdos.com</div> <div id="div2" style="height:30px;width:20px;">http://www.itdos.com&

  • javascript 兼容各个浏览器的事件

    调用事件: 事件对象 什么是事件对象?在触发dom上的事件是都会产生一个事件对象event.例如鼠标点击的时候,自己就会产生比如点击的类型啊 还要那个元素发出的 dom 事件对象   type 属性用于获取事件对象, target属性 用于获取事件目标,stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默认行为 IE中的事件对象  type 属性 用于获取事件对象, srcElement属性 用于获取事件目标 cancelBubble属性  用于阻止事件

  • css实现兼容各个浏览器的技巧的代码

    在编写css样式表的时候常常会碰到一写浏览器兼容的问题,象是不同内核的浏览器显示就不一定相同,不同版本的的浏览器也会产生上下兼容的问题,如何解决这些问题成了我们苦恼的问题,如果你对css hack技术很了解的话,那这就是太简单不过了,不过对于那些不怎么解的人来说可真成了他们所苦恼的事.在这就从 赵磊官方博客 引来一篇文章来介绍兼容各个浏览器的技巧.但是你也不要认为只要是浏览器显示出现差错就事浏览器的问题,也很可能是你的结构不好,建议你好好去学习一下语义结构,毕竟盖房子要先搭钢筋的. 1,盒解释器

随机推荐