Question

我们逐步实现Web 1.0 Web应用程序的现代化。

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

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

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

大部分工作都可以。大部分时间在JavaScript中，第一个创建的iframe为window.frames[0]，第二个创建的iframe为window.frames[1]。

但有时候，首先创建的iframe最终会在window.frames[1]和。{ 在第一个结束后在命令中创建的iframe window.frames[0]。

这混合了洞穴应用程序，因为 - 正如我之前提到的那样 - window.frames[0]必须是顶级iframe。

我们无法将引用从索引更改为id，这将非常耗时。

我们必须 - 以某种方式 - 保证，＆＃34; top＆＃34; iframe始终为window.frames[0]。

由于

编辑：

谢谢 - 安德里 - 发表你的帖子。

Web应用程序非常庞大。它始于2001年。令人疲惫的工作是找到所有window.frames[x]个位置，改变它并希望没有其他休息。

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

我很乐意不将所有这些引用从index更改为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;

所以在窗口框架“array”中修改了iframe的顺序之后，我可以分配id。

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

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

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

2 个答案:

定位iframe

引用iframe