3つの方法でgetElementById

私は隠れた入力フォームフィールドから値を取得する必要があるアプリケーションを持っています。しかし、このアプリケーションは、iFrameにある別のページを呼び出す基本ページを持っており、次に別のiFrame内で自分自身を呼び出すこともできます。3つの方法でgetElementById

default.asp - > screen.asp（iFrame内） screen.asp - > Iデフォルトから隠し入力フォームフィールドを参照する場合

document.getElementById('focusValue').value 
window.frames[0].document.getElementById('focusValue').value 
parent.frames[arrVal].document.getElementById('focusValue').value

（iframe内）screen.aspの新しいインスタンスは、 - >画面Iは、標準document.getElementById('focusValue').value;を使用することができます。私が第1レベルのiFrameにいるとき、私はwindow.frames[0].document.getElementById('focusValue').value;を使用しなければなりません。その後、私がiFrameの2つ以上のレベルにいるときは、私はparent.frames[arrVal].document.getElementById('focusValue').value;を使用する必要があります。私が見始めている

共通の構造はこれです：

if(document.getElementById('focusValue') == undefined){ 
     window.frames[0].document.getElementById('focusValue').value = focusValue; 
     console.log('1'); 
}else if((parent.frames.length -1) == arrVal){ 
     console.log('2'); 
     if (arrVal > 0) { 
      parent.frames[arrVal].document.getElementById('focusValue').value = focusValue; 
     } 
}else{ 
    document.getElementById('focusValue').value = focusValue; 
    console.log('3'); 
}

今、私は確かにこれを行うことができますが、コメントの新規の価値を書くの外に、私は他のプログラマと心配です（または、私1このコードを見て、私が何をやっているのか疑問に思いました。

私の質問は、私が標準的な形でやろうとしていることを達成する方法ですか？私は本当にこれを達成するより良い方法があることを望んでいます。

出典

2011-11-14 webdad3

これが発明された理由です。あなたがやっていることを文書化する。 – Gerben

メソッドを呼び出すことで、各ページに必要な値を見つける作業をさせることをお勧めします。基本的に参照インターフェイスを公開します。次に、親ページからターゲットページのメソッドを呼び出すだけです。適切なネーミングは、開発者が何が起こっているのかを理解するのに役立ち、メソッドを使用するとロジックが単純化されます。

親ページから値を取得する必要がある場合は、共通インターフェイスを使用してiframeの各ページにフックを登録できます。各ページは値を取得するためにそのフックを呼び出すことができます。これにより、ページのレベルを決定する複雑なロジックが回避されます。

iframe1.GetValueHook = this.GetValue; 
iframe2.GetValueHook = this.GetValue;

のようなものは、次に、各ページには、ちょうどあなたがページを入れ子にしている場合は、この再帰を作ることができる

var x = this.GetValueHook();

を呼び出すことができます。すべてのページ間で通信が必要な場合は、同じ方法を使用しますが、登録プロセスを使用します。各ページはそれ自身を（それはその子である）それを親と登録します。しかし、これを行う必要がある場合は、アーキテクチャを再評価する必要があります。

例： register.js

var __FRAMENAME = "Frame1"; 
var __FIELDID = "fieldId"; 
var __frames = []; 

function RegisterFrame(frame) { 
    __frames.push(frame); 

    for (var i = 0; i < frame.children.length; i++) { 
     __frames.push(frame.children[i]); 
    } 

    RegisterWithParent(); 
} 

function RegisterWithParent() { 

    var reg = { 
     name: __FRAMENAME, 
     getvalue: GetFieldValue, 
     children: __frames 
    }; 

    if(parent != undefined && parent != this) { 
     parent.RegisterFrame(reg); 
    } 
} 

function SetupFrame(name, fieldId) { 
    __FRAMENAME = name; 
    __FIELDID = fieldId; 

    RegisterWithParent(); 
} 

function GetFieldValue() { 
    return document.getElementById(__FIELDID).value; 
} 

function GetValueFrom(name) { 
    for (var i = 0; i < __frames.length; i++) { 
     if (__frames[i].name == name) { 
      return __frames[i].getvalue(); 
     } 
    } 

}

index.htmlを

<html> 
<head> 
<script language="javascript" type="text/javascript" src="register.js"></script> 
</head> 
<body> 

PAGE 

