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との併用には注意が必要です。