フロントエンドを開発しているバックエンド担当者が遭遇した問題をiframeに記録します

転載ブログ：https：//www.cnblogs.com/Capricorn-HCL/articles/4216302.html

jquery操作iframe：https：//www.jb51.net/article/123314.htm

iframeの子ページと親ページの要素へのアクセスとjs変数へのアクセス

1.子ページは親ページ要素にアクセスします

parent.document.getElementById('id')和document相关的方法都可以这样用

2.親ページは子ページ要素にアクセスします

document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用document相关方法 
var tet = document.getElementById('iframeId').contentWindow.document.getElementById("text_inputId");

alert(tet.value);

3.子ページは親ページのjs変数にアクセスします（注：親ページのjs変数はグローバル変数である必要があります）

子页面var variable = parent.variableParent   (variableParent为父页面定义的变量)

4.親ページは子ページのjs変数にアクセスします

这部分目前的解决方案是在父页面设置全局变量，在子页面进行修改后将子页面的变量赋值给父页面

5.子ページは親ページのjsメソッドにアクセスします

window.parent.paramMethod();

6、子ページのjsメソッドへの親ページのアクセス

document.getElementById('iframeId').contentWindow.iframeMethod(param);

iframe内のページは親ウィンドウを呼び出し、左右のウィンドウのjs関数メソッドは
、iframe内のページがiframeが属する親ウィンドウのカスタム関数を直接呼び出すメソッドを実装します。
たとえば、ウィンドウAがあり、AにIFRAME Bがあり、CページがBに読み込まれます。このとき、CはAのカスタム関数AFUN（）を直接呼び出す必要があります。
次に、次のJS関数を記述します。Cページ： Window.parent.AFUN
（）;
AFUN（）にパラメーターがある場合は、適切なパラメーターを直接渡すこともできます。
例：
親ウィンドウコントロール
window.parent.document.getElementById（ 'frmright'）。src = window.parent.document.getElementById（ 'frmrightsrc'）。valueのプロパティを変更します;
親ウィンドウ関数
window.parentを呼び出します。 POPUP（ 'bigFram'）;

親ウィンドウはiframe子ウィンドウメソッドを呼び出します
<iframename = "myFrame" src = "child.html"> </ iframe>
myFrame.window.functionName（）;
iframe子ウィンドウは親ウィンドウメソッド
parent.functionName（）を呼び出します ;

jsを使用して、iframeページでお互いのjs関数を呼び出します。html
ページは2つの部分に分かれており、左側がナビゲーションバー、右側が表示する必要のあるコンテンツです。コードは次のとおりです
。左側の列は次のとおりです。
<IFRAMEframeBorder = 0 id = frmTitleLeft name = framLeft src = "left.html" style = "HEIGHT：100％; width：180px;">
left.htmlに接続します。たとえば
、関数があります。右の列のright（）、左の列のリンクでright（）を呼び出したい関数、その実装方法
1.最初に、leftframeがコンテナページindex.htmlに埋め込まれているので、に戻る必要があります。最初にインデックスレベルを取得し、rightframeオブジェクトを取得します
var frame = window.parent.window.document.getElementById（ "frameid"）;
2.ページ内の関数を実行できるようにするには、ウィンドウオブジェクトを取得する必要があります。重要なオブジェクト、contentWindow。このオブジェクトを取得すると、
frames.contentWindow.right（）などの関数を実行できます
。上記のコードはIE6、Firefox3、およびchrome2.0と互換性があり、すべてテストに合格しています。。IE7は試していませんが、問題ないはずです。
3.例：
window.parent.document.getElementById（ 'leftFrame'）。contentWindow.JSMenu（ 'MenuUl' + Sid）;
window.parent.frames ["leftFrame"]。JSMenu（ 'MenuUl' + Sid）;

テストされていない次のものがあります

通常とは異なりますiframeName.test（）;-test（）はiframeのメソッドです。もっと一般的なことを書きたいので、構成ファイルから動的にiframeのIDを取得します。次に、内部のメソッドを呼び出します。しかし、それは失敗しました。襄陽は見てみるのを手伝ってくれます。コードは次のとおりです。
<iframeid = "iframe1"> </ iframe>

var cs = document.all;
            for（var i = 0; i <cs.length; i ++）{
                    if（cs.tagName.toUpperCase（） == "IFRAME"）{
                            if（cs.id == "iframe1"）{
                                    alert（frmDealData）;
                                    alert（cs）;
                                    document.frames.iframe1.setScreenletStatus（iframeLayoutLvl）;
                                    document.frames.cs.setScreenletStatus（iframeLayoutLvl） ;
                            }
                    }
            }
最初の呼び出しは成功します。
しかし、2番目の文は成功しませんでした。
csオブジェクトしか取得できない場合、iframeでメソッドを呼び出す方法は？ありがとうございました

------------------------------------
idを使用せず、name
window.frames [cs]を使用します .fun（）

マルチウィンドウ操作

Webページはiframe要素を使用して他のWebページを埋め込むことができるため、Webページに複数のウィンドウが形成されます。別のWebページが子ウィンドウに埋め込まれている場合、マルチレベルウィンドウが形成されます。

ウィンドウリファレンス

各ウィンドウのスクリプトは、他のウィンドウを参照できます。ブラウザには、他のウィンドウに戻るための特別な変数がいくつか用意されています。

top：トップレベルウィンドウ、つまりトップレベルウィンドウ
parent：親ウィンドウ
self：それ自体である現在のウィンドウ

次のコードは、現在のウィンドウがトップレベルウィンドウであるかどうかを判別できます。

if (window.top === window.self) {
  // 当前窗口是顶层窗口
} else {
  // 当前窗口是子窗口
}

次のコードは、親ウィンドウの訪問履歴を1回巻き戻します。

window.parent.history.back();

これらの変数に対応して、ブラウザーは、window.open()メソッド、<a>タグ、および<form>タグで参照するためのいくつかの特別なウィンドウ名も提供します。

_top：トップレベルウィンドウ
_parent：親ウィンドウ
_blank：新しい窓

次のコードは、トップレベルウィンドウでリンクを開くことを意味します。

<a href="somepage.html" target="_top">Link</a>

iframe要素

以下のためにiframe埋め込まれたウィンドウ、document.getElementByIdこの方法は、ウィンドウのDOMノードを取得した後、使用することができますcontentWindow取得する属性をオブジェクトがiframeノードに含まれていますwindow。

var frame = document.getElementById('theFrame');
var frameWindow = frame.contentWindow;

上記のコードでは、frame.contentWindow子ウィンドウのwindowオブジェクトを取得できます。次に、相同性の制限が満たされると、子ウィンドウ内の属性を読み取ることができます。

// 获取子窗口的标题
frameWindow.title

<iframe>要素のcontentDocument属性はdocument、子ウィンドウのオブジェクトから取得できます。

var frame = document.getElementById('theFrame');
var frameDoc = frame.contentDocument;

// 等同于
var frameDoc = frame.contentWindow.document;

<iframe>要素は同一生成元ポリシーに準拠しています。親ウィンドウと子ウィンドウが同じドメインにある場合にのみ、2つはスクリプトと通信できますwindow.postMessage。それ以外の場合は、メソッドのみが使用されます。

<iframe>ウィンドウ内で、window.parent親ウィンドウへの参照を使用します。現在のページに親ウィンドウがない場合、window.parentプロパティはそれ自体を返します。したがって、現在のウィンドウwindow.parentがに等しいかどうかによってwindow.self、現在のウィンドウがウィンドウであるかどうかを判断できますiframe。

if (window.parent !== window.self) {
  // 当前窗口是子窗口
}

<iframe>ウィンドウwindowオブジェクトには、親ウィンドウのDOMノードframeElementを返す属性があります<iframe>。埋め込まれていないウィンドウの場合、このプロパティはに等しくなりnullます。

var f1Element = document.getElementById('f1');
var f1Window = f1Element.contentWindow;

f1Window.frameElement === f1Element // true
window.frameElement === null // true

window.framesプロパティ

window.framesプロパティは配列のようなオブジェクトを返し、メンバーはすべての子ウィンドウのオブジェクトですwindow。この属性を使用して、ウィンドウ間の相互参照を実現できます。たとえばframes[0]、最初の子ウィンドウにframes[1].frames[2]戻り、2番目の子ウィンドウ内の3番目の子ウィンドウにparent.frames[1]戻り、親ウィンドウの2番目の子ウィンドウに戻ります。

window.frames各メンバーの値は、フレーム内のウィンドウ（つまり、フレームのwindowオブジェクト）でありiframe、親ウィンドウでラベル付けされたDOMノードではないことに注意してください。各フレーム内にDOMツリーを取得する場合window.frames[0].documentは、文言を使用する必要があります。

さらに、<iframe>要素にnameorid属性が設定されている場合、属性値は自動的にグローバル変数になり、window.frames子ウィンドウのwindowオブジェクトは属性参照を介して返すことができます。

// HTML 代码为 <iframe id="myFrame">
window.myFrame // [HTMLIFrameElement]
frames.myframe === myFrame // true

さらに、nameプロパティの値が自動的に使用可能な子ウィンドウの名前になりますwindow.open二番目のパラメータ、または方法<a>および<frame>ラベルtarget属性。

iframeの問題

iframeの子ページと親ページの要素へのアクセスとjs変数へのアクセス

マルチウィンドウ操作

ウィンドウリファレンス

iframe要素

window.framesプロパティ

おすすめ