> 웹 프론트엔드 > JS 튜토리얼 > JS/FLASH는 코드를 클립보드에 복사하는 기능을 구현합니다(모든 브라우저와 호환 가능)_javascript 기술

JS/FLASH는 코드를 클립보드에 복사하는 기능을 구현합니다(모든 브라우저와 호환 가능)_javascript 기술

WBOY
풀어 주다: 2016-05-16 17:33:21
원래의
939명이 탐색했습니다.

현재 JavaScript를 사용하여 클립보드에 복사된 코드를 작성하는 경우 일반적으로 브라우저와 호환되지 않습니다. 그러니 플래시를 이용하여 레이어를 시뮬레이션한 후 복사하면 모든 브라우저에 적용 가능합니다~

swf 파일과 js 파일을 다운받아야 합니다. 이 두 파일을 htm과 함께 넣으십시오.
아이콘:


서버 측에서 사용해야 합니다.
아이콘:


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

ZeroClipboard.js
// Simple Set Clipboard System
// 작성자: Joseph Huckaby
var ZeroClipboard = {
version: "1.0.7",
클라이언트: {}, // 페이지에 등록된 업로드 클라이언트, ID로 색인
moviePath: 'ZeroClipboard.swf', // 영화 URL
nextId: 1, // 다음 영화 ID
$: function( thingy) {
// 단순 DOM 조회 유틸리티 함수
if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);
if (!thingy.addClass) {
// 몇 가지 유용한 메소드로 요소 확장
thingy.hide = function() { this.style.display = 'none'; };
thingy.show = function() { this.style.display = ''; };
thingy.addClass = function(이름) { this.removeClass(이름); this.className = ' ' 이름; };
thingy.removeClass = function(name) {
varclasses = this.className.split(/s /);
var idx = -1;
for (var k = 0; k if (classes[k] == name) { idx = k; k = 클래스.길이; }
}
if (idx > -1) {
classes.splice( idx, 1 );
this.className = class.join(' ');
}
이것을 반환하세요.
};
thingy.hasClass = function(name) {
return !!this.className.match( new RegExp("\s*" name "\s*") );
};
}
반환하세요;
},
setMoviePath: function(path) {
// ZeroClipboard.swf에 경로 설정
this.moviePath = path;
},
dispatch: function(id, eventName, args) {
// 플래시 무비에서 이벤트 수신, 클라이언트로 보내기
var client = this.clients[id];
if (클라이언트) {
client.receiveEvent(eventName, args);
}
},
register: function(id, client) {
// 이벤트를 수신할 새 클라이언트 등록
this.clients[id] = client;
},
getDOMObjectPosition: function(obj, stopObj) {
// dom 요소의 절대 좌표 가져오기
var info = {
left: 0,
top: 0,
너비: obj.width ? obj.width : obj.offsetWidth,
높이: obj.height ? obj.height : obj.offsetHeight
};
while (obj && (obj != stopObj)) {
info.left = obj.offsetLeft;
info.top = obj.offsetTop;
obj = obj.offsetParent;
}
반품 정보;
},
클라이언트: function(elem) {
// 새로운 단순 업로드 클라이언트용 생성자
this.handlers = {};
// 고유 ID
this.id = ZeroClipboard.nextId ;
this.movieId = 'ZeroClipboardMovie_' this.id;
// 플래시 이벤트를 수신하려면 싱글톤으로 클라이언트를 등록하세요.
ZeroClipboard.register(this.id, this);
// 영화 만들기
if (elem) this.glue(elem);
}
};
ZeroClipboard.Client.prototype = {
id: 0, // 고유 ID
ready: false, // 영화가 이벤트를 수신할 준비가 되었는지 여부
movie: null, // 영화 객체 참조
clipText: '', // 클립보드에 복사할 텍스트
handCursorEnabled: true, // 손 모양 커서를 표시할지 기본 포인터 커서를 표시할지 여부
cssEffects: true, // CSS 마우스 활성화 DOM 컨테이너에 미치는 영향
handlers: null, // 사용자 이벤트 핸들러
glue: function(elem, appendElem, stylesToAdd) {
// DOM 요소에 대한 붙임
// elem은 ID 또는 실제일 수 있음 DOM 요소 객체
this.domElement = ZeroClipboard.$(elem);
// 객체 바로 위에 떠 있거나 dom 요소가 설정되지 않은 경우 zIndex 99
var zIndex = 99;
if (this.domElement.style.zIndex) {
zIndex =parseInt(this.domElement.style.zIndex, 10) 1;
}
if (typeof(appendElem) == 'string') {
appendElem = ZeroClipboard.$(appendElem);
}
else if (typeof(appendElem) == '정의되지 않음') {
appendElem = document.getElementsByTagName('body')[0];
}
// domElement의 X/Y 위치 찾기
var box = ZeroClipboard.getDOMObjectPosition(this.domElement,appendElem);
// 요소 위에 부동 DIV 생성
this.div = document.createElement('div');
var 스타일 = this.div.style;
style.position = '절대';
style.left = '' box.left 'px';
style.top = '' box.top 'px';
style.width = '' box.width 'px';
style.height = '' box.height 'px';
style.zIndex = zIndex;
if (typeof(stylesToAdd) == 'object') {
for ( addedStyle in stylesToAdd) {
style[ addedStyle] = stylesToAdd[ addedStyle];
}
}
// style.BackgroundColor = '#f00'; // 디버그
appendElem.appendChild(this.div);
this.div.innerHTML = this.getHTML( box.width, box.height );
},
getHTML: function(width, height) {
// 영화에 대한 HTML 반환
var html = '';
var flashvars = 'id=' this.id
'&width=' 너비
'&height=' 높이;
if (navigator.userAgent.match(/MSIE/)) {
// IE가 OBJECT 태그를 가져옴
var 프로토콜 = location.href.match(/^https/i) ? 'https://' : 'http://';
html = '';
}
else {
// 다른 모든 브라우저는 EMBED 태그를 얻습니다.
html = ' ';
}
html을 반환합니다.
},
hide: function() {
// 일시적으로 화면 밖에서 플로터 숨기기
if (this.div) {
this.div.style.left = '-2000px';
}
},
show: function() {
// hide() 호출 후 자신을 표시합니다
this.reposition();
},
destroy: function() {
// 컨트롤 및 플로터 제거
if (this.domElement && this.div) {
this.hide();
this.div.innerHTML = '';
var body = document.getElementsByTagName('body')[0];
{ body.removeChild( this.div );를 시도해보세요. } catch(e) {;}
this.domElement = null;
this.div = null;
}
},
reposition: function(elem) {
// 플로팅 div의 위치를 ​​변경하고 선택적으로 새 컨테이너로 변경
// 경고: 컨테이너는 크기를 변경할 수 없으며 위치만 변경할 수 있습니다
if (elem) {
this.domElement = ZeroClipboard.$(elem);
if (!this.domElement) this.hide();
}
if (this.domElement && this.div) {
var box = ZeroClipboard.getDOMObjectPosition(this.domElement);
var 스타일 = this.div.style;
style.left = '' box.left 'px';
style.top = '' box.top 'px';
}
},
setText: function(newText) {
// 클립보드에 복사할 텍스트 설정
this.clipText = newText;
if (this.ready) this.movie.setText(newText);
},
addEventListener: function(eventName, func) {
// 이벤트에 대한 사용자 이벤트 리스너 추가
// 이벤트 유형: load, queueStart, fileStart, fileComplete, queueComplete, Progress, error, 취소
eventName = eventName.toString().toLowerCase().replace(/^on/, '');
if (!this.handlers[eventName]) this.handlers[eventName] = [];
this.handlers[이벤트 이름].push(func);
},
setHandCursor: function(enabled) {
// 손 모양 커서 활성화(true) 또는 기본 화살표 커서(false)
this.handCursorEnabled = 활성화됨;
if (this.ready) this.movie.setHandCursor(활성화);
},
setCSSEffects: function(enabled) {
// DOM 컨테이너에서 CSS 효과 활성화 또는 비활성화
this.cssEffects = !!enabled;
},
receiveEvent: function(eventName, args) {
// 플래시에서 이벤트 수신
eventName = eventName.toString().toLowerCase().replace(/^on/, '' );
// 특정 이벤트에 대한 특수 동작
switch (eventName) {
case 'load':
// 영화는 준비가 되었다고 주장하지만 IE에서는 항상 그런 것은 아닙니다...
// 버그 수정: Firefox에서는 EMBED DOM 요소를 확장할 수 없으며 기존 기능을 사용해야 합니다.
this.movie = document.getElementById(this.movieId);
if (!this.movie) {
var self = this;
setTimeout( function() { self.receiveEvent('load', null); }, 1 );
반환;
}
// 특정 경우에 이를 설정하려면 PC의 Firefox에서 "킥"이 필요합니다.
if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent. match(/Windows/)) {
var self = this;
setTimeout( function() { self.receiveEvent('load', null); }, 100 );
this.ready = true;
반환;
}
this.ready = true;
this.movie.setText( this.clipText );
this.movie.setHandCursor( this.handCursorEnabled );
휴식;
case 'mouseover':
if (this.domElement && this.cssEffects) {
this.domElement.addClass('hover');
if (this.recoverActive) this.domElement.addClass('active');
}
휴식;
case 'mouseout':
if (this.domElement && this.cssEffects) {
this.recoverActive = false;
if (this.domElement.hasClass('active')) {
this.domElement.removeClass('active');
this.recoverActive = true;
}
this.domElement.removeClass('hover');
}
휴식;
case 'mousedown':
if (this.domElement && this.cssEffects) {
this.domElement.addClass('active');
}
휴식;
case 'mouseup':
if (this.domElement && this.cssEffects) {
this.domElement.removeClass('active');
this.recoverActive = false;
}
휴식;
} // 이벤트 이름 전환
if (this.handlers[eventName]) {
for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx ) {
var func = this.handlers[eventName][idx];
if (typeof(func) == 'function') {
// 실제 함수 참조
func(this, args);
}
else if ((typeof(func) == 'object') && (func.length == 2)) {
// PHP 스타일 객체 메소드, 즉 [myObject, 'myMethod']
func[0][ func[1] ](this, args);
}
else if (typeof(func) == 'string') {
// 함수 이름
window[func](this, args);
}
} // foreach 이벤트 핸들러 정의
} // 이벤트에 대한 사용자 정의 핸들러
}
};

html代码:
复代码 代码如下:

a.htm

<머리>
클립보드 제로 테스트


<본문>

클립보드에 복사...




<스크립트 언어="JavaScript">
var 클립 = null;
function $(id) { return document.getElementById(id); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.addEventListener('load', function (client) {
debugstr("Flash 무비가 로드되어 준비되었습니다.");
});
clip.addEventListener('mouseOver', function (client) {
//
clip.setText( $('myresource').value );
}) 위에 마우스를 올려 놓으면 텍스트가 업데이트됩니다.
clip.addEventListener('complete', function (client, text) {
debugstr("클립보드에 텍스트를 복사했습니다: " text );
});
clip.glue( 'd_clip_button', 'd_clip_container' );
}
setTimeout(function(){
init();
},1500);




flash文件请自己到网上下载哈~
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