首页 web前端 js教程 用js将内容复制到剪贴板兼容浏览器_javascript技巧

用js将内容复制到剪贴板兼容浏览器_javascript技巧

May 16, 2016 pm 04:55 PM
剪贴板 复制

若想通过js将内容复制到剪贴板,本来不难,可是若考虑到浏览器的兼容性问题,就变的有点麻烦,使用jquery-zclip复制是一个不错的选择,借助flash实现浏览器的兼容。原理就不细讲了,下面说下如何实现。

比如我的html代码如下:

复制代码 代码如下:


<span id="id_1">要复制的内容1</span>
<span id="id_2">要复制的内容2</span>
<span id="id_3">要复制的内容3</span>


js文件总共需要两个,jquery就不用说了,再就是jquery-zclip.js和ZeroClipboard.swf,这两个文件可以在官方网站上下载,地址如下:http://www.steamdev.com/zclip/

生成复制按钮的js如下
复制代码 代码如下:



这样就能时间跨浏览器的复制了,本来不是很难的事情,我做测试的时候也挺顺利的,可以当我把他放到项目中就出问题了,复制按钮产生位置没有flash,只有文字,后来发现,其实flash生成了,但是没有在文字所在的位置,估计和我项目后台使用的是iframe结构有关系,估计这是这个插件的一个bug吧,后来查了很多资料,有的人说,需要改下代码就可以了,后来我改了,下,果然就可以了

需要修改的代码如下
复制代码 代码如下:

getDOMObjectPosition: function (obj, stopObj) {
// get absolute coordinates for dom element
var info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};

if (obj && (obj != stopObj)) {
//info.left += obj.offsetLeft; //修改前
//info.top += obj.offsetTop; //修改前
jpos = $(obj).position(); //修改后
info.left += jpos.left; //修改后
info.top += jpos.top; //修改后
}

return info;
}

其实这和这个插件的原理有关系,他就将一个透明的flash覆盖到按钮的上面,若他们两个不重合,就出现了上面的问题。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在Mac上查看剪贴板历史记录 如何在Mac上查看剪贴板历史记录 Sep 14, 2023 pm 12:09 PM

从“访达”查看macOS剪贴板历史记录当您在Mac上复制任何内容(文本,图像,文件,URL等)时,它会进入“剪贴板”。以下是查看Mac上上次复制的内容的方法。转到Finder,然后单击菜单栏中的“编辑”点击“显示剪贴板”这将打开一个窗口,显示macOS剪贴板的内容。在Mac中获取包含多个项目的剪贴板历史记录当然,本机Mac剪贴板历史记录并不是您可以拥有的最通用的工具。它只显示您复制的最后内容,因此,如果您希望一次复制多个内容,然后将它们全部粘贴在一起,那么您根本无法做到这一点。但是,如果您正在寻

怎样解决 Windows + Shift + S 无法正常使用的问题? 怎样解决 Windows + Shift + S 无法正常使用的问题? May 08, 2023 pm 07:16 PM

检查你的键盘如果键盘快捷键不起作用,则键盘本身可能存在问题。确保它已正确插入并被您的PC识别。有笔记本电脑键盘给您带来麻烦吗?如果您有一个额外的键盘,请将其插入并查看它是否有效。如果是这样,那可能是键盘本身的问题。使用无线键盘?按照制造商的说明重新配对。您还应该检查任何电缆是否损坏,确保按键没有碎屑,然后适当按下。有关更多信息,请查看Windows11键盘损坏的这些修复程序。使用打印屏幕键如果您迫切需要屏幕截图并且没有时间进行故障排除,您可以先使用解决方法。要获得桌面的完整照片,请点击

iPhone上的剪贴板:如何访问它? iPhone上的剪贴板:如何访问它? May 16, 2023 am 10:46 AM

iPhone上的剪贴板在哪里?由于iOS是一个封闭的生态系统,剪贴板是存储在虚拟内存中的内部功能。默认情况下,用户无法查看剪贴板内容或以任何方式对其进行编辑。但是,有一些方法可以在iPhone上访问剪贴板。您可以将剪贴板粘贴到Notes应用程序(或任何其他文本编辑器)中,并在其中保留剪贴板的多个副本,并根据需要对其进行编辑。或者,您可以使用“快捷指令”App创建用于显示剪贴板的快捷方式。最后,您可以使用第三方应用程序,例如粘贴。如何在iPhone上访问剪贴板?无论您喜欢使用内置的“备忘录”应用、

如何解决 Windows 11 复制粘贴功能无响应的问题? 如何解决 Windows 11 复制粘贴功能无响应的问题? Apr 26, 2023 pm 08:55 PM

复制一直是保存和共享文件的好方法。它允许您创建手动备份、执行简单的传输,甚至是如果不复制可能会损坏原始文件的修改。但是,如果您在尝试使用WindowsPC上的剪贴板时遇到问题,这有时会很困难。一些Windows11用户最近无法在他们的系统上使用复制粘贴。由于多种原因,可能会出现此问题,如果您在同一条船上,那么您可以在PC上修复它。如何修复Windows11上的复制粘贴由于许多问题可能导致Windows上的复制粘贴出现故障,我们在下面列出了解决此问题的最常见解决方案。我们建议您从第一

qq音乐歌词怎么复制 歌词复制的方法 qq音乐歌词怎么复制 歌词复制的方法 Mar 12, 2024 pm 08:22 PM

  我们用户们在使用这款平台的时候应该都能够了解到上面对于一些功能的多样性,我们知道一些歌曲的歌词都写的非常的不错。有时候甚至都会多听几遍,觉得其中的含义都是非常深刻的,所以我们想要去了解其中的胜意,就想要直接的复制下来当文案来使用,不过对于要使用的话,还是要学会如何去复制歌词才可以,这些操作方面我相信大家们应该都并不模式,但是在手机上面操作确实是有点难度,所以为了能够让大家们更好的了解的话,今日小编就来为你们好好的讲解上面的一些操作体验,如果你们也喜欢的话,就和小编一起来看看吧,不要错过了。 

如何在 Windows 11 上使用剪贴板历史记录 如何在 Windows 11 上使用剪贴板历史记录 Apr 19, 2023 pm 12:13 PM

在Windows11上使用剪贴板历史记录您仍然可以使用右键单击>复制并右键单击>粘贴或使用Ctrl+C

截图和截图在 Windows 11/10 上的位置 截图和截图在 Windows 11/10 上的位置 May 16, 2023 pm 04:01 PM

Windows11中的剪辑和屏幕截图在哪里?这是我们从一些可能刚安装新操作系统或第一次使用截图工具的读者那里得到的问题。该工具旨在截取计算机屏幕的任何或所有部分。为了将事情放在上下文中,PrintScreen键将拍摄您的屏幕的完整快照,但SnippingTool可调整为仅抓取您喜欢的区域。Windows10/11上的截图和屏幕截图在哪里?默认情况下,剪辑和屏幕截图保存到计算机的剪贴板。这意味着要检索它们,您只需将它们粘贴到您想要的应用程序中,例如MicrosoftPaint、Photo

复制的快捷键是什么 复制的快捷键是什么 Mar 10, 2023 pm 02:00 PM

复制的快捷键是“Ctrl+c”,与之相对应的粘贴键是“Ctrl+v”;在电脑中,使用鼠标拖拽选中文字,按住Ctrl,再点C键,即可完成复制;快捷键就是指通过某些特定的按键、按键顺序或按键组合来完成一个操作。

See all articles