JavaScriptからのFlashメソッドのクロスブラウザー呼び出し

1週間前、私のプロジェクトの1つで、JavaScriptで実装された既存のスライドショーをFlashで作成されたより美しいスライドショーに置き換えるタスクが発生しました。 コードを少し変更するだけで、フラッシュムービーを挿入し、ページ上でデータ転送とイベント処理を調整して、さらに正しく動作するようにする必要がありました。



JavaScript-Flashデータ転送のトピックに関するロシア語の記事では、プロセスの概要を説明していますが、1つの重要な詳細を考慮しないでください。異なるブラウザーでは、異なるオブジェクトを使用してFlashムービーを選択する必要があります。 最も頻繁に提案されるソリューションはChromeで動作しますが、Firefoxでは動作せず、IEでは動作しません。



JavaScriptとFlashの間のデータ転送のトピックに関するほとんどの記事は不完全であるため、この問題をより詳細に検討することが適切であると考えています。





どのように機能しますか?





HTMLページでは、Flashムービーはウィンドウ、フォーム要素、または画像と同じ通常のオブジェクトです(ただし、Internet Explorer(IE)では、FlashオブジェクトはCOMオブジェクトまたはActiveXオブジェクトです)。 ブラウザによっては、Flashオブジェクトをさまざまな方法で参照する必要があります。



window.document[movieName] // (on Mozilla browsers such as Netscape)

window[movieName] // (on Internet Explorer as of ver 5)

document.embeds[movieName] // Mozilla Netscape, Firefox or Opera








以下は、Flashムービーを返す関数です。



function getFlashMovieObject(movieName)

{

if (window.document[movieName])

{

return window.document[movieName];

}

if (navigator.appName.indexOf("Microsoft Internet")==-1)

{

if (document.embeds && document.embeds[movieName])

return document.embeds[movieName];

}

else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)

{

return document.getElementById(movieName);

}

}








最新のブラウザのほとんどは、getElementById(movieName)メソッドの使用をサポートしています。 ただし、Internet Explorerで機能する場合、Mozilla FirefoxやOperaなどの他のブラウザーでは、このアプローチでは期待した効果が得られません。 その理由は、これらのブラウザでは<embed>要素を使用する必要があるのに対し、getElementById()は<object>要素を返すためです。



埋め込み要素とオブジェクト要素の要件



埋め込みとオブジェクトは同じことをしますが、前者はMozilla(Netscape、Firefox)によってのみ認識され、後者はInternet Explorerによってのみ認識されるため、ほとんどの人はそれらを同時に使用します。



JavaScriptと通信するためのオブジェクトおよび埋め込みタグの要件は次のとおりです。 まず、FlashムービーをHTMLページに挿入する方法の例を示します。



<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="" id="myFlashMovie" width=481 height=86>

<param name=movie value="flips2.swf">

<embed play=false swliveconnect="true" name="myFlashMovie"

src="flips2.swf" quality=high bgcolor=#FFFFFF

width=481 height=86 type="application/x-shockwave-flash">

</embed >

</object >







この例では、タイトルと映画IDは「myFlashMovie」です。 (この名前は、あなたの裁量でランダムに選択されます。同じ名前とIDを使用することをお勧めしますが、同じIDまたは名前を持つ他のオブジェクトがないことも確認する必要があります。数字で)。 これらが要件です。



<object>タグの場合:

-FlashムービーにはIDが必要です。 たとえば、この例ではid = "myFlashMovie"です。



<embed>タグの場合:

-Flashムービーには、名前、パラメーター名が必要です。 たとえば、上記の例では、name = "myFlashMovie"です。

-<embed>タグには、JavaScriptとの「接続の確立」を有効にするためにswliveconnect =“ true”属性が含まれている必要があります。



同じFlashムービー内で同じIDと名前の値を使用することをお勧めします。



UPD:

pixelcubeは、フラッシュオブジェクトを取得するためのそのような関数を提案しました。



function getFlash(name) {

return window.document[name] || window[name] || document.embeds[name];

}







All Articles