요즘에는 IE, Firefox, Chrome, Safari 등과 같이 점점 더 많은 브라우저 유형이 있으므로 JS로 클립 보드에 컨텐츠를 복사하는 작은 기능을 쉽게 구현하기가 쉽지 않습니다.
Flash 9 시대에는 모든 브라우저의 JS 복사 컨텐츠를 클립 보드에 죽이는 솔루션이있었습니다 .
이 솔루션은 가장 인기있는 방법 중 하나입니다. 유명한 클립 보드 복사 솔루션은 Clipboard.swf를 브리지로 사용하여 컨텐츠를 클립 보드에 복사합니다.
원리는 다음과 같습니다. 숨겨진 플래시 파일을 만들고 동시에 "clipboard = .."값을 플래시 변수 플래시에 할당합니다. 이 과제를 통해 복사 된 컨텐츠는 클립 보드에 배치됩니다. 이 방법은 IE, Firefox, Opera, Chrome 및 Safari와 호환되며 진정으로 "보편적 인"솔루션입니다. 브라우저 플래시의 설치 속도는 매우 높으며 이는 거의 완벽한 솔루션입니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> 웹 개발자- www.admin10000.com </title>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<script type = "text/javaScript">
var clipboardswfdata;
var setcopy_gettext = function () {
clipboardswfdata = document.getElementById ( 'test_text'). 값;
// alert (clipboardswfdata);
Window.document.clipboardswf.setVariable ( 'str', clipboardswfdata);
}
var floatwin = function () {
경고 ( '성공적으로 복사하십시오!');
//document.getElementById('Clipinner').style.display = 'none';
}
</스크립트>
</head>
<body>
<textRea id = "test_text"rows = "15"cols = "100"> 텍스트 내용 ..... </textArea>
<div id = "clipboard_content">
<div> <span id = "clipinner"> 코드를 클립 보드에 복사하십시오
<embed name = "clipboardswf"id = "clipboardswf"onmouseover = "setcopy_gettext ()"devicefont = "false"src = "./_ clipboard.swf"menu = "false"allisectaccess = "samedomain"swliveconnect = "true"wmode = "transparent"type = "Application/x-shock-shock-shock-shock-shock-shock-shock-shock-shock-shock-shock-shock-shocke-shocke-shock
</span>
</div>
</div>
</body>
</html>
Clipboard.swf의 다운로드 주소 : http://www.jeffothy.com/weblog/uploads/clipboard.php
그러나 플래시 10 시대에는 위의 방법이 더 이상 불가능합니다.
Flash10은 SWF (예 : 마우스 클릭)의 실제 작업 만 클립 보드에 액세스 할 수 있다고 규정하기 때문에 위의 메소드는 숨겨진 SWF 파일 만 사용하고 JavaScript를 통해 플래시 클립 보드를 작동합니다. 사용자는 SWF 파일에서 실제 작업을 수행하지 않으므로이 방법은 유효하지 않습니다.
그렇다면이 "실제 작동"문제를 해결하는 방법은 무엇입니까? JavaScript 라이브러리 : 0 Clipboard를 사용할 수 있습니다. 이 JS 라이브러리는 클립 보드에 플래시 10 복사를 지원할 수 있습니다. 이 방법의 원리는 투명한 플래시에서 버튼 또는 DIV와 같은 DOM 요소를 덮어 쓰는 것입니다 (사용자에게는 보이지 않음). 이 DOM을 클릭 할 때 플래시의 실제 클릭은 플래시 클립 보드에 액세스하는 것입니다.
디버깅의 몇 가지 예는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> 제로 클립 보드 테스트 </title>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<script type = "text/javaScript"src = "zeroclipboard.js"> </script>
<script type = "text/javaScript">
var clip = null;
function $ (id) {return document.getElementById (id); }
함수 init () {
clip = new Zeroclipboard.client ();
Clip.SethandCursor (True);
clip.addeventListener ( '마우스 오버', function (client) {
// 마우스에서 텍스트를 업데이트합니다
clip.settext ($ ( 'fe_text'). value);
});
clip.addeventListener ( 'complete', function (client, text) {
// debugstr ( "클립 보드에 복사 한 텍스트 :" + 텍스트);
ALERT ( "이 주소가 복사되어 Ctrl+v에 붙여 넣을 수 있습니다");
});
clip.glue ( 'clip_button', 'clip_container');
}
</스크립트>
</head>
<body onload = "init ()">
<input id = "fe_text"cols = "50"rows = "5"value = "Copy Content Text">
<span id = "clip_container"> <span id = "clip_button"> <strong> copy </strong> </span> </span>
</body>
</html>
이 라이브러리를 다운로드하려면 클릭하십시오 : //www.vevb.com/jiaoben/24961.html
디버깅 중에 웹 사이트에 업로드하십시오. 로컬로 직접 플래시를 열면 오류가 발생하고 허가가 없습니다. Zeroclipboard.js 파일의 MoviePath 속성은 Falsh의 주소이며 Zeroclipboard.swf가 디렉토리에 저장되는 주소 위치입니다.
클립 보드에 컨텐츠를 복사하는이 솔루션은 브라우저를 지원할 수 있습니다 : Firefox/IE/Opera/Chorme/Safari 모든 브라우저!