frame、iframeフレームワークプログラミング
22792 ワード
一、iframeを使うメリットとデメリット:1.プログラムが静的ページに呼び出されるのは便利です. 2.ページとプログラムの分離;欠点:1.iframeには悪い点があります.スタイル/スクリプトには追加のチェーンが必要で、要求が増加します.またjs防犯チェーンでは泥棒を防ぐだけで、大泥棒を防ぐことはできません. 2.iframeは元のページをそのまま表示できるのが幸いですが、トップページに使うと検索エンジンが一番嫌いです.では、あなたのサイトはよくできても、良い順位にはランクインできません!ダイナミックページならincludeでいいです!しかし、彼のラベルを除去しなければなりません! 3.フレーム構造は、特に複数のフレームに上下、左右のスクロールバーが現れる場合に戸惑うことがある.これらのスクロールバーは、特に限られたページスペースを占有するほか、訪問者の注意力を分散させる.訪問者はこのようなサイトに遭遇すると、すぐに振り向いて離れることが多い.彼らは、あなたのホームページがこんなに混乱している以上、サイトの他の部分は読む価値がないかもしれません.(この中で本人の観点は、サブフレームにスクロールバーが現れないようにし、ウィンドウのスクロールバーはホームページ面でしか制御できない)4.リンクナビゲーションの質問.フレームワーク構造を使用する場合は、すべてのナビゲーションリンクを正しく構成することを保証する必要があります.そうしないと、訪問者に大きな迷惑をかけます.例えば、リンクされたページがナビゲーションフレームに表示されると、訪問者は陥落します.このとき、他の場所がないからです. 5.外部ページを呼び出すには、cssを追加的に呼び出す必要があり、ページに追加の要求回数をもたらす.二、なぜiframe iframesを少なくするのか、一つのサイトの内容を別のサイトに埋め込む簡単な方法を提供しています.しかし、iframeを慎重に使用する必要があります.iframeの作成は、scriptsおよびcssを含む他のDOM要素の作成よりも1〜2桁遅い.iframeを使用するページには一般的にiframeがあまり含まれないため、DOMノードの作成にかかる時間は大きな比重を占めません.しかし、onloadイベントおよび接続プール(connection pool)という他の問題が発生しました.1.Iframesはページロードをブロックしてwindowのonloadイベントをタイムリーにトリガーすることが重要です.onloadイベントがトリガーされ、ブラウザの「忙しい」インジケータが停止し、現在のWebページがロードされていることをユーザーに伝えます.onloadイベントのロードが遅延すると、このページは非常に遅いと感じられます.Windowsのonloadイベントは、iframeのロードが完了した後(中の要素を含む)にトリガーされる必要があります.SafariとChromeでは、JavaScriptでiframeのSRCを動的に設定することで、このようなブロックを回避できます.2.唯一の接続プールブラウザは、Webサーバに少量の接続しかできません.インターネットExplorer 6&7とFirefox 2を含む古いブラウザでは、1つのドメイン名(hostname)に対して2つの接続しか同時に開くことができません.この数の制限は、新しいバージョンのブラウザで向上しました.Safari 3+とOpera 9+は同時に1つのドメイン名に対して4つの接続を開くことができ、Chrome 1+、IE 8およびFirefox 3は同時に6つ開くことができる.この文章で具体的なデータ表を見ることができます:Roundup on Parallel Connections.iframeには独自の接続プールがあることを望んでいる人もいるかもしれませんが、そうではありません.ほとんどのブラウザでは、ホームページとiframeがこれらの接続を共有しています.これは、iframeがリソースをロードするときに使用可能なすべての接続を使い果たし、ホームフェースリソースのロードをブロックする可能性があることを意味します.iframeの内容がホームページの内容よりも重要であれば、もちろんいいです.しかし、通常、iframeの内容はホームページの内容が重要ではありません.このときiframeで利用可能な接続を使い果たしたのは価値がありません.1つの解決策は、ホームページ上の重要な要素のロードが完了した後、iframeのSRCを動的に設定することです.米国の上位10サイトはiframeを使用している.ほとんどの場合、広告をロードするために使用されます.これは理解でき、論理的なソリューションでもあり、簡単な方法で広告サービスをロードします.しかし、iframeはあなたのページの性能に衝撃を与えることを覚えておいてください.可能な限りiframeは使用しないでください.確かに必要な場合は、慎重に使用してください.三、iframeとframeの違い1、frameはframeSetから離れて単独で使用することができず、iframeは可能である.2、frameはbodyに入れない;次のように正常に表示されます.
次のように正常に表示されません.
3、frameSetにネストされたiframeはbodyに入れなければならない.次のように正常に表示されます.
次のように正常に表示されません.
4、frameSetにネストされていないiframeは自由に使用できます.以下のように正常に表示できます.
5、frameの高さはframeSetでしか制御できない.iframeは自分で制御することができ、frameSetで制御することはできません.例えば:
6、同じページで2つ以上のiframeを使用した場合、IEに正常に表示され、firefoxには1つしか表示されません(firefoxは改善され、この問題はもう存在しません).2つ以上のframeを使用してIEとfirefoxで正常4、親ウィンドウ呼び出しiframeサブウィンドウメソッド1、HTML構文:
2、親ウィンドウ呼び出し子ウィンドウ:myFrame.window.functionName(); 3、子窓品呼び出し親窓:parent.functionName(); 簡単に言えば、サブウィンドウで呼び出す変数や関数の前にparentを付ける.行4、親ウィンドウのページソース:コードは次のとおりです.
5、サブウィンドウページ:コードは以下の通り:
五、iframe親ウィンドウと子ウィンドウの相互の呼び出し方法1、IEでの使用方法:親ウィンドウ呼び出し子ウィンドウ:iframe_ID.iframe_document_object.object_attribute = attribute_value例:onClick="iframe_text.myH1.innerText=’http://www.pint.com‘;” サブウィンドウ呼び出し親ウィンドウ:parent.parent_document_object.object_attribute = attribute_valueの例:οnclick=”parent.myH1.innerText=’http://www.pint.com‘;” 2、Firefoxでの使用方法:上はIEでは問題ないが、firefoxでは正常ではない.firefoxでは、親ウィンドウ呼び出しサブウィンドウ:window.frames[“iframe_ID”].document.getElementById(“iframe_document_object”).object_attribute = attribute_value例:window.frames[“iframe_text”].document.getElementById(“myH1”).innerHTML= “http://hi.jb51.net/";サブウィンドウ呼び出し親ウィンドウ:parent.document.getElementById("parent_document_object").object_attribute = attribute_value例:parent.document.getElementById(“myH1”).innerHTML = “http://jb51.net/";3、完全な例test.htmlコードは以下の通りです.
frame_test.htmlコードは次のとおりです.
test.htmlの中でfirefoxの下でiframeにアクセスするにはnameを使わなければならなくて、idを使うことができなくて、だからname="iframe_に変えますtest”
まとめ:FrameとIframeの両方で実現できる機能は基本的に同じですが、IframeはFrameよりも柔軟性があります.frameはページ全体のフレームワーク、iframeは埋め込まれたページ要素、または埋め込まれたフレームワークIframeタグはフローティングフレームタグとも呼ばれ、HTMLドキュメントを1つのHTMLに埋め込んで表示することができます.Frameタグとの最大の違いは、ページに埋め込まれたiframeに含まれるコンテンツがページ全体と一体であり、Frameに含まれるコンテンツは独立した個体であり、独立して表示できることである.また、Iframeを適用すると、このコンテンツのコードを繰り返すことなく、同じページに同じコンテンツを複数回表示することもできます.
<frameset rows="50%,*">
<frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/>
<frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/>
frameset>
次のように正常に表示されません.
<body>
<frameset rows="50%,*">
<frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/>
<frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/>
frameset>
<body>
3、frameSetにネストされたiframeはbodyに入れなければならない.次のように正常に表示されます.
<body>
<frameset>
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/>
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/>
frameset>
body>次のように正常に表示されません.
<frameset>
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/>
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/>
frameset>
4、frameSetにネストされていないiframeは自由に使用できます.以下のように正常に表示できます.
<body>
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/>
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/>
body>
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/>
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/>
5、frameの高さはframeSetでしか制御できない.iframeは自分で制御することができ、frameSetで制御することはできません.例えば:
<frameset rows="50%,*">
<frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/>
<frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/>
frameset>
<body>
<frameset>
<iframe height="30%" name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/>
<iframe height="100" name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/>
frameset>
body>6、同じページで2つ以上のiframeを使用した場合、IEに正常に表示され、firefoxには1つしか表示されません(firefoxは改善され、この問題はもう存在しません).2つ以上のframeを使用してIEとfirefoxで正常4、親ウィンドウ呼び出しiframeサブウィンドウメソッド1、HTML構文:
<iframe name="myFrame" src="child.html">iframe> 2、親ウィンドウ呼び出し子ウィンドウ:myFrame.window.functionName(); 3、子窓品呼び出し親窓:parent.functionName(); 簡単に言えば、サブウィンドウで呼び出す変数や関数の前にparentを付ける.行4、親ウィンドウのページソース:コードは次のとおりです.
<html>
<head>
<script type="text/javascript">
function say() {
alert("parent.html------>I'm at parent.html");
}
function callChild()
{
//document.frames("myFrame").f1();
myFrame.window.say();
}
script>
head>
<body>
<input type=button value=" child.html say()" onclick="callChild()">
<iframe name="myFrame" src="child.html">iframe>
body>
html>5、サブウィンドウページ:コードは以下の通り:
<html>
<head>
<script type="text/javascript">
function say()
{
alert("child.html--->I'm at child.html");
}
function callParent() {
parent.say();
}
script>
head>
<body>
<input type=button value=" parent.html say() " onclick="callParent()">
body>
html>
五、iframe親ウィンドウと子ウィンドウの相互の呼び出し方法1、IEでの使用方法:親ウィンドウ呼び出し子ウィンドウ:iframe_ID.iframe_document_object.object_attribute = attribute_value例:onClick="iframe_text.myH1.innerText=’http://www.pint.com‘;” サブウィンドウ呼び出し親ウィンドウ:parent.parent_document_object.object_attribute = attribute_valueの例:οnclick=”parent.myH1.innerText=’http://www.pint.com‘;” 2、Firefoxでの使用方法:上はIEでは問題ないが、firefoxでは正常ではない.firefoxでは、親ウィンドウ呼び出しサブウィンドウ:window.frames[“iframe_ID”].document.getElementById(“iframe_document_object”).object_attribute = attribute_value例:window.frames[“iframe_text”].document.getElementById(“myH1”).innerHTML= “http://hi.jb51.net/";サブウィンドウ呼び出し親ウィンドウ:parent.document.getElementById("parent_document_object").object_attribute = attribute_value例:parent.document.getElementById(“myH1”).innerHTML = “http://jb51.net/";3、完全な例test.htmlコードは以下の通りです.
<HTML>
<HEAD>
<TITLE> Test Page TITLE>
<script src="prototype-1.4.0.js">script>
<script language="javascript">
function show()
{
window.frames["iframe_text"].document.getElementById("myH1").innerHTML = "http://hi.jb51.net/";
}
script>
HEAD>
<BODY>
<iframe height="350" width="600" src="iframe_test.htm" name="iframe_text">iframe>
<form action="" method="post">
<input name="haha" id="haha" type="text" maxlength="30" value="haha" />
<br />
<textarea cols="50" rows="5" id="getAttributeMethod">textarea>
<input type="button" onClick="show();" value=" "/>
form>
<h1 id="myH1">dh1>
BODY>
HTML>
frame_test.htmlコードは次のとおりです.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> title>
head>
<script language="javascript">
function show()
{
parent.document.getElementById("myH1").innerHTML = http://jb51.net/;
}
script>
<body>
<h1 id="myH1">hah1>
<form action="" method="post">
<input name="abc" id="abc" type="text" maxlength="30" value="abc" />
<br />
<textarea cols="50" rows="10" id="text">textarea>
<br />
<input type="button" value=" " onclick="show();"/>
form>
body>
html>test.htmlの中でfirefoxの下でiframeにアクセスするにはnameを使わなければならなくて、idを使うことができなくて、だからname="iframe_に変えますtest”
まとめ:FrameとIframeの両方で実現できる機能は基本的に同じですが、IframeはFrameよりも柔軟性があります.frameはページ全体のフレームワーク、iframeは埋め込まれたページ要素、または埋め込まれたフレームワークIframeタグはフローティングフレームタグとも呼ばれ、HTMLドキュメントを1つのHTMLに埋め込んで表示することができます.Frameタグとの最大の違いは、ページに埋め込まれたiframeに含まれるコンテンツがページ全体と一体であり、Frameに含まれるコンテンツは独立した個体であり、独立して表示できることである.また、Iframeを適用すると、このコンテンツのコードを繰り返すことなく、同じページに同じコンテンツを複数回表示することもできます.