フレームとiframeの違いを説明

フレームとiframeの差

IFRAMEを使用しての最初の、長所と短所

利点:

  より便利な静的なページに1.プログラム;
  2.個別のページと手順。

短所:

  1.iframeが悪い場所があります:スタイル/スクリプトは、要求が増加します、追加のリンクが必要です。唯一の抗泥棒とさらにセキュリティチェーンjsが抗泥棒ではなくなりました。
  すべてのダウンそのまま元のページを表示していますが、ホーム・ページを使用している場合、検索エンジンは最も厄介であることが幸いできる2.iframe。それでも良い、ランク付けされていない良い順位を行うにはあなたのウェブサイト!もし動的なページは、良い点を含ん!しかし、彼は削除する必要がありました。<HTML> <HEAD> <TITLE > <BODY> タグ! 
  3.フレーム構造は、時々 、すべての特に上下、混乱して感じることができる時間の周りにスクロールバー、複数のフレームに表示されます。クラウディングに加えて、これらのスクロールバーは、特に制限は紙面となっている、それはまた、力の訪問者を分散させるために注意を払うだろう。訪問者はこのようなサイトはすぐに背を向ける傾向がある遭遇します。彼らはあなたの家のように混沌としたことから、そのサイトの他の部分を読んでより多くの価値がないかもしれない、と考えます。(私の見解では、ウィンドウのスクロールバーが唯一のメインページで制御することができ、サブフレームのスクロールバーが表示されないということです)
  4.ナビゲーションリンクを疑います。フレーム構造を使用する場合はそれ以外の場合は、訪問者のトラブルの多くを与えるとして、あなたは、すべてのナビゲーションリンクを正しく設定する必要があります。この時間は、彼がどこへ行くか、他の場所がなかったので、たとえば、リンク先のページには、ナビゲーションフレームに表示され、来場者は、このような状況で立ち往生されます。
  5.コールの外部のページには、あなたはリクエストの追加のページ番号をもたらすために、追加のCSSを呼び出す必要があります。

第二に、なぜそれほどのiframe

  アイフレームは、別のサイトへのサイトのコンテンツを埋め込むための簡単な方法を提供します。しかし、我々はインラインフレームを使用するように注意する必要があります。IFRAMEは、DOM要素を備えたスクリプトやCSSを作成するために、他のより遅い1〜2桁を作成しました。

  iframeのページは、一般的に多くのインラインフレームが含まれていない使用しますので、DOMノードを作成するための時間が大きな割合を占めていないかかります。onloadイベントだけでなく、接続プール(接続プール):しかし、いくつかの他の問題をもたらします。

ページの読み込みをブロック1.Iframes

  時間内のonloadイベントトリガーウィンドウは非常に重要です。onloadイベントは、停止し、現在のWebページがロードされたことをユーザーに伝えるために、ブラウザの「ビジー」インジケータをトリガします。遅延のonloadイベントをロードした後、それがユーザーにこのウェブサイトは非常に遅いという感じを与えます。

  ウィンドウのonloadイベントは、すべてのiframeがロードされた後に必要(要素が含まれている)トリガされます。SafariとChromeで、IFRAMEのSRCの動的な設定は、JavaScriptをブロックすることによって、この状況を回避することができます。

2.専用接続プール

  Webサーバに接続されている開いているブラウザのごく少数。古いブラウザは、Internet Explorer 6&7とFirefox 2、唯一のドメイン名(ホスト名)は、両方の接続を開きます。これは、ブラウザの新しいバージョンでの制約の数を増加しています。そしてサファリ3+オペラ9+ドメインが同時に接続4を開くことができ、クロム1+、IE 8のFirefox 3と6を同時に開くことができます。並列接続でラウンドアップ:あなたはこの記事による特定のデータテーブルを表示することができます。

  一部の人々は、独自の独立したiframeの接続プールを持つようにしたいかもしれないが、それはそうではありません。ブラウザのほとんどは、メインページとiframeは、これらの接続の間で共有されています。これは、iframeのリソースをロードするときには、これにより、メインページの読み込みリソースをブロックし、利用可能な接続を使い果たす可能性があることを意味します。IFRAMEの内容は、もちろん非常に良いですメインページの内容よりも重要である場合。しかし通常は、メインページのコンテンツの内容をiFrameにすることは重要ではありません。次に、利用可能な接続のうちのiframe実行は価値がありません。メインページ上の重要な要素がロードされ、その後、動的IFRAME SRCに設定された後、一つの解決策は、あります。

  米国のトップ10のサイトではインラインフレームを使用しています。ほとんどの場合、彼らは広告をロードするためにそれを使用します。これは、広告サービスをロードするための簡単な方法で、理解しやすいだけでなく、論理的なソリューションです。しかし、iframeのページはあなたのパフォーマンスに影響を与えるだろう、覚えておいてください。可能な限り、インラインフレームを使用しないでください。それが賢明必要ないときにそれらを使用しています。

