Tech Racho エンジニアの「?」を「!」に。
  • 開発

ZeroClipboardを使っていて、IEでのみ「未知の実行時エラーです」が発生する場合

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


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。