SWFObjectで埋め込んだFlashコンテンツの大きさを取得する

SWFObjectで埋め込んだFlashコンテンツの大きさを取得する

ガツン、とみかんを店に売ってるだけ買い占めたいminamiです。 Flashを埋め込む方法としてもはや常識として定着しつつあるSWFObjectですが、先日ちょっとしたことでつまづいたので対処方法を模索してみました。

jQueryでFlashコンテンツの含まれた要素の大きさを取得したい

01.gif

図のように、FlashコンテンツをSWFObjectで埋め込み、jQueryで埋め込んだDIVの高さを取得して表示したいとします。

<script type="text/javascript">
  var flashvars = {};
  var params = {};
  var attributes = {};
  swfobject.embedSWF("swf/test.swf", "fla", "300px", "300px", "9.0.0", "expressInstall.swf",flashvars, params, attributes);

  $(function(){
    $('#flaHeight').html(($('#fla').attr('offsetHeight')));
  })
</script>

しかしこれでは取得できる高さは0のままです。なぜ?

コールバック関数を使ってみる

SWFObjectは2.2から埋め込みが成功or失敗した際に実行できるコールバック関数が使えますので、そちらの中で高さを取得してみます。

<script type="text/javascript">
  var flashvars = {};
  var params = {};
  var attributes = {};
  swfobject.embedSWF("swf/test.swf", "fla", "300px", "300px", "9.0.0", "expressInstall.swf",flashvars, params, attributes, callbackSwf);
  
  function callbackSwf(){
    $(function(){
      $('#flaHeight').html(($('#fla').attr('offsetHeight')));
    });
  }
</script>

しかしそれでも結果は0。Flashコンテンツの幅と高さが決まるのは、埋め込みが終わった後のタイミングと同時ではないようですね。

タイミングを遅らせて取得してみる

最後の手段、Flashコンテンツを埋め込んだ後、少し間を置いてから高さを取得してみます。

<script type="text/javascript">
  var flashvars = {};
  var params = {};
  var attributes = {};
  swfobject.embedSWF("swf/test.swf", "fla", "300px", "300px", "9.0.0", "expressInstall.swf",flashvars, params, attributes);
  
  $(function(){
    setTimeout(function(){
      $('#flaHeight').html(($('#fla').attr('offsetHeight')));
    },300);
  })
</script>

02.gif

無事取得できました!やはりFlashコンテンツが完全に読み込まれてからでないと要素の高さを取得できないようです。
しかしこの方法もかなりきわどいので、やはりFlash側で読み込み終了時のタイミングでjsに処理を送って...など、意外と面倒なことをしないと確実には取得できなそうです。

まとめ

まだモヤっとしているので、もっといい方法があれば教えてください!

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