はじめに、フロントiframeタグを使用します

 

シナリオを使用します。

(1)重複したコンテンツは、いつプレート表示しました

バックエンドは、テンプレートのレンダリング(継承された形で得られたページ)がある場合は#が、機能のページへの直接アクセスを要求するためにはiframeを交換することができます

 

 

iframeタグの役割:

IFRAMEのHTMLタグがネストされたhtmlのメインページのサブページを達成することができ、サブページはインラインフレームを使用して、時には非常に簡単な機能ページ、することができ

それは、フロントエンドのテンプレートのレンダリングの場合は#あなたは(だけのiframe要求で新しいリソースを取得し、コンテンツの送信が少なくなり、メインページが更新されません)少しの帯域幅を節約するためのiframeタグを使用できるように。

 

 

iframeのテンプレートのレンダリングとは対照的。

(1)サブページは、継承の方法によって達成するため、およびHTMLページの機能分割を達成するために

 

悪い場所は:継承によって、テンプレートのレンダリング時間を表し、負荷が継承されたページに移動し、サブページがロードされます、このテンプレートページは、いくつかの役に立たない帯域幅を占めることになるネットワークに送信されます

 

IFRAME使用した後:ページテンプレートのレンダリングを、それが戻ったとき、テンプレートの少ない継承された部分を返します、唯一の機能ページです

 

(2)オーダーのバックエンドユーザポイントに良いメニューをレンダリングするために進めるために、(メインページは複数のメニューを持っている場合があります)メニューの効果をクリックして、ユーザーに新しいページを返さ

 

悪い場所:後端がCPUリソースの一部を食べ​​るようになるように、バックエンドのコーディングの複雑さを増す、あなたは、効果が上のラベルに追加されたかどうかを判断するためにクリックスルーする必要があります

 

インラインフレームを使用した後:フロントエンドはちょうど(コンテンツのみのサブページを変更するには)SRC要求を送信するので、メインページは変更されませんので、メニューは単にはるかに少ないトラブルバックエンドのテンプレートをレンダリングするだろうイベントのフロントエンドを書くことができ、以下とすることができますコンテンツの一部をレンダリング、それはまた、効率を向上させます。

 

IFRAMEこの方法の良い場所よりもテンプレートレンダリング:

(1)のiframeは通常のみ、その後、テンプレートのすべてのページ表示URLが異なるフロントエンドのインタフェース情報を取得するには、別のURLでレンダリングすることができ、この方法ではiframeのURLのみホームページのURLを参照してください可能性があるので、IFRAME機能ページを取得したい場合に動作するURLは、最初の時間は、マウスクリックだけを開くことができ、そのページの機能に要求することができますが、効率は確かにある道は高くはiframeになります

 

 

iframeタグが使用されます。

注意:

(1)下に位置決めjqueryのラベルを使用して書き込まれ、異なるネイティブJSを見つけます。

(2)タリア間の変換を

  jqueryの>>> DOM === $( 'IFRAME')[0]:これが鍵です[0]

  DOM >>> jqueryの=== $(DOMターゲットとタグ付けされました)

 

格式:<IFRAME SRC = '' FRAMEBORDER = '0'> </ iframe>の

 

属性:

SRCの#は、URLのhtmlページのURLを取得します

FRAMEBORDER#は、ディスプレイベゼル枠1の表示が0を示していないかどうかを示します

 

1. iframeのイベントをクリックして書かれたページを取得

ここでは検索ボタンイベントをクリックしてくださいです

#これは、iframeタグ内のシーンがあり、親ウィンドウに切り替えwindow.parent

#もし、外側のiframe直接$( 'IFRAME')。Attrの( 'SRC'、NEW_URL)へ

 

2. IFRAMEは、ページを更新し、フォールバックを書きます

#は、最初のiframeタグを見つけなければならない、それはBOMの実装で動作することができます

(1)リフレッシュiframeタグを達成

$(window.parent.document).find( 'IFRAME')[0] .contentWindow.location.reload()。

 

(2)iframeタグ内のフォールバックを実装

$(window.parent.document).find( 'IFRAME')[0] .contentWindow.history.back()。

 

(3)メインウィンドウの文言を

$( 'IFRAME')[0] .contentWindow.location.reload(真の); 

$( 'IFRAME')[0] .contentWindow.history.back();

 

3.現在のURLはiframeを取得

注:URLがiframe内にサブページを切り替えた場合は、SRC〜第に対する唯一のsrc属性を取ります

$(window.parent.document).find( 'IFRAME')[0] .contentWindow.location.href。

 

4. iframeのメインページとサブページ機能は、お互いを呼び出します

使用シナリオ:

(1)モーダルボックスは、サブページボックスにのみ効果的なモダリティをクリックすると、モーダルサブページを言うことはできませんが、ポップアップ表示します

(2)様々なメッセージボックスが発射を示し、転位、サブページが表示されることができません

 

4.1。iframe内にメインページの内容を呼び出します

。(コールするWindow.parent機能)。

 

書き込みの例:

#親ページ

 

 

 

#iframe内

 

 

 

4.2。インラインフレームコンテンツのメインページ(なしテスト)を呼び出します。

。$( 'Iフレーム')[0] .contentWindow(関数を呼び出します)。

 

おすすめ

転載: www.cnblogs.com/zezhou/p/11517555.html