> 웹 프론트엔드 > JS 튜토리얼 > JavaScript가 다양한 브라우저에서 복사 기능 코드를 구현하는 방법에 대한 자세한 설명

JavaScript가 다양한 브라우저에서 복사 기능 코드를 구현하는 방법에 대한 자세한 설명

伊谢尔伦
풀어 주다: 2017-07-22 15:03:53
원래의
2134명이 탐색했습니다.

각 브라우저의 복사 기능 지원을 살펴보세요:

1. IE 브라우저에는 세 가지 솔루션이 있으며, 코드는 다음과 같습니다.

function copy(txtid){ 
var txtObj = document.getElementById(txtid); 
if(window.clipboardData){ // 仅IE支持此对象,firefox、chrome不支持 
//1、通过clipboardData对象实现复制 
//window.clipboardData.clearData(); 
//window.clipboardData.setData("Text",txtObj.value); 
//2、通过document对象实现复制:先选择中文本,再执行复制命令 
//txtObj.select(); 
//document.execCommand("Copy"); // 仅IE支持,Firefox报语法错误,chrome执行结果返回false(不支持) 
//3、通过TextRange对象实现现复制:可以不用先选中内容 
txtObj.createTextRange().execCommand("Copy"); 
} 
}
로그인 후 복사

2. Firefox는 인터페이스 방식으로 구현되며, Firefox는 보안을 위한 것입니다. 그 이유는 이 인터페이스가 17 이후 버전에서는 닫혀 있고 버전 17 이하에서 사용할 수 있기 때문입니다. 코드는 다음과 같습니다:

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);
로그인 후 복사

3. Chrome은 보안상의 이유로 사용자에게 클립보드 작업을 제공하지 않습니다. 복사 기능에 대한 지원이 브라우저마다 균일하지 않음을 알 수 있습니다.
Zero Clipboard Library
jhuckaby가 작성한 Zero Clipboard js 라이브러리는 Flash를 사용하여 콘텐츠를 클립보드에 복사합니다. 브라우저에 Flash 플러그인이 탑재되어 있으면 JavaScript의 단점을 보완하고 브라우저 간 복사 호환성 문제를 해결하기 위해 ActionScript를 사용하여 콘텐츠를 복사할 수 있습니다.
제로 클립보드의 구현 원리: 제로 클립보드는 먼저 Flash 객체 태그를 생성하여 투명한 Flash가 복사 버튼 위에 떠 있도록 합니다. 실제로 클릭되는 것은 버튼이 아니라 Flash로 필요한 내용이 전송되는 것입니다. , 시스템 클립보드에 복사됩니다.
제로 클립보드 사용 방법
참고: Flash 구현을 기반으로 하기 때문에 보안상의 이유로 Flash를 웹 컨테이너(Apache, Tomcat 등)에서 실행해야 합니다. Flash를 직접 열면 로드되지 않으며 버튼도 비슷합니다. 온라인에서 Flash 설정을 마우스 오른쪽 버튼으로 클릭하고 신뢰할 수 있는 위치에 ZeroClipboard.swf를 추가해야 한다고 생각하지만 여전히 작동하지 않습니다. 로컬 브라우저.
1> Zero Clipboard 압축 패키지를 다운로드하고 압축을 풀고 ZeroClipboard.js 및 ZeroClipboard.swf라는 두 파일을 프로젝트에 넣습니다.
2> 다음과 같이 Zero Clipboard.js 파일을 소개합니다. ="text/javascript" src="ZeroClipboard.js">;
참고: ZeroClipboard.js와 ZeroClipboard.swf는 동일한 경로에 있어야 합니다. ZeroClipboard.setMoviePath()를 사용하여 설정할 수 있습니다.
3> 다음과 같이 코드를 복사하세요.

var clip = new ZeroClipboard.Client(); // 新建一个clip对象 
clip.setHandCursor( true ); // 设置鼠标为手型 
clip.setText("hello,world"); // 设置要复制的文本,可以为文本框的值 
clip.glue("copy-botton"); // 为clip注册一个按钮,参数为按钮元素的id,点击按钮就可以实现复制
로그인 후 복사

4> 일반적으로 사용되는 Zero Clipboard 방법은 소스 코드를 직접 보는 것이 좋습니다.
reposition(): 페이지 크기가 변경될 때 플래시 버튼이 잘못 배치되는 것을 방지합니다.
hide(): 플래시 버튼 숨기기
show(): 플래시 버튼 표시
setCSSEffects(): 플래시 폐색 버튼 스타일 실패 문제를 해결합니다(:hover를 .hover로 변경).
5>Zero Clipboard 공통 이벤트, 이벤트 처리 함수는 addEventListener()입니다.
load: 플래시 버튼 로딩 이벤트
mouseOver: 마우스 위로 이동 이벤트
mouseOut: 마우스 밖으로 이동 이벤트
mouseDown: 마우스 다운 이벤트
mouseUp: 마우스 해제 이벤트
완료: 성공적인 이벤트 복사

위 내용은 JavaScript가 다양한 브라우저에서 복사 기능 코드를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