js_javascript 팁을 사용하여 클립보드 호환 브라우저에 콘텐츠 복사

js를 통해 클립보드에 내용을 복사하려면 처음에는 어렵지 않습니다. 그러나 브라우저 호환성 문제를 고려하면 jquery-zclip을 사용하여 복사하는 것이 좋습니다. 브라우저 호환성. 원리에 대해서는 자세히 설명하지 않고 구현 방법에 대해 이야기하겠습니다.

예를 들어 내 HTML 코드는 다음과 같습니다.

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

<span id="id_1">복사할 콘텐츠 1</span>
<span id="id_2">복사할 콘텐츠 2</span>
<span id="id_3">복사할 내용 3</span>

총 2개 jquery는 물론이고 jquery-zclip.js 및 ZeroClipboard.swf 파일도 필요합니다. 이 두 파일은 공식 웹사이트(http://www.steamdev.com/zclip)에서 다운로드할 수 있습니다. /

복사버튼 생성 js는 다음과 같습니다

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

테스트해 보니 어렵지 않았습니다. 그런데 프로젝트에 넣어보니 뭔가 잘못됐네요.. 복사 버튼이 생성된 곳에는 플래시가 없고, 텍스트만 있었습니다. 나중에 확인해보니 실제로는 플래시가 생성된 것 같은데, 텍스트가 있던 곳에는 없었을 수도 있습니다. 프로젝트 백그라운드에서 사용되는 iframe 구조와 관련이 있는 것 같습니다. 이 플러그인의 버그인 것 같습니다. 여러 정보를 확인한 후 코드를 변경해야 한다는 의견이 있어서 변경했습니다.

수정해야 할 코드는 다음과 같습니다

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

getDOMObjectPosition: function (obj, stopObj) {
// dom 요소의 절대 좌표 가져오기
var info = {
left: 0,
top : 0,
너비: obj.width ? obj.width : obj.offsetWidth,
높이: obj.height : obj.offsetHeight
} if (obj && (obj != stopObj)) {
//info.left = obj.offsetLeft; //수정 전
//info.top = obj.offsetTop; / /수정 전
jpos = $( obj).position(); //수정 후
info.left = jpos.left; //수정 후
info.top = jpos.top; //수정 후
}

return info;
}


사실 이 플러그인의 원리와 관련이 있습니다. 두 개가 겹치지 않으면 버튼을 덮는 거죠. 위와 같은 문제가 발생하게 됩니다.