三つの違い、IFRAMEのフレーム

図1に示すように、フレームはFRAMESETから単独で使用することができない、IFRAMEができ、
図2に示すように、フレームは、本体内に配置することができません。

これは次のように表示することができます。

<! - <ボディ> - > 
<フレームセットの行= " 50%、* " > 
<フレーム名= " フレーム1 " SRC = " http://gongxquan.blog.163.com/test1.htm " /> 
<フレーム名= " フレーム2 " SRC = " http://gongxquan.blog.163.com/test2.htm " /> 
</フレームセット> 
<! - <ボディ> - >

それは以下のように示すことができません。

<BODY> 
<フレームセットの行= " 50%、* " > 
<フレーム名= " フレーム1 " SRC = " http://gongxquan.blog.163.com/test1.htm " /> 
<フレーム名= " フレーム2 " SRC = " http://gongxquan.blog.163.com/test2.htm " /> 
</フレームセット> 
<身体>

そして、図3に示すように、インラインフレームのネストされたフレームセットは、本体内に配置する必要があり
、次の表示が正しく

<身体> 
<フレームセット> 
<iframeの名前= " フレーム1 " SRC = " http://gongxquan.blog.163.com/test1.htm " /> 
<IFRAME名= " フレーム2 " SRC = " のhttp:// gongxquan。 blog.163.com/test2.htm " /> 
</フレームセット> 
</ BODY>

それは以下のように示すことができません。

<! - <ボディ> - > 
<フレームセット> 
<iframeの名前= " フレーム1 " SRC = " http://gongxquan.blog.163.com/test1.htm " /> 
<IFRAME名= " フレーム2 " SRC = " http://gongxquan.blog.163.com/test2.htm " /> 
</フレームセット> 
<! - </ BODY> - >

4、IFRAME入れ子になっていないフレームセットは、自由に使用することができます。

次のように両方を表示することができます。

<身体> 
<iframeの名前= " フレーム1 " SRC = " http://gongxquan.blog.163.com/test1.htm " /> 
<IFRAME名= " フレーム2 " SRC = " のhttp://gongxquan.blog.163 .COM / test2.htm " /> 
</ BODY> 
<! - <ボディ> - > 
<iframeの名前= " フレーム1 " SRC = " http://gongxquan.blog.163.com/test1.htm " / > 
<IFRAME名= " フレーム2 " SRC = " http://gongxquan.blog.163.com/test2。HTM " /> 
<! - </ BODY> - >

唯一のフレームセットを制御することにより図5に示すように、フレームの高さ; IFRAMEのようなフレームセット制御、することができない、自分自身を制御することができます。

<! - <ボディ> - > 
<フレームセットの行= " 50%、* " > 
<フレーム名= " フレーム1 " SRC = " http://gongxquan.blog.163.com/test1.htm " /> 
<フレーム名= " フレーム2 " SRC = " http://gongxquan.blog.163.com/test2.htm " /> 
</フレームセット> 
<! - </ボディ> - > 
<BODY> 
<フレームセット> 
<IFRAME高さ= " 30%"名前= " フレーム1 " SRC = "http://gongxquan.blog.163.com/test1.htm " /> 
<iframeの高さ=" 100 "名前= " フレーム2 " SRC = " http://gongxquan.blog.163.com/test2.htm " /> 
</フレームセット> 
</ BODY>

図6に示すように、同じページの使用つ以上のiframeの場合、IEで正常であることができる、Firefoxの(Firefoxが改善されている、この問題は存在しない)のみ最初を示し、二つ以上の使用フレーム内のIE、通常のFirefoxを使用することができます

要約:

