プログラミングのメモ用BLOGです 自己紹介:あんどれ へっぽこプログラマです

ラベル

2007年12月15日

SWFObject2.0でページのロード後にFlashオブジェクトの再表示を行うには?

Flashオブジェクトを埋め込むときには通常では色々問題があるので以下のサイトを参考にしました。

SWFObject v2.0 ドキュメント日本語訳

SWFObjectというライブラリを使って


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 dynamic embed - step 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>


<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>

</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>

</body>
</html>


と書けば、Flashは問題なくページ上に表示されます。
上記の例では、htmlがロードされる前にHeadに書いたJavascript宣言(swfobject.embedSWF)からおそらく(?)

1.swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
2.embedSWF内のaddDomLoadEvent→ロード時に走るイベントを定義する関数
3.addDomLoadEvent内でcreateSWFを(Flashオブジェクトを生成する関数)を定義。
4.ページ読み込み後に、onDomLoadイベントが走ってcallDomLoadFunctionsを呼び出す。
5.callDomLoadFunctionsで定義されたcreateSWFが処理される

といった順序で処理が走ります。

ただ、残念なことにロード後にHTMLを動的に生成して再表示したい場合、embedSWFを呼びだしただけでは上手くいきませんでした。

調べてみるとロード後は、embedSWFを呼んでもcreateSWFが呼ばれないからということがわかってきました。

でもって結構詰まったのですが、色々探してみるとありがたいことに解決策が以下のフォーラムに載っていました。
http://groups.google.com/group/swfobject/browse_thread/thread/c857d29662509809

I've been develeoping with the old swfObject (1.5) and recently
switched over to the new 2.0 beta.
I noticed that you can't embed a flash object after the pages loads as
the embedding with the new version happens only on the onload. Is
there a way to use this JS to replace an existing flash?

SWFObject2.0でロード後にFlashの再表示をする方法はないか?といった内容でまさに知りたいことです。

解決策のソースを書いているエントリ
http://groups.google.com/group/swfobject/msg/0a04ea40128088c2

一部抜粋
The fix is really just the first inserted line. This:
<元のソース>
function addDomLoadEvent(fn) {
domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only
available in IE5.5+
}

becomes this:
<変更後のソース>

function addDomLoadEvent(fn) {
if (isDomLoaded) return fn(); // if the DOM is already loaded,
trigger directly
domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only
available in IE5.5+
}

ロード済みなら引数(fnはcreateSWFを含む)をすぐ実行するというコードが追加されています。

さらに詳しい比較のコードが別ページに解説されており非常に助かりました。
http://pastie.textmate.org/private/4ftrnrhae7h50nko8k6sg
ここまで詳細に書いてくれていると助かります。

修正したSWFObject.jsを置いときます。
もし、利用してもいいかもと思う方はどうぞ持っていって下さい。(動作保障は自己責任でよろしくお願いします。)
(SWFObject.jsは、MIT Licenseです。)

SWFObject.js

※よくわかってないながらもSWFObject2.0でロード後にFlashの再表示をしたかったので書いてみましたが、よくわかっている人からのいいやり方がありましたらぜひコメント・トラックバックでご指摘下さい。

0 件のコメント: