JS_javascriptスキルにおけるFRAME操作問題の分析例

この記事の例では、JS での FRAME の操作について説明しており、参考のために全員と共有されています。具体的な分析は次のとおりです。

上図は一例で、フレーム間の相互操作を簡単に列挙すると、 1. 変数 2. メソッド 3. ページ間の要素の相互取得。

1. まず親(frameABC)----->子(frameA,frameB,frameC)から開始します

①変数名nameにアクセス

frameABC で操作する場合は、次のことができます。

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

window.frames("frameA").contentWindow.name

または

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

document.getElementById("frameA").contentWindow。名前

または

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

jquery: window.$("#frameA") [0] .contentWindow.name

② アクセスメソッド func

frameABC で操作する場合、次のことができます。

コードをコピー コードは次のとおりです。

window.frames("frameA").contentWindow.func();

または

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

document.getElementById("frameA").contentWindow。 func() ;

または

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

jquery: window.$("#frameA") [0] .contentWindow.func();

③ サブページ要素にアクセスします: ユーザー名

frameABC で操作する場合、次のことができます。

コードをコピー コードは次のとおりです。window.frames("frameA").contentWindow.document.getElementById( "ユーザー名" );

または

コードをコピーします コードは次のとおりです:document.getElementById("frameA").contentWindow。 document.getElementById ("ユーザー名");

または

コードをコピーします コードは次のとおりです:jquery: window.$("#frameA") [0] .contentWindow.$("#ユーザー名");

2. 次に、子 (frameA、frameB、frameC)-----------> から親 (frameABC)

① 親ページの変数名にアクセスします。frameA (サブページ) で操作すると、次のことができます。

コードをコピー コードは次のとおりです:window.parent.name;

② 親ページのメソッド関数にアクセスします。frameA (サブページ) で操作すると、次のことができます。

コードをコピー

コードは次のとおりです:window.parent.func();

③ 親ページ要素のユーザー名にアクセスします。frameA (サブページ) で操作すると、次のことができます。

コードをコピー

コードは次のとおりです:window.parent.$("#username") または:

コードをコピー

コードは次のとおりです: window.parent.document.getElementById("username ");

概要:

フレームは単なるページフレームです。サブフレーム内の要素を操作したい場合は、最初にウィンドウまたは contentWindow に入る必要があります。子ページから親ページにアクセスするには、親子関係を計算し、いくつかの階層に分ける必要があります。

ページ読み込みの問題に関するオンラインの他の投稿を読みました。おそらく、サブフレーム ページがロードされる前に要素を操作するとバグが発生する可能性があることを意味します。興味のある友人は、対象を絞った方法でテストでき、新たなメリットがあると思います。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。