JavaScript 복사 function_javascript 기술에 대한 브라우저 지원에 대한 실제 테스트

이틀간 웹 프론트엔드 작업을 하던 중, js를 통해 텍스트 복사를 구현해야 할 필요성을 느꼈습니다.
브라우저의 호환성을 무시하고 각 브라우저의 복사 기능 지원을 살펴보세요.

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. 문서 개체를 통해 복사합니다. 먼저 중국어 텍스트를 선택한 다음 copy command
//txtObj .select();
//document.execCommand("Copy"); // IE에서만 지원되며 Firefox는 구문 오류를 보고하고 chrome 실행 결과는 지원되지 않습니다. )

//3. Pass TextRange 객체는 즉시 복사를 실현합니다. 먼저 콘텐츠를 선택할 필요가 없습니다.
txtObj.createTextRange().execCommand("Copy")
}


2. Firefox 인터페이스 메소드 구현을 통해 보안상의 이유로 Firefox는 버전 17 이후 버전에서 이 인터페이스를 닫습니다. 버전 17 이하에서 사용할 수 있습니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

varclip = Components.classes['@ mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);

3. Chrome은 보안상의 이유로 사용자에게 클립보드 작업을 제공하지 않습니다. 복사 기능에 대한 지원이 브라우저마다 동일하지 않다는 것을 알 수 있습니다.

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

코드를 복사하세요. 코드는 다음과 같습니다.

var clip = new ZeroClipboard.Client(); // 새 클립 객체 생성

clip.setHandCursor( true ) // 마우스를 손 유형으로 설정
clip.setText("hello,world "); // 복사하도록 설정 텍스트는 텍스트 상자의 값일 수 있습니다.
clip.glue("copy-botton"); // 클립용 버튼을 등록합니다. 매개변수는 버튼 요소의 ID입니다. 복사하려면 버튼을 클릭하세요


4> Zero Clipboard 일반적인 방법, 소스 코드를 직접 보는 것이 좋습니다:
reposition(): 페이지 크기 변경 시 플래시 버튼이 어긋나지 않도록 방지
hide(): 플래시 버튼 숨기기
show (): 플래시 버튼 표시
setCSSEffects(): 잘못된 플래시 쉴드 버튼 스타일 문제를 해결합니다(:hover를 .hover로 변경).
5>제로 클립보드 공통 이벤트, 이벤트 처리 함수는 addEventListener()입니다.
load: 플래시 버튼 로딩 이벤트
mouseOver: 마우스 위로 이동 이벤트
mouseOut: 마우스 밖으로 이동 이벤트
mouseDown : 마우스 다운 이벤트
mouseUp: 마우스 놓기 이벤트
complete: 복사 성공 이벤트

jquery.zclip 라이브러리
ZeroClipboard는 기본 JavaScript 구현을 기반으로 하므로 jquery.zclip은 jQuery를 사용하여 Zero를 구현합니다. 클립보드 캡슐화를 위해 프로젝트에서 이미 jQuery를 사용하고 있다면 사용을 권장하며, jquery.zclip의 크기는 더 작습니다.
jquery.zclip 다운로드 주소: http://www.steamdev.com/zclip/
Zero Clipboard 다운로드 주소: https://github.com/zeroclipboard/ZeroClipboard/releases
샘플 다운로드:
테스트를 용이하게 하기 위해 jquery.zclip과 Zero Clipboard로 작성된 예제를 csdn에 업로드했습니다. 예제는 웹 컨테이너에서 실행되어야 합니다.
데모 다운로드 주소