検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLにFlashを埋め込む HTML WebページのコードにFlashファイルを埋め込むソリューション（前編）_HTML/Xhtml_Webページ制作

HTMLにFlashを埋め込む HTML WebページのコードにFlashファイルを埋め込むソリューション（前編）_HTML/Xhtml_Webページ制作

WBOY
WBOYオリジナル
2016-05-16 16:40:341562ブラウズ

中国では旧暦の 1 月 15 日の前に新年を祝う習慣があります。ここで、庭にいる友人たちに新年のお祝いを申し上げます。
ここ数日、会社のホームページを修正する必要があり、昨年末の会社の「人員削減」以降、1人で複数人の仕事をしなければならなくなり、急に負担を感じた。重いです。いいえ、これは私の仕事の範疇ではありませんが、不幸中の幸いなことに、今回 BOSS から割り当てられたタスクは、まさに私が情熱を注いでいたフロントエンド開発のタスクでした。 。私はこれまで会社のWebサイトのバックエンド管理プログラムの開発に携わっており、主にサーバーサイドのビジネスロジックを担当していましたが、これまで情熱を注いでいたフロントエンド開発で自分のスキルを活かす機会はありませんでした。について。本当の知識を試すには演習が一番です。私に課された実践的な課題を解決することは、本やさまざまな資料を通じて多くの散在した知識を学びましたが、それらを組み合わせる機会がありませんでした。」ははは。表には長時間押さえつけていたせいでインク汚れがたくさんあります（笑）。

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

私が初めて SWFObject.js に出会ったのは V1.5 でしたが、今回は問題を解決するために V2.1 を使用しました。この 2 つの使い方にはまだいくつかの違いがあります。全体として、V2.1 は V1.5 に比べて大きく進歩していると感じます。V2.1 は、フレームワークのソース コードと使用プロセスの点で、よりオブジェクト指向 JavaScript プログラミング スタイルに沿っています。

あなたが私のような初心者であっても、すでにさまざまな JS の作成に熟練している方であっても、JavaScript を研究したばかりの研究者の視点からこの「曲がりくねった」旅を体験していただきます。コーディングの皆さん、どうか慈悲を持って、私の考え方の近視眼性と私の文章の間違いを文明的な方法で誰もが指摘してくれることを願っています。

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

コードをコピーします
コードは次のとおりです:

DEMO< /title> <br><head> <br><script type="text/javascript" src="swfobject_source.js"> <br><script type="text/javascript" > <br>var so = new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF") ; <br>so.write("フラッシュコンテンツ"); <br></script> <br><form id="Form1"> 🎜> <div id="flashcontent"> <br><a href="http://www.adobe.com/go/getflashplayer"> <br><img src="http:// www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player を入手" border="0" /> <br></a> <br></div> <br></フォーム><br></html><br>SWFObject() の各パラメータの意味を簡単に理解したい場合は、ドキュメントを参照してください。ここでは繰り返しません。 <br>「V1.5 使用例」のコードをメモ帳にコピーし、[SWFObject V1.5] をクリックして必要な V1.5 フレームワークのソース ファイルをダウンロードすることを強くお勧めします。解凍後、swfobject_source.js (非圧縮) を見つけます。バージョン、圧縮バージョンのファイル名は swfobject.js) ファイルを作成し、メモ帳ファイルの名前を demo.html に変更し、swfobject_source.js ファイルと同じフォルダーに配置して、IE6/IE7 と fox にそれぞれインストールしてください。 、opera、safari、navigator、chrome などのブラウザで実行して、結果を確認してください。 <br>私の提案に従うと、Flash ファイルではなくこの画像 <img style="max-width:90%" alt="" style="max-width:90%" border="0" src="http://files.jb51.net/file_images/article/201301/2013010416185572.gif"> がページに表示されることがわかります。これはなぜですか? PC に IE シリーズがインストールされている場合は、次の手順に従ってください。IE ブラウザ アイコンをクリックし、ツールバーの [ツール] メニューを見つけて、[インターネット オプション] を選択し、表示されたウィンドウで [詳細設定] をクリックします。が開き、「スクリプトのデバッグを無効にする (Internet Explorer)」オプションを見つけて、その前にあるボックスのチェックを外して「OK」をクリックします。上記の操作を完了した後、demo.html ページを再度参照してください。「実行時エラーが発生しました。デバッグする必要がありますか? 行: 117 エラー: 'null」というエラー プロンプト ボックスが表示されます。 ' は空であるか、オブジェクトではありません。」 <br><br>開発に VS 2003/2005/2008 シリーズの IDE を使用している場合は、JavaScript コードのデバッグ方法を教える必要はありません。 can var so = 上記... デバッガーを開き、so.write() メソッドを通じて swfobject_source.js ファイルの内部をトレースするまで、F11 キーを押し続けます。 so.write(elementId) に渡された flashcontent" がドキュメント内にあります。.getElementById("flashcontent") の値は常に null です。これはなぜですか?問題は見つかりましたか? <br><br>はは、もしあなたがまだ JavaScript についてあまり知らない初心者なら、コードのデバッグと修正を何度も繰り返した後、あなたも当時の私と同じように混乱するでしょう。 JS コード自体にエラーはありません。問題がある場合は、どこに問題があるのでしょうか?そのとき、私はエラーの解決策を探していたので、上記のコードを次の例に修正しました: <br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode34'));"><u>Copy code</u></span></div>コードは次のとおりです: </div> <div class="msgborder" id="phpcode34"> <br><html> <br><head> デモ /javascript">
// 匿名関数の実行は、通常の関数の実行と変わりません
(function() {
var flash = document.getElementById("flashcontent");
var msg = null;
window.onload = function() {
if ( flash ) {
msg = '要素は存在します。';
flash.innerHTML = msg;
msg = '要素が存在しません';
window.alert( msg )
})(); >

//www.adobe .com/go/getflashplayer">
Adobe Flash Player を入手


上記のコードを実行すると、この画像がページに表示されたままであることがわかります。「要素が存在しません」という警告ボックスが表示されますが、問題は発生していないようです。 swfobject_source.js ファイルを外部から読み込みます。

これを見たら、きっとあの時の私のイライラを経験することになるでしょう。少し休んで、頭を整理して振り返ってみると、問題の本質は「HTML DOM の読み込み」にあることに気づきました。 」。ページでは、ページの先頭 (つまり、 の間) の JS スクリプトと外部ファイルからロードされた JS ファイルが、HTML DOM が実際に構築される前に実行されます。したがって、これら 2 つの場所で実行されるスクリプトは、まだ存在しない DOM にアクセスできません。本当の理由は、例 1.1 の JS コードの実行中に、まだ構築されていない
...
にアクセスされるためであることがわかります。

これを見た後、自分で行う必要がある最後のステップが 1 つあります。それは、上記のコードを単純に変更し、問題を解決するために不適切な方法を採用することです。
「HTML DOM」について" 問題、どの方法ですか? もうお分かりかと思います。はい、まさに次の方法です:

コードをコピー
コードは次のとおりです:


"text/javascript" src="swfobject_source.js"> _fcksavedurl="
<


;
Adobe Flash Player を入手< ;/a>