在iframe上使用父文档中的javascript (以及jQuery和其他库)，并提供几个源代码

Question

大家好。

我正在做一个项目，其中有一个应用程序，它的一个视图是用iframe实现的，当用户点击一些“父”文档时，iframe src就会改变。所以基本上总是有相同的容器，但是iframe的内容会根据用户的选择而改变。假设会有这样的情况：

parent.html (将拥有所有的js逻辑)

child1.html

child2.html

..。

每个“子”页面将是没有(或很少) javascript的html页面。我想要得到的是，当用户到达子1.html时，只会执行对每个孩子都是全局的代码，当然还有与该页面相关的代码。假设在calls 1.html上，必须执行几个ajax调用，然后执行一些js来处理表，诸如此类的事情。而在孩子2.html上，将有一些表单具有自己的验证，并有另一个ajax调用来发送表单(显示在孩子1.html上)。

在parent.html上会有一个很大的js库，其中包含每个子页面的js代码，所以我想要的是一种“知道”我在哪个页面并且只执行与该页面相关的那部分代码的方法。

结构应该类似于：

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!
});

我希望已经明确了我想要获得的东西：

一个父页面，包含childs中使用的所有js，按需执行，或者具有了解我们所在页面的能力。

几个子页面，没有或有非常小的js。

仅供参考，iframe src将由父页面上的js更改，方法是销毁前一个并使用新的源代码添加一个新的iframe。