機能を実現することができ、両方のフレームとiframeはなく、インラインフレームのフレームよりも高い柔軟性を持つ、基本的に同じです。ページ全体のフレームがフレームで、IFRAMEがページ要素に埋め込まれ、埋め込まれたフレームはiframeタグがフレームマーカーをフローティングと呼ばれ、それはHTML埋め込み表示のHTML文書であってもよいといえます。これは最大の違いフレームマーカーは、Webページ<iframe>の</ iframe>の全体としてページ全体の内容に含まれており、コンテンツ<フレーム> </フレーム>に埋め込まれ含ま独立したエンティティであり、これは、独立して表示することができます。また、アプリケーションのIフレームは、コードにこのコンテンツを複製することなく、同じページに同じコンテンツを複数回表示することができます。

使用状況や財産◆◆◆◆<iframe>のタグについては、次の簡単な説明

  、<iframe>の、フレームの形態であるべきで、それが<フレーム>は異なり、IFRAMEは、ページの任意の部分に埋め込まれてもよいです。:我々は、のような特定のコード例を最初与える
<インラインフレームは、幅=高さ= 420 330 FRAMEBORDER = 0 =自動URLをスクロールSRC => </インラインフレーム>、URLは相対パスとすることができる場合、絶対パスがあってもよいが

幅は、幅、高さは、高さが実際の状況に応じて調整することができ表します。
ページの表示をスクロールすると、このパラメータが省略されている場合、スクロールバー、自動車へのオプションのパラメータは、YES、NO、デフォルトが自動であるかどうかを示します。

  第二に、埋め込まれたWebページにページポイント上のハイパーリンクを実装する方法を
ちょうどその上のiframeの名前を与えます。この方法は、<iframeの名前= **>、例えば、私は名前のプレーヤー、書き込みHTML言語の句<インラインフレーム幅= 640高さ= 25である //www.cuiz.net/player:名=プレイヤーFRAMEBORDER = 0 SRC =のhttp。 HTM> </ iframe>の、
そしてWebページ文のハイパーリンクは、のように記述する必要があります。<a href=URL target=cuiz>オープンプレーヤー</a>の

フレームセットのプロパティ

まず、我々は、関連するプロパティ次のフレームセットタグを理解します:

<フレームセットCOLS =数又は割合、又は数の割合>(左右の分割フレーム)または
<フレームセットの行=数又は割合、又は数の割合>(垂直分割フレーム)

このコードはまた、書くことができる: 
<フレームセットCOLS = 120、*>

*左ページの長さによって120で、残りのスペースは、ページ表示と使用権に委ねられています。

<フレームセット>の後にプラス<フレーム>コード:
。ページがleft.htm、右right.htmに表示されたウェブページを表示されている場合は、次のように1、ページの左側に、コードは次のとおりです。

<フレームセットCOLS = 120 *>
<フレームSRC = "left.htm">
<フレームSRC = "right.htm">
</フレームセット>

ページがtop.htm上側、下のページで、ページがfoot.htmを表示されている場合2は、次のようになり、Webページを表示します 
。<フレームセットの行を= 30、*>
<SRC =「top.htm」フレーム>
<フレームを= SRC "foot.htm">
</フレームセット>

■<フレームセット>タグのコントロールのプロパティを次のように

FRAMESPACING = 2つのフレーム間の距離を制御し、 
フレームのFRAMEBORDER =厚さ制御フレーム; 
境界=厚さ制御フレーム、何フレームが0に設定されます 
次のようにソース・ページのために分割され、<body>タグではない追加しなければなりません。

<HTML>
<HEAD>
<TITLE> 
我的网站
</ TITLE>
</ HEAD>
<フレームセットCOLS = 200、* FRAMEBORDER = "0" FRAMESPACING = "0"国境= "0">
<フレームSRC = "左。 HTM ">
<フレームSRC =" right.htm ">
</フレームセット>
</ HTML>

フレームのプロパティ

他のプロパティタグのフレームを次のように
小さなウインドウのそれぞれの状況を説明するために使用される<フレーム>が分割され、その主な属性は次のとおり

SRC:つまり、ディレクトリのリンクファイルが置かれている、ファイルのリンクを各フレームへのパスを指定します。

MARGINWIDTH:距離の設定は、左と右の境界線を持つファイル。

marginheightが:上下の境界線からの設定ファイル。

NORESIZE:フレームのサイズを変更するには、ビューアを禁止しています。

スクロール:スクロールバー、三つのパラメータの合計を表示するかどうかを設定する:はい(図示)を、NO(図示せず)とオートは(ブラウザによって自動的にスクロールバーかどうかを決定する)、デフォルト値はautoです。

名前:フレームの名前を設定します。(ハイパーリンクの場所を制御することができます)

<フレームSRC = "left.htm"名前= "左">
<フレームSRC = "right.htm"名前= "右">

