如何保证iframe在window.frames中的顺序

Question

我们将逐步改进Web 1.0 Web应用程序。

旧的应用程序是框架应用程序（3个框架-顶部，菜单和主框架）。
这些框架是在frameset集中静态定义的。
在整个应用程序中，顶部由window.frames中的索引0引用，菜单由索引1引用，主菜单由索引2引用。
一切都很好。

现在，我们进行了第一个更改。
我们重新设计了应用程序的开始，并从框架更改为iframe。
现在，我们在JavaScript中动态创建这3个iframe（使用$("..."); ）。

我们在2周前部署了更改。

大多数事情都可以。 在JavaScript中，大多数时候，第一个创建的iframe是window.frames[0] ，第二个创建的iframe是window.frames[1] 。

但是有时，首先创建的iframe会以window.frames[1]结尾，而在命令中创建的iframe会以window.frames[0]结尾。

这混淆了Hole应用程序，因为-正如我之前提到的window.frames[0]必须是顶部的iframe 。

我们不能将引用从索引更改为id，这将很耗时。

我们必须以某种方式保证“顶部” iframe始终是window.frames[0] 。

谢谢

编辑：

谢谢您-Andry-您的帖子。

Web应用程序非常大。 它于2001年开始。艰巨的工作是找到所有window.frames[x]位置，进行更改，并希望别的中断。

我想尽可能少地更改（不要更改正在运行的系统）。

我很乐意不将所有这些引用从索引更改为id。

最好和最简单的方法是首先保证帧的顺序。

Answer 1

我不知道您的问题是最终呈现的结果（您的帧位于错误的位置）还是识别问题（您希望顶部iframe处于0位置并且引用了错误的位置）。 因此，这里有两个可能的解决方案。

定位iframe

如果您的问题是确保正确地定位了这些iframe ，那么在创建时，最好确保生成这些元素时的顺序：

var frame1 = document.createElement('iframe');
// <...> Logic to add/remove attributes or style to frame1
var frame2 = document.createElement('iframe');
// <...> Logic to add/remove attributes or style to frame2
var frame3 = document.createElement('iframe');
// <...> Logic to add/remove attributes or style to frame3

// Assuming you want to add them in the body
document.body.appendChild(frame1);
document.body.appendChild(frame2);
document.body.appendChild(frame3);

除非您按照这些元素的顺序使用一些怪异的CSS样式（例如flex），否则很好！

引用iframe

创建它们时，只需在这些元素上使用id：

var frame1 = document.createElement('iframe');
frame1.id = 'f0';
var frame2 = document.createElement('iframe');
frame2.id = 'f1';
var frame3 = document.createElement('iframe');
frame3.id = 'f2';

// Assuming you want to add them in the body
document.body.appendChild(frame1);
document.body.appendChild(frame2);
document.body.appendChild(frame3);

// Helper function to retrieve your iframes
var getFrame = function(index) {
  document.getElementById('f' + index);
};

因此，您现在可以使用：

var top = getFrame(0); // Since the top iframe has index 0
var middle = getFrame(1); // Since the top iframe has index 1
var bottom = getFrame(2); // Since the top iframe has index 2

我希望应该没事！

Answer 2

我找到了解决方案。

在此之前，我在一处创建并分配属性：

 myiframe1 = $('<iframe />');
 myiframe1.attr("...", "...");
 myiframe1.attr("...", "...");

 myiframe2 = $('<iframe />');
 myiframe2.attr("...", "...");

现在，我将更改此设置。 首先，我只会创建iframe广告代码。

iframe = $('<iframe />');
iframe.appendTo("body");
iframe = $('<iframe />');
iframe.appendTo("body");
iframe = $('<iframe />');
iframe.appendTo("body");

此后，当iframe位于window.frames数组中时，我将根据需要为其分配其他属性。

myiframe1 = window.frames[0].frameElement;
myiframe2 = window.frames[1].frameElement;
myiframe3 = window.frames[2].frameElement;

因此，在将iframe的顺序固定在窗口框架“数组”中之后，我可以分配ID。

 myiframe1.attr("id", "top");
 myiframe1.attr("src", ".../cgi-bin/top");

 myiframe2.attr("id", "menu");
 myiframe2.attr("src", ".../cgi-bin/menu");