Webを作っていて、「このタグをコピー」ボタンはよく作ります。
HTML/JavaScriptのみでは、IE以外のブラウザでクリップボードにコピーする機能は対応できないため、基本的にFlashを使うことになります。
それを簡単に実現できるライブラリが、ZeroClipboardです。
使い方は簡単。$関数を作っておき、onloadのタイミングでZeroClipboard.Clientオブジェクトを初期化・設定するだけです。
<html>
<head>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.setText('コピーして欲しい文字列');
clip.blue('button', 'container');
}
</script>
</head>
<body onload="init();">
<div id="container">
<img id="button" src="button.png" />
</div>
</body>
ところが、HTMLを間違えると、IEでのみ「未知の実行時エラーです」となり、動作しないことがあります。
(Firefox/Chrome/Operaなどでは動作します)
これは、glue()の第2引数として渡すcontainer要素が、pタグなどになっている場合に発生します。
ZeroClipboardは、内部的にembedタグを生成し、Flashを埋め込んでいるのですが、HTMLの仕様上pのなかにembedは入りません(詳細はDTD参照)。
そのため、HTMLとしては一見Validに見える以下のHTMLでも、
<p id="container">
<img id="button" src="button.png" />
</p>
glue('button', 'container'); とやった時点(InnerHTMLが編集される)で、IEのみ厳密なチェックが入るため、エラーになります。
対策として、container要素は必ずdivなどのembedを含める要素にしましょう。
また当然ですが、内部で$()関数を使うため、jQueryやprototypeとの併用には注意が必要です。