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 までご連絡ください。

＆lt; Progress＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; datalist＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; meter＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5＆lt; time＆gt;を使用するにはどうすればよいですか日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PM

この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Dreamweaver Mac版

ビジュアル Web 開発ツール

DVWA

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