使用 iframe 上父文档中的 javascript（以及 jQuery 和其他库）和多个来源

Posted 2023-05-09

【中文标题】使用 iframe 上父文档中的 javascript（以及 jQuery 和其他库）和多个来源

【英文标题】：Use javascript (and jQuery and other libs) from parent document on iframe with several sources

【发布时间】：2017-05-06 15:52:20

【问题描述】：

大家好。

我正在处理一个项目，其中有一个应用程序的其中一个视图使用 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。

【问题讨论】：

您是否尝试在正在加载的页面上添加 javascript 代码？

我实际上处于评估阶段，我正在尝试弄清楚如何组织它，因为子页面会很多。

此刻我正在研究如何在父级上“包装”js函数，所以从子级我只能调用我需要的部分。

好吧，既然你想做到最好，你只需要在子页面中使用

不，这些页面上必须有 NO 或 VERY LITTLE js，这是强制性的。

【参考方案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 函数，但该代码将处理多个实例。

【讨论】：

这看起来很不错，我会朝这个方向挖掘更多，谢谢@Archer

没问题。希望它至少可以为您指明一个可行的方向，如果不能解决问题的话。