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、  document      :      ，        
//txtObj.select(); 
//document.execCommand("Copy"); //  IE  ，Firefox     ，chrome      false(   ) 

//3、  TextRange       ：          
txtObj.createTextRange().execCommand("Copy"); 
} 
} 

2.Firefox 는 인 터 페 이 스 를 통 해 이 루어 진다.화 호 는 안전 한 이유 로 17 일 후에 버 전이 인 터 페 이 스 를 닫 고 17 및 이전 버 전이 사용 할 수 있다.코드 는 다음 과 같 습 니 다.

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

3.Chrome 은 안전 하기 때문에 사용자 에 게 클립보드 에 대한 조작 을 제공 하지 않 았 습 니 다.이 를 통 해 알 수 있 듯 이 각 브 라 우 저 는 복사 기능 에 대한 지원 이 일치 하지 않 는 다.Zero Clipboard 라 이브 러 리 jhuckaby 가 쓴 Zero Clipboard 의 js 라 이브 러 리 는 Flash 를 이용 하여 내용 을 클립보드 로 복사 합 니 다.브 라 우 저 에 Flash 플러그 인 이 설치 되 어 있 으 면 콘 텐 츠 를 복사 할 수 있 으 며,ActionScript 를 통 해 JavaScript 의 부족 을 차단 하여 브 라 우 저 간 복사 호환성 문 제 를 해결 할 수 있 습 니 다.Zero Clipboard 의 실현 원리:Zero Clipboard 는 먼저 Flash 대상 라벨 을 생 성하 여 투명 한 Flash 를 복사 버튼 위 에 띄 웁 니 다.사실은 버튼 이 아니 라 Flash 를 누 르 면 필요 한 내용 을 Flash 로 전송 한 다음 Flash 를 통 해 시스템 클립보드 로 복사 합 니 다.Zero Clipboard 의 사용 방법 주의: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   
clip.setHandCursor( true ); //         
clip.setText("hello,world"); //         ，         
clip.glue("copy-botton"); //  clip      ，        id，            

4>Zero Clipboard 에서 자주 사용 하 는 방법 입 니 다.원본 코드 를 직접 보 는 것 을 권장 합 니 다:reposition():페이지 크기 가 변 할 때 Flash 단추 가 잘못 되 는 것 을 방지 합 니 다.hide():Flash 단 추 를 숨 깁 니 다 show():Flash 단 추 를 표시 합 니 다 setCSSEffects():Flash 차단 단추 스타일 의 실효 문 제 를 해결 합 니 다(hover 를.hover 로 수정 합 니 다).5>Zero Clipboard 에서 자주 사용 되 는 이벤트 입 니 다.이벤트 처리 함 수 는 addEventListener()입 니 다.load:Flash 단추 로 이벤트 mouseover 를 불 러 왔 습 니 다.마우스 로 이벤트 mouseout 을 이동 합 니 다.마우스 로 이벤트 mouseDown 을 이동 합 니 다.마우스 로 이벤트 mouseUp 을 누 르 면 마우스 로 이벤트 complete 를 풀 수 있 습 니 다.복사 성공 이벤트 jquery.zclip 라 이브 러 리 는 ZeroClipboard 가 원생 JavaScript 를 기반 으로 이 루어 지기 때 문 입 니 다.jquery.zclip 은 jQuery 를 사용 하여 Zero Clipboard 를 패키지 합 니 다.프로젝트 에 jQuery 를 사용 했다 면 jquery.zclip 의 부피 가 작 습 니 다.jquery.zclip 다운로드 주소:http://www.steamdev.com/zclip/ 제로 클립보드 다운로드 주소:https://github.com/zeroclipboard/ZeroClipboard/releases 예제 다운로드:테스트 편 의 를 위해 jquery.zclip 과 Zero Clipboard 가 쓴 예 를 csdn 에 업로드 합 니 다.예 를 들 어 웹 용기 에서 실행 해 야 합 니 다.데모 다운로드 주소