実践フレーム（iframe）操作コード_JavaScriptスキル

よく使用されるコード:

<iframe src="http://www.baidu.com" marginwidth="0" marginheight="0" border="0"
	scrolling="no" frameborder="0"
	width="350" height="270"></iframe>

<iframe src="http://www.jb51.net/plugins/like.php&#63;href=YOUR_URL"
    scrolling="no" frameborder="0"
    style="border:none; width:450px; height:80px"></iframe>

JavaScript アクセス フレーム、iframe、および href 方向

一.フレーム

1．親フレームから子フレームへの参照

上記の原則を知っていると、親フレームから子フレームを参照するのは非常に簡単です。

window.frames["frameName"];

これは、ページ内のframeNameという名前のサブフレームを参照します。サブフレーム内のサブフレームを参照したい場合は、参照されるフレーム (実際にはウィンドウ オブジェクト) の性質に従って、次のように実装できます:

window.frames["frameName"].frames["frameName2"];

このようにして、第 2 レベルのサブフレームが参照され、同様に、多層フレームワークの参照を実現できます。

2．子フレームから親フレームへの参照

各ウィンドウ オブジェクトには、その親フレームを表すparent属性があります。フレームがすでにトップレベルのフレームである場合、window.parent はフレーム自体も表します。

3．兄弟フレームワーク間の参照

2 つのフレームが同じフレームのサブフレームである場合、それらは兄弟フレームと呼ばれ、親フレームを通じて相互に参照できます。たとえば、ページには 2 つのサブフレームが含まれます。

<frameset rows=”50%,50%”>
  <frame src=”1.html” name=”frame1″ />
  <frame src=”2.html” name=”frame2″ />
</frameset>

フレーム 1 で次のステートメントを使用して、フレーム 2 を参照できます:

self.parent.frames["frame2"];

4．異なるレベルのフレームワーク間の相互参照

フレームの階層はトップレベルのフレームのものです。レベルが異なる場合、現在のレベルと他のフレームのレベルと名前がわかっていれば、フレームによって参照されるウィンドウ オブジェクトのプロパティを使用して相互に簡単にアクセスできます。たとえば、

self.parent.frames["childName"].frames["targetFrameName"];

5．最上位フレームへの参照

parent 属性と同様に、window オブジェクトにも top 属性があります。これはトップレベルのフレームへの参照を表し、フレーム自体がトップレベルのフレームであるかどうかを判断するために使用できます。たとえば、

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

//このフレームがトップレベルのフレームかどうかを判断します
if(self==top){
//何かをする
}

つまり

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

if (window.top!=window.self) {
// 何かをします
}

フレームの読み込みページを変更します

フレームへの参照は、ウィンドウ オブジェクトへの参照です。たとえば、ウィンドウ オブジェクトの location 属性を使用して、フレームのナビゲーションを変更できます。

window.frames[0].location = "1.html";

他のフレームワークの JavaScript 変数と関数を参照する

他のフレームワークで JavaScript の変数と関数を参照する手法を紹介する前に、次のコードを見てみましょう:

<script language=”JavaScript” type=”text/javascript”>
<!–
function hello(){
  alert(“hello,ajax!”);
}
window.hello();
//–>
</script>

2.iframe

厳密に言えば、frame 配列と document.all を使用する必要があります。

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

三.href

1. リンクの onclick イベントが最初に実行され、続いて href 属性のアクション (ページ ジャンプ、または JavaScript 疑似リンク) が実行されます。 2. href と onclick の両方がリンクに存在すると仮定します。href 属性のアクションを実行しないようにするには、onclick が false の戻り値を取得する必要があります。信じられない場合は、goGoogle 関数

の return false をコメントアウトしてください。 3. ページが長すぎてスクロール バーがあり、リンクの onclick イベントを通じて操作を実行したい場合。その href 属性は # ではなく javascript:void(0); に設定する必要があります。これにより、不必要なページジャンプを防ぐことができます。 4. 戻り値を持つ関数がリンクの href 属性で呼び出された場合、現在のページのコンテンツはこの関数の戻り値に置き換えられます。 5. Shiftキーを押したままにすると違いが生じます。

6. 今日遭遇した問題は、IE6.0 では、parentNode に href 形式でアクセスできないことです。
7. A の href 属性として javascript:protocol を使用しないようにしてください。これにより、window.onbeforeunload イベントが不必要にトリガーされるだけでなく、IE での GIF アニメーション画像の再生が停止します。

例:

パスワードの変更

フレームの高さを調整します

コードをコピー

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

window.onload = function() {
 parent.document.getElementById('customiframe').style.height = document.body.clientHeight "px";
}