javascript - 在具有多个源的 iframe 上使用父文档中的 javascript(以及 jQuery 和其他库)

Question

大家好。

我正在开发一个项目，其中有一个应用程序，其 View 之一是使用 iframe 实现的，当用户单击某些“父”文档时，iframe src 会发生更改。所以基本上总是有相同的容器，但 iframe 的内容会根据用户的选择而改变。 假设会有:

parent.html(其中包含所有 js 逻辑)

child1.html

child2.html

...

每个“子”页面都是一个没有(或很少)javascript 的 html 页面。我想要获得的是，当用户到达 child1.html 时，仅执行每个子级的全局代码，当然还有与该页面相关的代码。 假设在 child1.html 上必须执行几个 ajax 调用，然后执行一些处理表的 js 以及类似的事情。而在 child2.html 上，会有一些带有自己验证的表单，以及另一个 ajax 调用来发送表单(显示在 child1.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!
});

我希望已经清楚我想要获得什么:

父页面，其中包含子页面中使用的所有 js，按需执行或能够了解我们所在的页面。

几个子页面没有或只有很少的js。

仅供引用，iframe src 将由父页面上的 js 进行更改，方法是销毁前一个 iframe 并使用新源添加新的 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，或者(如果确实需要)每次都为加载事件分配一个事件处理程序。如果您从不破坏 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();
    }
});

显然，将选择器 #iframeId 替换为可以找到您的 iframe 的内容。

简而言之，您创建一个数组来保存每个子页面文件名(以 / 为前缀，这样您就不会在以相同内容结尾但不是同一页面的页面上运行脚本)，以及您想要在该页面加载时执行的函数。然后，您可以在每次加载 iframe 时解析该数组并执行所有关联的函数。实际上，每个子页面只有 1 个 init 函数，但该代码将处理多个实例。