콘텐츠를 클립보드_jquery에 복사하기 위해 주요 브라우저와 호환되는 js의 간단한 구현

웹사이트 기사는 여러 개의 버튼을 제공해야 하므로, 클릭하면 기사 내용이 클립보드에 복사됩니다.

인터넷에서 많은 내용을 검색해 보니 내용이 꽤 지저분한 것 같아서 여기서 정리해서 여러분과 공유하겠습니다

렌더링은 다음과 같습니다.

이전에는 IE와 Firefox만 지원하는 window.clipboardData.setData를 사용했습니다. 360브라우저, 소고우 등 브라우저가 모두 눈물을 흘렸다. 그래서 ZeroClipboard를 공부하고 js코드를 활용해서 작성해 보았습니다.

사용하기 전에 세 가지를 인용하세요(업로드 첨부 파일이 제공되지 않으므로 여기에는 다운로드 주소가 제공되지 않습니다. 매우 일반적입니다. 혼자서 여자를 찾을 수 있습니다):

jquery-1.4.1.min.js
ZeroClipboard.js
ZeroClipboard.swf

다음은 가장 간단한 구현입니다. 설명해주세요.

원칙

DOM 요소에 보이지 않는 Adobe Flash 영화 요소를 배치합니다. 사용자가 DOM 요소를 클릭하면 실제로는 보이지 않는 Adobe Flash 동영상 요소를 클릭하고 Flash 코드가 콘텐츠를 클립보드에 복사합니다.

참고: js를 사용하여 플래시의 클릭 이벤트를 시뮬레이션하는 경우 콘텐츠를 클립보드에 복사할 수 없습니다. 그 이유는 브라우저와 플래시의 보안 제한 때문입니다.

a 태그는 버튼이며, 이미지 등으로 대체할 수 있지만 ID는 아래의clip.glue("copy_text")와 일치해야 합니다.

clip.setText(AddContent document.getElementById("id_div").innerText AddContent); 이 문장의 di_div는 복사할 Div의 ID입니다. 이 ID는 다른 태그의 ID일 수 있습니다. 복사하고 싶은 항목의 ID를 적어주세요.

나머지는 그대로 복사하세요. 변경해야 할 내용은 맨 위 두 줄입니다. 첫 번째 줄은 일반적으로 웹페이지에 이미 존재하는 태그입니다. 그 사람의 ID를 설정하면 됩니다. 그런 다음 첫 번째 줄을 삭제할 수 있습니다. 두 번째 줄은 원하는대로 사용하시면 됩니다. 단, 아이디는 아래와 동일해야 합니다.

미리 준비한 3개의 파일을 코드에 표시된 경로에 올려주세요. 이건 서버에서만 작동한다고 하네요. 테스트용으로 서버에 직접 올려봤습니다

가장 단순화된 코드입니다. 인터넷의 난잡함은 정말 보기 힘들기 때문에 만드는 대로 모두와 공유하겠습니다. 이 글에 대해 궁금한 점이 있으면 블로그에 메시지를 남겨주세요.

구현된 코드는 다음과 같습니다.

<div id="id_div">文本内容</div><br><a href='#' id="copy_text" title="以纯文本形式复制">复制文章纯文本内容</a><br>
<script type="text/javascript" src="/js/global/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/js/global/ZeroClipboard.js"></script>
<script type="text/javascript">
var clip = null;
ZeroClipboard.setMoviePath("/js/global/ZeroClipboard.swf");
$(document).ready(function(){
    var AddContent = "\r\n本原创文章来源：C++技术网，阅读更多原创精品文章，欢迎访问C++技术网。
\n";
  clip = new ZeroClipboard.Client();
  clip.setHandCursor(true);
  clip.setText(AddContent+ document.getElementById("id_div").innerText + AddContent);
  clip.glue("copy_text");
  clip.addEventListener("complete", function(){
    alert("文章纯文本内容已经复制到剪切板！");
  });
});
</script>