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

中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りたいと思います。
たまたま最近、会社のウェブサイトのホームページを改訂する必要に迫られました。昨年末の会社の「人員削減」以降、複数人分の業務を一人でこなさなければならなくなり、急に負担が重くなってしまいました。まあ、これは本来私の仕事の範囲外だったのですが、不幸にして私はそれに巻き込まれてしまいました。この不幸の良かった点は、今回上司から私に割り当てられたタスクが、まさに私がずっと情熱を注いできたフロントエンド開発のタスクだったことです。これまでは、会社のウェブサイトのバックエンド管理プログラムの開発に携わり、主にサーバーサイドでビジネスロジックを処理する業務に携わっており、自分が情熱を注いでいたフロントエンド開発でスキルを発揮する機会はありませんでした。実践は真の知識をテストする最良の方法であり、私に割り当てられた実践的なタスクを解くことはまれなテストです。私は本やさまざまな資料を通じて多くの散在した知識を学んできましたが、それらを組み合わせて「総合的なテスト」を行う機会がありませんでした。笑上に書いた言葉がたくさんあるのは、長い間抑圧されてきたせいです、ハハ。

まず、タスクの要件について説明します。会社の Web サイトのホームページには、5 つのボールで構成された JPG 画像があります。その機能はナビゲーションです。各ボールのテキストをクリックすると、対応する情報の 2 番目のページが開きます。画像に対応する、ほぼ同一の Flash バージョンがあります。上司から私に割り当てられたタスクの 1 つは、クライアントブラウザーに Flash ファイルプレーヤーがインストールされている場合はナビゲーションの Flash バージョンを表示し、そうでない場合は JPG イメージナビゲーションを表示することです。タスクを受け取った後、私は少し考えました。フロントエンド開発なので、当然ブラウザの互換性を考慮する必要があります。ブラウザ間のギャップを埋める最善の方法は、1 つ以上の成熟した JavaScript フレームワークを使用することです。幸いなことに、SWFObject.js と呼ばれる非常に成熟した洗練された JS フレームワークがあります。

私が初めて SWFObject.js に触れたのはバージョン 1.5 のときで、今回はバージョン 2.1 を使用して問題を解決しました。両者の使い方にはまだ若干の違いがあります。全体的に、V2.1 は V1.5 と比べて大きな進歩だと感じています。V2.1 は、フレームワークのソースコードと使用プロセスの両面で、オブジェクト指向の JavaScript プログラミングスタイルにさらに沿っています。

私は、JavaScript を学習し始めたばかりの学習者の視点から、この「厳しい」旅に皆さんをお連れします。皆さんが私のような初心者であろうと、すでにさまざまな JS コードを巧みに記述できるベテランであろうと、寛大な心で、私の考え方の近視眼性や記述の誤りを、礼儀正しく指摘していただければ幸いです。

次のコードは、SWFObject V1.5 の説明ドキュメントから改変した使用例です (V1.5 について詳しく知りたい場合は、このリンクをクリックしてください)。

コードをコピー

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

<html>
<title>デモ</title>
<ヘッド>
<script type="text/javascript" src="swfobject_source.js"></script>
<script type="text/javascript">
var so = new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");
次のように記述します。
</スクリプト>
</head>
<本文>
<フォームid="フォーム1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player を入手" border="0" />
</a>
</div>
</フォーム>
</本文>
</html>

SWFObject() の各パラメータの意味を簡単に理解したい場合は、ドキュメントを参照してください。ここでは繰り返しません。
「V1.5 使用例」のコードをメモ帳にコピーし、SWFObject V1.5 をクリックして、V1.5 フレームワークの必要なソースファイルをダウンロードすることを強くお勧めします。解凍後、swfobject_source.js (非圧縮バージョン、圧縮バージョンのファイル名は swfobject.js) ファイルを見つけ、メモ帳ファイルの名前を demo.html に変更して、swfobject_source.js ファイルと同じフォルダーに配置し、IE6/IE7、fox、opera、safari、navigator、chrome などの任意のブラウザーで実行して結果を確認します。
私のアドバイスに従った場合、ページにこの画像が表示されるはずです。

