複数のソースを持つiframeの親ドキュメントのjavascript（とjQueryなどのライブラリ）を使用してください。

Question

おはようございます。

私は、ビューの1つがiframeで実装されているアプリケーションがあり、iframe srcは「親」ドキュメントのいくつかをクリックすると変更されます。基本的には常に同じコンテナがありますが、iframeの内容はユーザーの選択に応じて変更されます。 のがあるだろうと言ってみましょう：

各...（すべてのjsロジックを持つことになります）

parent.html

child1.html

child2.html

「子」ページは、（ほとんど、あるいはまったく）JavaScriptを持たないhtmlページになります。私が得たいのは、ユーザーがchild1.htmlに到着すると、すべての子にグローバルなコードだけが実行され、もちろんそのページに関連するコードも実行されるということです。 child1.htmlでは、いくつかのajax呼び出しを実行してから、テーブルを処理するjsやそのようなものを実行する必要があるとします。 child2.htmlには、独自のバリデーションがあるフォームと、フォームを送信する別のajaxコール（child1.htmlに表示されます）があります。

parent.htmlには、すべての子ページのjsコードを含む大きなjsライブラリがあるので、私が持っていると思うのは、私がどのページに「知って」いるのか、そのページに関連するコードの部分。唯一のコードを実行する可能性childpages上

var myGlobalObject = {username:undefined,foo:1} 

if(childpage1.html){ 
    if (myGlobalObject.username == undefined){ 
    $.ajax(retrieve username); 
    $("#someTableIniFrame",iframeContext).doSomething(); 
    } 
} 
if(childpage2.html){ 
$("body",iframeContext2).on("submit","#someFormOnChild2", function(){ 
    //do something 
}); 
} 

および/または何か...のような：私は何に明らかにされていることを願ってい

document.addEventListener("DOMContentLoaded", function(event) { 
    //execute only my part of the global js! 
}); 

構造は次のようになります私は入手したい：

親ページは、すべてのjsは、オンデマンドで実行されるか、私たちがどのページを理解する能力を持つ子どもに使用される。

いくつかの子ページがありません。

ちょうど情報のため、iframe srcは親ページのjsによって変更されます。前のページを破棄し、新しいiframeに新しいソースを追加します。

Answer 1

すべてのJavascriptを親ページに保持したい場合は、実行したいコードに子ページをマップする方法が本当に必要です。これは何かをすることの長い道のりですが、それ以上の文脈がなければ、より適切な解決法を提案することは困難です。

これを念頭に置いて、問題を解決する方法は次のとおりです。

まず第一に、私は

var childScripts = [{ 
    "src": "childpage1.html", 
    "init": function() { 
     // what to do when childpage1 is loaded 
    } 
}, 
{ 
    "src": "childpage2.html", 
    "init": function() { 
     // what to do when childpage2 is loaded 
    } 
}]; 

でのiFrameにロードしたいすべての時間を破壊し、再作成しないでください...何のスクリプトは、それぞれの子ページに対して実行するように定義するオブジェクトの配列を作成したいです新しいページ、または（実際にする必要がある場合）毎回loadイベントにイベントハンドラを割り当てます。あなたはiFrameを破壊しない場合、これを一度行う必要があります...

$("#iframeId").on("load", function() { 
    var scriptInfo = childScripts.filter(function(childInfo) { 
     return window.location.href.slice(-childInfo.src.length) === childInfo.src; 
    }); 

    for (var i in scriptInfo) { 
     scriptInfo[i].init(); 
    } 
}); 

明らかにあなたはiframeを見つけるだろう何かをセレクタ#iframeIdを交換してください。

つまり、各子ページのファイル名（接頭辞は/であるため、同じもので終わるが同じページではないページでスクリプトを実行しない）と、そのページが読み込まれたときに実行します。その後、iframeがロードされるたびにその配列を解析し、関連するすべての関数を実行します。現実的には、子ページごとに1つのinit関数しか持てませんが、そのコードは複数のインスタンスを処理します。