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

JavaScript

2011.07.04

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

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

図のように、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>