なぜ Flash ファイルではなくなのでしょうか?お使いの PC に IE シリーズがインストールされている場合は、次の手順に従ってください。IE ブラウザアイコンをクリックし、ツールバーの [ツール] メニューで [インターネットオプション] を選択し、開いたウィンドウで [詳細設定] をクリックし、[スクリプトのデバッグを無効にする (Internet Explorer)] オプションを見つけて、その前のボックスのチェックを外し、[OK] をクリックします。上記の操作を完了したら、demo.html ページを再度参照してください。次のエラーメッセージが表示されたエラープロンプトボックスが表示されます: 「ランタイムエラーが発生しました。デバッグする必要がありますか? 行: 117 エラー: 'null' は空であるか、オブジェクトではありません。」

VS 2003/2005/2008 シリーズの IDE を開発に使用している場合は、JavaScript コードのデバッグ方法を教える必要はないと思います。var so = ... の上にデバッガーを配置し、デバッグしてトレースすることができます。so.write() メソッドを介して swfobject_source.js ファイルの内部までトレースするまで、F11 キーを押し続けます。document.getElementById("flashcontent") が使用されている場合、so.write(elementId) に渡される実際のパラメーター "flashcontent" は常に null であることがわかります。これはなぜでしょうか。問題は見つかりましたか?

ハハ、まだ JavaScript をあまり知らない初心者なら、当時の私と同じように混乱するでしょう。何度もデバッグとコード修正を繰り返した結果、私が書いた JS コードには間違いがないと確信しています。外部から読み込んだ swfobject_source.js ファイルに問題があるのでしょうか? 問題があるとしたら、何が問題なのでしょうか?その時、私はエラーの解決策を見つけようとしました。上記のコードを次の例のように変更しました。

コードをコピー

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

<html>
<title>デモ</title>
<ヘッド>
<script type="text/javascript">
// 無名関数の実行は通常の関数の実行と変わりません
（関数（） {
var flash = document.getElementById("flashcontent");
var メッセージ = null;
window.onload = 関数() {
if (フラッシュ) {
msg = '要素は存在します。';
flash.innerHTML = メッセージ;
} それ以外 {
msg = '要素が存在しません';
ウィンドウ.アラート(メッセージ);
}
};
})();
</スクリプト>
</head>
<本文>
<フォームid="フォーム1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" _fcksavedurl=""http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"" alt="Adobe Flash Player を入手" border="0" />
</a>
</div>
</フォーム>
</本文>
</html>

上記のコードを実行すると、画像がページに表示されたままであることがわかります。

、そして「要素が存在しません」という警告ボックスが表示されます。問題は外部から読み込まれた swfobject_source.js ファイルから発生しているわけではないようです。

これを読めば、当時の私のイライラをきっと理解できるでしょう。少し休憩して頭をすっきりさせて振り返ってみると、問題の本質は「HTML DOM の読み込み」にあることがわかりました。ページでは、HTML DOM が実際に構築される前に、ページヘッド (<head></head> の間) 内の JS スクリプトと外部ファイルから読み込まれた JS ファイルが実行されます。そのため、この 2 つの場所で実行されるスクリプトは、まだ存在しない DOM にアクセスできません。本当の理由を知っておく必要があります。つまり、例 1.1 の JS コードの実行中に、<div id="flashcontent">……</div> が構築される前にアクセスされたのです。

さて、最後に自分で行う必要があるステップが 1 つあります。それは、上記のコードを単純に変更し、エレガントでない方法で「HTML DOM の読み込み」の問題を解決することです。その方法は何でしょうか? もうお分かりだと思います。そうです、次の方法です。

コードをコピー

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

<html>
<title>デモ</title>
<ヘッド>
<script type="text/javascript" src="swfobject_source.js"></script> _fcksavedurl=""swfobject_source.js"></script>"
</head>
<本文>
<フォームid="フォーム1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player を入手" border="0" />
</a>
</div>
</フォーム>
<script type="text/javascript">
var so = new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");
次のように記述します。
</スクリプト>
</本文>
</html>

上記の数千語は、私がどれだけ回り道をしたか、問題を解決する過程で遭遇したトラブル、そのトラブルからどのように抜け出したか、学んだ知識を活用し、また学んだかを述べているだけです。少し面倒ですが、私と同じように何か得たものはありますか？

<<: CSS 境界線の長さ制御機能の実装

>>: React Router 5.1.0 はページジャンプナビゲーションを実装するために useHistory を使用します