jsで内容をクリップボード対応ブラウザにコピーします。

jsを通じて内容をクリップボードにコピーしたいなら、難しくはないですが、ブラウザの互換性を考えると、ちょっと面倒になります。jquery-zclipを使ってコピーするのはいい選択です。flashを使ってブラウザの互換性を実現します。原理は詳しく説明しません。次はどうやって実現しますか？例えば、私のhtmlコードは以下の通りです。

 
<div class="buttonBox"> 
<code rel="1"><span id="id_1">      1</span></code> 
<code rel="2"><span id="id_2">      2</span></code> 
<code rel="3"><span id="id_3">      3</span></code> 
</div> 

jsファイルは全部で二つ必要です。jqueryはもちろん、jquery-zclip.jsとZero Clipboard.swfはこの二つのファイルは公式サイトでダウンロードできます。住所は以下の通りです。http://www.steamdev.com/zclip/ コピーボタンを生成したjsは以下の

 
<script type="text/javascript"> 
$(function(){ 
$('code').each(function(){ 
var self = $(this); 
var id = self.attr('rel'); 
var copy = $('<span>  </span>').appendTo(self).zclip({ 
'path':'/static/admin/js/ZeroClipboard.swf',//           
'afterCopy':function(){ 
alert('                 ,    ctrl+v  '); 
}, 
'copy':function(){ 
return $('#id_'+id).text();//    ，  div span   text(),  input ，  val(),          
} 
}); 
}); 
}); 

</script> 

のようにして、ブラウザをまたいでのコピーができます。もともとは難しいことではないですが、テストをする時も順調です。彼をプロジェクトに置いたら問題が発生します。コピーボタンの位置はflashではなく、文字だけがあります。flashは生まれましたが、文字の位置にはありません。見積もりとプロジェクトのバックグラウンドはiframe構造が関係しています。これはプラグインのbugです。その後、いろいろな資料を調べましたが、コードを変えてもいいという人がいました。その後、変えました。やはり修正すべきコードは下の通りです。

 
getDOMObjectPosition: function (obj, stopObj) { 
// get absolute coordinates for dom element 
var info = { 
left: 0, 
top: 0, 
width: obj.width ? obj.width : obj.offsetWidth, 
height: obj.height ? 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; 
} 

実はこれはこのプラグインの原理と関係があります。彼は透明なflashをボタンの上に覆い隠しました。もし彼らが二つ重なっていないなら、上の問題が発生しました。