如何查看window.length对应的frames/iframes名称列表？

我完全懂你遇到的困扰——在包含大量frames的项目里，光知道window.length能返回子浏览上下文数量远远不够，想通过名称精准定位某个frame（比如window.parent.frames["foo"]）却找不到名称列表，直接在DevTools里展开window对象也看不到明确的名称字段，确实有点头疼。

下面给你几个实用的方法来获取完整的frames名称列表：

方法一：通过控制台遍历Frames集合直接打印名称 #

这是最直接的方式，在浏览器开发者工具的Console面板中运行以下代码，就能列出所有frames的名称和对应URL（URL能帮你区分同名或未命名的frame）：

// 遍历当前窗口的所有子frames
for (let i = 0; i < window.frames.length; i++) {
  const currentFrame = window.frames[i];
  console.log(`Frame 索引 ${i}: 名称 = "${currentFrame.name}", 地址 = "${currentFrame.location.href}"`);
}

// 如果要查看父窗口的frames，替换成这段
for (let i = 0; i < window.parent.frames.length; i++) {
  const parentFrame = window.parent.frames[i];
  console.log(`父窗口 Frame 索引 ${i}: 名称 = "${parentFrame.name}", 地址 = "${parentFrame.location.href}"`);
}

运行后你就能在控制台清晰看到每个frame的名称，直接复制就能用window.frames["名称"]来引用了。

方法二：从Elements面板查看Iframe元素的Name属性 #

每个iframe元素本身就带有name属性，对应window.frames集合中的键值。你可以：

1. 打开DevTools的Elements面板
2. 按Ctrl+F（Windows）或Cmd+F（Mac）搜索iframe
3. 逐个查看每个iframe标签的name属性值

如果想批量获取，也可以在Console面板运行这段代码：

// 获取页面所有iframe元素，打印元素的name和对应frame对象的name
document.querySelectorAll('iframe').forEach((iframeElement, index) => {
  console.log(`Iframe 索引 ${index}: 元素name = "${iframeElement.name}", Frame对象name = "${iframeElement.contentWindow.name}"`);
});

注：如果frame的name是动态设置的，iframeElement.contentWindow.name会比元素本身的name属性更准确。

方法三：处理未命名的Frames #

有些frames可能没有设置name属性，这时候无法通过名称引用，但你可以通过索引（比如window.frames[0]）访问。遍历的时候这类frame的name会是空字符串，控制台会清晰显示出来，你可以根据URL来识别它们。

注意：跨域Frames的限制 #

如果某个frame和当前页面不同源，由于浏览器的同源策略，你无法访问它的name或location.href属性（控制台会抛出跨域错误）。这种情况下，你只能通过Elements面板查看iframe元素的name属性，或者检查项目代码中iframe的定义来获取名称。

内容的提问来源于stack exchange，提问作者Atom999