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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:40 PM

中国では旧暦の 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 <br> <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="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201301/2013010416185572.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Adobe Flash Player を入手" border="0"> <br></a> <br> </div> <br>フォーム><br><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 src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201301/2013010416185572.gif?x-oss-process=image/resize,p_40" class="lazy" style="max-width:90%" alt="" style="max-width:90%" border="0"> がページに表示されることがわかります。これはなぜですか? 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> <br> デモ /javascript"> <br>// 匿名関数の実行は、通常の関数の実行と変わりません <br>(function() { <br>var flash = document.getElementById("flashcontent"); <br>var msg = null; <br>window.onload = function() { <br>if ( flash ) { <br>msg = '要素は存在します。'; <br>flash.innerHTML = msg; <br>msg = '要素が存在しません'; <br>window.alert( msg ) <br>})(); > <br> <br><div id="flashcontent"> //www.adobe .com/go/getflashplayer"> <br><img src="/static/imghwm/default1.png" data-src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" class="lazy" _fcksavedurl="" http: alt="Adobe Flash Player を入手" border="0"> <br><br><br>上記のコードを実行すると、この画像がページに表示されたままであることがわかります<img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201301/2013010416185572.gif?x-oss-process=image/resize,p_40" class="lazy" style="max-width:90%" alt="" style="max-width:90%" border="0">。「要素が存在しません」という警告ボックスが表示されますが、問題は発生していないようです。 swfobject_source.js ファイルを外部から読み込みます。 <br><br>これを見たら、きっとあの時の私のイライラを経験することになるでしょう。少し休んで、頭を整理して振り返ってみると、問題の本質は「HTML DOM の読み込み」にあることに気づきました。」。ページでは、ページの先頭 (つまり、の間) の JS スクリプトと外部ファイルからロードされた JS ファイルが、HTML DOM が実際に構築される前に実行されます。したがって、これら 2 つの場所で実行されるスクリプトは、まだ存在しない DOM にアクセスできません。本当の理由は、例 1.1 の JS コードの実行中に、まだ構築されていない <div id="flashcontent">...</div> にアクセスされるためであることがわかります。 <br><br>これを見た後、自分で行う必要がある最後のステップが 1 つあります。それは、上記のコードを単純に変更し、問題を解決するために不適切な方法を採用することです。<br>「HTML DOM」について" 問題、どの方法ですか? もうお分かりかと思います。はい、まさに次の方法です: <br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode35'));"><u>コードをコピー </u></span></div>コードは次のとおりです:</div> <div class="msgborder" id="phpcode35"> <br> <br> "text/javascript" src="swfobject_source.js"> _fcksavedurl="<br><form id="Form1"> <br><div id="flashcontent"> <br><a href="http://www.adobe.com/go/getflashplayer%20"> ; <br><img src="/static/imghwm/default1.png" data-src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" class="lazy" alt="Adobe Flash Player を入手" border="0"> <br> <br><script type="text/javascript"> <br />var so = new SWFObject(" www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF"); <br />so.write("flashcontent"); <🎜 <br /> その過程でその悩みに遭遇し、その悩みから解放され、そこで得た<br />の知識を応用し、少し面倒ではありますが、私と同じように何か得たものはありましたか？ ? <br /></script></a> </div> </form> </div> </div> </div> </form>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

HTMLでリストを作成するにはどうすればよいですか？May 06, 2025 am 12:01 AM

toreatealistinhtml、useforunorderedlistsandfororderedlists：1）forunorderedlists、wrapitemsinanduseforeachitem、renderingasabulletedlist.2）

HTMLアクション：Webサイト構造の例May 05, 2025 am 12:03 AM

HTMLは、明確な構造のWebサイトを構築するために使用されます。 1）Webサイト構造などのタグを使用し、定義します。 2）例は、ブログとeコマースのウェブサイトの構造を示しています。 3）誤ったラベルネスティングなどの一般的な間違いを避けてください。 4）HTTP要求を削減し、セマンティックタグを使用してパフォーマンスを最適化します。

HTMLページに画像を挿入するにはどうすればよいですか？May 04, 2025 am 12:02 AM

to inertanimageintoanhtmlpage、usethetagwithsrcandaltattributes.1）usealttextforaccessibilityandseo.2）emplencesrcsetForresponsiveimages.3）applylazyloadingwithloading = "lazy" tooptimizeperformance.4）

HTMLの目的：Webブラウザがコンテンツを表示できるようにするMay 03, 2025 am 12:03 AM

HTMLの中心的な目的は、ブラウザがWebコンテンツを理解して表示できるようにすることです。 1。HTMLは、タグなどのタグを介してWebページの構造とコンテンツを定義します。 3.HTMLは、ユーザーの相互作用をサポートするフォーム要素を提供します。 4. HTMLコードの最適化は、HTTP要求の削減やHTMLの圧縮など、Webページのパフォーマンスを改善できます。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、