>  기사  >  웹 프론트엔드  >  JavaScript 복사 함수 호출 방법의 여러 예 요약

JavaScript 복사 함수 호출 방법의 여러 예 요약

伊谢尔伦
伊谢尔伦원래의
2017-07-22 15:28:531665검색

방법 하나하나 식별 및 처리 방법

방법은 매우 간단하고 이해하기 쉽습니다. 클라이언트 브라우저 유형을 판단하여 복사 기능을 구현하기 위해 다양한 js 코드를 실행하는 것입니다. 이론적으로는 이것이 작동합니다. 그러나 우리가 생각하는 것만큼 쉽지는 않습니다. 우리는 일부 브라우저에서 js 복사 코드를 작성하는 방법에 대해 잘 모르기 때문에 적어도 내가 아는 것은 IE와 FF입니다.

IE와 FF만 호환된다면 훨씬 간단할 것입니다. 여기서는 IE 코어를 결정하기 위해 인터넷에서 비교적 잘 알려진 방법인 13바이트 방법을 사용하는데, 이 방법도 자주 사용합니다.

if("\v"=="v") {//13个字节 
//这里是IE核,执行的代码,亲测兼容IE8 
}else{ 
//非IE核执行代码 
}

복사를 구현하기 위한 대략적인 구조는 다음과 같습니다.

function clipBoard(object){ 
//获取object的值,即复制内容 
var copyTxt=document.getElementById(object).value; 
//调用copy2Clipboar来实现浏览器,判断及执行代码 
if(copy2Clipboard(copyTxt)!= false){ 
alert('复制成功'); 
} 
} 
copy2Clipboard = function(txt){ 
if("\v"=="v"){ 
//IE浏览器执行代码 
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("浏览器不支持"); 
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"){ 
//这里根据官方文档设置 
//这里设置flash位置,绝对相对都可以 
ZeroClipboard.setMoviePath('ZeroClipboard.swf'); 
//创建一个复制对象 
var clip = new ZeroClipboard.Client(); 
//设置手形 
clip.setHandCursor(true); 
//设置复制的内容 
clip.setText(copyTxt); 
//设置触发对象 
>clip.glue('d_clip_button'); 
} 
}

IE 코어인지 여부를 확인하는 데 사용됩니다. IE 코어는 플래시 처리를 사용하지 않고 복사 메커니즘을 직접 사용합니다.

//复制处理 
function clipBoard(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>7cdffbc981ce578dc6212f54b5f55c8e 첫 번째 방법이든 두 번째 방법이든 복사해야 하는 페이지에 다음 두 줄의 코드를 추가하세요
복사된 콘텐츠의 텍스트 필드를 설정하세요 

<input type="text" id="textinfo" 
onmouseout="checkClient(&#39;textinfo&#39;)" value="复制的内容" size="65"/>

트리거 개체 설정 버튼

<p id="d_clip_button" onclick="copyCode(&#39;textinfo&#39;)">复制地址</p>

탐지 브라우저 추가, 설정 두 번째 방법입니다

<script>checkClient(&#39;textinfo&#39;);</script>

위 내용은 JavaScript 복사 함수 호출 방법의 여러 예 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.