<input type="hidden" id="hid123" value="123" /> 
<iframe id="frame1" src="frame1.html"></iframe> 
<iframe id="frame2" src="frame2.html"></iframe> 
<script type="text/javascript"> 
    SetupFrame("Index", "hid123"); 

    setTimeout(function() { //Only here for demonstration. Make sure the pages are registred 
     alert(GetValueFrom("frame3")); 
    }, 2000); 
</script> 
</body></html>

フレーム1。HTML

<html> 
<head> 
<script language="javascript" type="text/javascript" src="register.js"></script> 
</head> 
<body> 
<input type="hidden" id="hid" value="eterert" /> 
<script type="text/javascript"> 
    SetupFrame("frame1", "hid"); 
</script> 
</body></html>

frame2.html

<html> 
<head> 
<script language="javascript" type="text/javascript" src="register.js"></script> 
</head> 
<body> 
<input type="hidden" id="hid456" value="sdfsdf" /> 
<iframe id="frame2" src="frame3.html"></iframe> 
<script type="text/javascript"> 
    SetupFrame("frame2", "hid456"); 
</script> 
</body></html>

frame3.html

<html> 
<head> 
<script language="javascript" type="text/javascript" src="register.js"></script> 
</head> 
<body> 
<input type="hidden" id="hid999" value="bnmbnmbnm" /> 
<script type="text/javascript"> 
    SetupFrame("frame3", "hid999"); 
</script> 
</body></html>

あなたは辞書/ハッシュtbaleを使用するようにそれを変えることができるなら、これは良いだろうループの代わりに。

出典

2011-11-14 18:54:34 ILovePaperTowels

私はGetValueHookプロパティを使用したことがありません。それを説明するリンクはありますか？ iFrameが再帰的であっても（同じページだが、別の要素IDが与えられている）、これは動作しますか？ – webdad3

これはプロパティではなく、スクリプトによって宣言されたグローバル関数ポインタです。私はデモを書いて投稿します – ILovePaperTowels

@jeffコードサンプルを含めるように答えを更新しました。 – ILovePaperTowels

実際に特定の要素のフレームを検索する必要がある場合は、それを行う独自の関数を作成し、その関数をどこでも使用する必要があります。なぜ/あなたが何をやっているのかを説明して関数に意味のある名前を付ける関数に多くのコメントを入れてください。あなたのコードを見ている将来のプログラマーにとって、あなたがしていること、やって

function setValueByIdFrames(name) { 
    if(document.getElementById(name) == undefined){ 
     window.frames[0].document.getElementById(name).value = name; 
     console.log('1'); 
    } else if((parent.frames.length -1) == arrVal){ 
     console.log('2'); 
     if (arrVal > 0) { 
      parent.frames[arrVal].document.getElementById(name).value = name; 
     } 
    } else { 
     document.getElementById(name).value = name; 
     console.log('3'); 
    } 
}

出典

2011-11-14 18:51:19 jfriend00

これはまだ複雑で脆いロジックを必要とすることを除いて私は同意します。 – ILovePaperTowels

@ILovePaperTowels - 必要なオブジェクトの位置が（フレームの中で）事前にわからない場合は、複雑で脆いアプリケーションの設計です。これが最善の方法です。明らかに、アプリケーションの設計を修正して、特定のオブジェクトを見つけるために複数のフレームを検索する必要がないようにする方がはるかに良いでしょう。 – jfriend00

@ jfriend00 - これはおそらく、この問題が全体的に問題を解決する正しい解決策であることに同意しますが、このコードは数年前の巨大な.jsファイルの中に埋め込まれています。あなたが提案したことを実行すると、私の意見では、おそらく他の問題が道路につながる（つまり、何かを変えることは1つの場所であり、もう1つは変わらない）コードの重複が必要になります。私は確かにアーキテクチャについてのあなたのポイントを参照してください。 – webdad3

あなたの最善の策は、正しく命名されたvarablesを設定することです。このようなもの...

var screenFrame = window.frames[0]; 
var screenFrame2 = parent.frames[arrVal]; 

var value = screenFrame2.document.getElementById('focusValue').value

これにより、読みやすくなります。

出典

2011-11-14 18:56:00 JTWebMan

私はあなたがそれをどこに行っているのかを見ていますが、残念ながら最大7つのレイヤーがあります！私は知っている、それは醜いですが、それは私が対処しているものです。 – webdad3

@ JeffVもう1つのページにすべてを残しておくと、必要なフレームを返す機能を作成することができます。 7つのネストされたiframeは多くのもので、すぐに再設計する必要があります。 – JTWebMan

答えて

関連する問題