例えば、我々は追加するページのコンテンツを変更するにはちょうどいい、ページの、リンク先の左側にページの左側にあるリンクを押します: 
<のhref =「http://bbs.cuiz.net」ターゲット=「右」>バックフォーラムホーム</a>

リンク先は、4つの特殊予約値に属し_parent、として定義されていることに注意してください。それらは: 
_parent:hrefが新しい現在位置FRAMESETを表示し; 
_topに:HREFは、それ自体が別のFRAMESETフレームセットのような現在の全体的な位置に新しいウィンドウが表示され、 
_self:hrefの新しい強制表示を現在のフレーム; 
_blank:新しいウィンドウディスプレイのhref;

これは、フレームの右側に表示され、本明細書に定義されます。

次は、例のiframeタグであります:

  <IFRAME名= "exobud_mp" SRC = "PlayerMP / exobud.html"
   幅= "640"高さ= "25" MARGINWIDTH = "0" marginheightが"0"
   ボーダー= "0" FRAMEBORDER = "0"、スクロール= "NO 「> </ iframe>の

 参考のために☆フレームサイズ設定値以上。一般的に、プレイヤは、高さ20〜25ピクセル(画素)を乗じた約640〜760px(ピクセル)幅の細長い領域の形状をとるであろう。
 (あなたは字幕を使用する場合は、60PXの余分な高さを必要とします)

☆☆☆☆こちらのページで参加する選手のいくつかの例です☆☆☆☆

  1、(縦型 - 下側のプレーヤー)を埋め込む例ウェブフレーム(フレームセット)モードを使用して:

  <フレームセットの行= "*、25" FRAMESPACING = "0"国境= "0" FRAMEBORDER = "0">
    <フレーム名= "インデックス" SRC = " http://bbs.cuiz.net " NORESIZE>
    <フレーム名= "exobudmp" SRC = "PlayerMP / exobud.html"スクロール= "no"をNORESIZE>
  </フレームセット>

  2、例えば(縦型 - トッププレイヤーで)を埋め込むウェブフレーム(フレームセット)モードを使用して:

  <フレームセットの行= "30、*" FRAMESPACING = "0"国境= "0" FRAMEBORDER = "0">
    <フレーム名= "exobudmp" SRC = "PlayerMP / exobud.html"スクロール= "no"をNORESIZE>
    <フレーム名前= "インデックス" SRC = " http://bbs.cuiz.net " NORESIZE>
  </フレームセット>

  (フレームセット)モード - 3、埋め込み例を使用して、ページフレームが(左のプレイヤーを約型)

  <フレームセットCOLS = "200、*" FRAMESPACING = "0"国境= "0" FRAMEBORDER = "0">
    <フレーム名= "exobudmp" SRC = "PlayerMP / exobud.html"スクロール= "no"をNORESIZE>
    <フレーム名前= "インデックス" SRC = " http://bbs.cuiz.net " NORESIZE>
  </フレームセット>

プレイヤーのアクションサイトに埋め込むこと☆☆ときは、注意してください。

  1.あなたは、HTMLアプリケーションの構文をフレーム、およびフレームワークを設定するために、プレーンテキストエディタを使用する方法を知っている方法を知っている必要があり
     構文を。あなたは文法の枠組みの文言をマスターしていない場合は、情報を見つけるためにインターネット上で検索してください。

  2.あなたのウェブサイトに関係なく、(などのJavascriptを含む)文法の任意の方法のプレイヤー、あなたがしなければならない
     訪問者が同時にプレイヤーは、このようにプレイヤーに影響を与えるページ更新せずにWebページを変換するときにことを確認して
     動きを。

  3.あなたがHTML構文に精通していない場合、それはプレイヤーの仕方インラインフレーム(IFRAME)を使用するのが最善ではありません
     あなたはこのよう埋め込まれたプレーヤーでの使用に適したサイトのレイアウトを理解していない限り、ウェブサイトに埋め込まれました。

  4.上述の実施形態の使用は、プレイヤサイトに埋め込まれたフレーム(フレームセットまたはIFRAME)は、適用されない
     ポップアップウィンドウ(ポップアップウィンドウ)オープンプレーヤーに。(繁体字中国語の説明の部分を参照して上述しました)

原作アドレス:のhttp://www.jb51.net/article/77954.htm

      https://blog.csdn.net/justinok/article/details/83123121

おすすめ

転載: www.cnblogs.com/songzhixue/p/11261118.html