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

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。

高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(15区分 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、CITP、Ruby Programmer Goldなどを保有。

babaの書いた記事

BPSアドベントカレンダー

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