STR STORAGE | Entry | object

ちょっと忙しかったので、Firefoxのテーマは停滞中。

今日は思いつきjQueryの話です。

概要

<object>をセレクタにして、jQueryで<object>に置換する事でHTMLの変更無しでFlashをJavaScriptからのロードにする。

ソース

HTML

<object type="application/x-shockwave-flash" data="[file]" width="[width]" height="[height]">
 <param name="movie" value="[file]" />
 <param name="menu" value="true" />
 <param name="autostart" value="true" />
 <param name="loop" value="true" />
 <param name="quality" value="high" />
 <param name="wmode" value="transparent" />
 Flash Object
</object>

JavaScript

jQuery(function()
{
var swf_file = jQuery('object').attr('data');
var swf_width = jQuery('object').attr('width');
var swf_height = jQuery('object').attr('height');
var swf_menu = jQuery('object param:eq(1)').attr('value');
var swf_autostart = jQuery('object param:eq(2)').attr('value');
var swf_loop = jQuery('object param:eq(3)').attr('value');
var swf_quality = jQuery('object param:eq(4)').attr('value');
var swf_wmode = jQuery('object param:eq(5)').attr('value');
jQuery('object').replaceWith('<object type="application/x-shockwave-flash" data="'+swf_file+'" width="'+swf_width+'" height="'+swf_height+'"><param name="movie" value="'+swf_file+'" /><param name="menu" value="'+swf_menu+'" /><param name="autostart" value="'+swf_autostart+'" /><param name="loop" value="'+swf_loop+'" /><param name="quality" value="'+swf_quality+'" /><param name="wmode" value="'+swf_wmode+'" />Flash Object</object>');
}
);

最新のMicrosoft Updateでは元に戻っていた気もしますが、基本的にIEの例のアレ対策のアレ。もっと便利なスクリプトも既にありますが、これはまぁ外部ライブラリを使いたくない人間向けかもしれないアレなアレです。

見ての通り、HTMLの<object>を同じタグで書き換えているだけです。元のHTMLからパラメータを引き継ぐので楽かも。<param>を上から順番に配列で取り出しているのでHTMLの順番に依存してしまっています。ここはもう少し汎用性を上げたい。