HTML に埋め込まれた Flash HTML ウェブページコードに Flash ファイルを埋め込むソリューション (パート 2)

上の記事で、SWFObject V1.5 の使い方の紹介は一旦終了です。これから、SWFObject V2.1 を紹介します。もっと早く V2.1 を知っていたら、「HTML DOM の読み込みを待つ」問題に悩まされることはなかったかもしれません。

まず、V2.1 構文の呼び出し例を簡単に紹介します。

コードをコピー

コードは次のとおりです。

個人的には、上記の 3 番目の書き方を好みます。以下で説明するように、HTML コードに Flash ファイルを埋め込むための最終的な解決策は、swfobject.embedSWF() を呼び出す 3 番目のスタイルを使用することです。 V2.1 のスタイルは最新の JS のスタイルと非常に一致しており、コードはより簡潔になっています。

前の記事で採用したソリューションは、ほとんどのニーズを満たすことができ、互換性も受け入れられるようです。ほとんどの友人のニーズを満たすことができ、受け入れられるソリューションでもあります。しかし、私はさらに極端な状況を発見しました。

コードをコピー

コードは次のとおりです。

新しい SWF オブジェクト ("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");

渡された Flash ファイルのアドレスが間違っている場合、または Flash ファイルがサーバー上で削除されている場合、以下に示すように、望ましくない状況が発生します。

コードをコピー

コードは次のとおりです。

<html>
<title>デモ</title>
<ヘッド>
<script type="text/javascript" src="swfobject_source.js"></script>
</head>
<本文>
<フォームid="フォーム1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="upload/2022/web/get_flash_player.gif" alt="Adobe Flash Player を入手" border="0" />
</a>
</div>
</フォーム>
<script type="text/javascript">
// Flash ファイル名の前に f を追加したことに注意してください。
var so = new SWFObject("http://www.pec365.com/Flash/f20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");
次のように記述します。
</スクリプト>
</本文>
</html>

このコードは自分で実行することをお勧めします。初心者の場合は、前の記事で紹介した手順を参照してこのコードを実行し、「災害」の到来を実際に感じることができます。

はい、ページが空白になり、Flash が表示できない場合に画像を置き換えるために最初に使用された画像も消えていることがわかります。どこに行ったのでしょうか?デバッグ後、渡された Flash ファイルのアドレスが間違っていても、誤った <object [……]></object> タグが作成され、<div id="flashcontent">[……]</div> 内のコンテンツが置き換えられ、高さ 304 ピクセル、幅 367 ピクセルの空白領域が表示されることがわかりました (Flash プレーヤーをインストールしている場合は、画面の左上隅を右クリックすると見つかります)。そして悪夢が始まります。

この悪夢のような結果を解決するために、私は悪いアイデアを思いつきました。まず、渡された Flash ファイルのアドレスに基づいて、ファイルがサーバー上に実際に存在するかどうかを確認します。返された結果が Flash ファイルが存在するというものであれば、swfobject.embedSWF() メソッドを実行します。具体的なアイデアは、XMLHttpRequest オブジェクトを使用して GET/HEAD メソッドを通じてサーバーに要求し、xmlHttp.status == 200 || xmlHttp.status == 302 をファイルの存在の根拠として判断することです。ただし、この方法には特定の欠陥があるようです。まだ改善できていません。最終的な解決策の例を以下に示します。

コードをコピー

コードは次のとおりです。

<html>
<title>デモ</title>
<ヘッド>
<script language="javascript" type="text/javascript" src="JavaScript/swfobject.js"></script>
<script type="text/javascript">
（関数（） {
var xmlHttp、
結果、
flashURL = "http://www.pec365.com/Flash/20071113.swf";

var checkFlashURL = 関数(url) {
xmlHttp = GetXmlHttpObject();
xmlHttp.onreadystatechange = 関数() {
xmlHttp.readyState == 4 の場合
xmlHttp.status == 200 の場合 ||
xmlHttp.status == 302 ) {
戻り値 (結果 = true);
}
}
};
xmlHttp.open("HEAD", url, true);
xmlHttp.send(null);
};
var GetXmlHttpObject = 関数() {
var xmlHttp = null;
試す {
// Firefox、Opera 8.0+、Safari
xmlHttp = 新しい XMLHttpRequest();
}
キャッチ（e）{
// インターネットエクスプローラー
試す {
// 古いIE
xmlHttp = 新しい ActiveXObject("Msxml2.XMLHTTP");
} キャッチ (e) {
// 新しいIE
xmlHttp = 新しい ActiveXObject("Microsoft.XMLHTTP");
}
}

xmlHttp を返します。
};
// 指定されたFlashファイルがサーバー上に存在するかどうかを確認するために使用されます
フラッシュURLをチェックします。
window.onload = 関数() {
if ( 結果 ) {
swfobject.embedSWF(flashURL、"flashcontent"、"304"、"367"、"10.0.0"、"expressInstall.swf"、{}、{quality:"autohigh"、wmode:"transparent" }、{});
}
それ以外 {
window.alert("Flash アドレスが無効です。よく確認してください"); // デバッグ中に Flash アドレスが正しいかどうかを確認するために使用されます
}
}
})();
</スクリプト>
</head>
<本文>
<フォームid="フォーム1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="upload/2022/web/get_flash_player.gif" alt="Adobe Flash Player を入手" border="0" />
</a>
</div>
</フォーム>
</本文>
</html>

うわー、この2つの記事に数時間費やしました。うっかりして夜10時近くまで会社に残ってしまい、警備員が追い出されてしまいました。早く終わらせたいです。明日仕事で時間があるときに文章を磨こうと思います、ハハ。

<<: JavaScript の基礎: 即時実行関数

>>: MySQL の大文字と小文字の区別に関する注意