자바스크립트 복사함수 호출 구현 솔루션_기본지식

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

인증코드:



요즘 걱정거리가 많아져서 블로그 포스팅을 쓸 기분이 아니었어요.
안녕하세요! 나는 이 기사로 돌아갔다. js를 사용하여 클릭 복사 기능을 구현할 때, 제가 아래에서 이야기하고 싶은 방법은 인터넷에서 찾은 방법과 비슷합니다. Node.js 구현은 매우 간단합니다. 가장 어려운 점은 결국 IE 이외의 것을 사용하는 사람들이 많다는 것입니다. 여기에서는 인터넷의 관련 자료를 기반으로 방법을 요약합니다.

방법 1, 하나씩 식별 및 처리 방법

방법은 매우 간단하고 이해하기 쉽습니다. 다양한 js 코드를 실행하여 복사 기능을 구현하는 것입니다. 클라이언트 브라우저 유형. 이론적으로는 이것이 작동합니다. 그러나 우리가 생각하는 것만큼 쉽지는 않습니다. 우리는 일부 브라우저에서 js 복사 코드를 작성하는 방법에 대해 잘 모르기 때문에 적어도 내가 아는 것은 IE와 FF입니다.
IE, FF만 호환된다면 훨씬 간단할 것 같아요. 여기서는 IE 코어를 결정하기 위해 인터넷에서 비교적 잘 알려진 방법인 13바이트 방법을 사용하는데, 이 방법도 자주 사용합니다.



코드 복사

코드는 다음과 같습니다. if("v"=="v ") { //13바이트//여기에 IE 코어, 실행 코드가 있으며 IE8과 호환되는 것으로 개인적으로 테스트되었습니다.

}else{

//IE가 아닌 코어 실행 코드
}


여기에서는 복제를 구현하기 위한 대략적인 구조를 작성합니다. 구체적인 코드는 붙여넣지 않겠습니다. 참고로

코드 복사

코드는 다음과 같습니다. functionclipBoard(object){ //객체의 값을 가져옵니다. 즉, 복사합니다. 콘텐츠var copyTxt=document.getElementById(object ; 🎜>}

copy2Clipboard = function(txt){

if("v"=="v"){
//IE 브라우저 실행 code
window.clipboardData.clearData();
window.clipboardData.setData("Text",txt);
return true
}else if(navigator.userAgent.indexOf("Firefox" )>0){
//Firefox 브라우징
return true
}else if(window.google && window.chrome){
//chrome 브라우저
return true; >}else{
alert("Browse the browser does not support ");
return false
}
}


다음과 같이 다른 판단 브라우저 코드를 추가할 수 있습니다. 해당 브라우저에서 복사 기능을 구현하는 데 필요합니다. 일반적인 상황에서는 IE > FF > Opera/chrome > other의 순서로 판단됩니다.


방법 2, 플래시 간접처리 방식

플래시를 생성하면 복사된 내용이 변수 형태로 플래시에 전달되고, 플래시는 매우 간단하다. 그런 다음 내용을 메모리에 복사하여 복사 기능을 구현합니다. 플래시를 지원하는 한 이론적으로 대부분의 브라우저와 호환됩니다. 이 방법이 제가 오늘 보고 테스트하고 검증한 방법입니다.

설치 및 사용법은 위 두 사이트에서 확인하실 수 있습니다. E 버전과 중국어 버전은 검색을 통해서만 보실 수 있습니다!
여기에서는 위의 구현 방법이 사용된 간단한 버전의 구현 프레임워크를 제공합니다. 여기에 수정 사항이 있습니다. 공식 버전의 지침에 따르면 이 기능은 단일 페이지에서 쉽게 구현할 수 있지만 일부 CMS의 실제 적용에서는 몇 가지 문제가 발생할 수 있습니다. 무엇이 문제인가요? IE 코어 페이지에 "이 페이지는 종료되었습니다"라는 팝업이 표시됩니다. 이유는 매우 간단합니다. js 로딩이 완료되기 전에 호출됩니다. IE에 문제가 있는 것으로 밝혀지면 IE를 판단하는 방법을 사용하여 IE를 격리할 수 있고 다른 코어는 플래시 방법을 사용하여 구현할 수 있습니다.

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

function checkClient(object){//브라우저 결정
var copyTxt=document.getElementById(object).value; //복사된 콘텐츠 가져오기
if("v"!="v "){
//공식 문서에 따라 여기에서 플래시 위치를 설정합니다.
//여기에서 플래시 위치를 절대적으로 또는 상대적으로 설정합니다.
ZeroClipboard.setMoviePath('ZeroClipboard.swf');
/ /복사 객체 생성
var clip = new ZeroClipboard.Client();
//손 모양 설정
clip.setHandCursor(true)
//복사된 내용 설정
clip .setText(copyTxt);//트리거 개체 설정
>clip.glue('d_clip_button')
}
}

IE 코어가 플래시 처리를 사용하지 않고

코드 복사를 직접 사용하는지 확인합니다. 코드는 다음과 같습니다.

// 복사 처리
functionclipBoard(object){
var copyTxt=document.getElementById(object).value
if(copy2Clipboard(copyTxt) )!= false){
alert('복사 성공') ;
}
}
copy2Clipboard = function(txt){
if("v"=="v") { //IE 브라우저인지 확인
window.clipboardData.clearData ();
window.clipboardData.setData("Text",txt)
return true
}
else { //IE가 아닌 코어가 직접 반환
return true;
}

위의 두 번째 방법에 대한 가장 간단한 설정 방법은 < 사이에 코드를 넣으면 됩니다. ;/head> 첫 번째 방법이든 두 번째 방법이든 상관없이 복사하려는 페이지에 다음 두 줄의 코드를 추가해야 합니다.

복사된 내용의 텍스트 필드를 설정하세요.

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

onmouseout="checkClient('textinfo')" value="Copied content" size ="65"/>

트리거 객체 버튼 설정

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

주소 복사

두 번째 방법입니다. 추가하려면 감지 브라우저를 설정하세요

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

여기에 적힌 일반적인 단계는 다음과 같으며 필요에 따라 일부 ID 이름을 수정할 수 있습니다. 최소한 전체 코드는 공식 데모를 참조하세요.
피곤해요.