javascript - Javascript,难以获取页面中所有嵌套框架的列表

标签 javascript jquery html greasemonkey frames

你好,我需要为我的 GreaseMonkey 脚本获取所有帧的列表,但实际上我猜这是一般 Javascript 问题。如果我可以访问嵌套在页面中的每个框架,那就太好了。到目前为止,我在获取嵌套在主文档框架中的框架数量时遇到了问题。

我正在处理的页面由框架集组成,即多级,框架包含其他框架。我已经设法获得有关主文档框架集的顶级框架的信息(在代码 level 1 中),但在这个级别我得到的信息是这些框架的帧计数等于 0,这是不正确的。

我想出了以下代码

$(document).ready(function(){
var frames = window.frames;
var i,j;
var reportText = "level 0 > " + frames.length +"\r\n";

for (i = 0; i < frames.length; i++) {
    var frames2 = frames[i].frames;
    reportText += "level 1 - " + i + " > " + frames[i].name + " - " + frames2.length +"\r\n";

    for (j = 0; j < frames2.length; j++) {
      var frames3 = frames2[j].frames; 
      reportText += "level 2 - " + i + " - " + j + " > "  + frames2[j].name + " - " + frames3.length +"\r\n";
    }
}

alert(reportText);});

所以 level 0 实际上是主要文档框架计数和 level 1 名称或主要文档框架 - 这些东西被正确报告但不是每个框架的数量1 级 框架。我想知道这是因为我的代码出错还是因为子帧没有完全加载。

我尝试从键盘快捷键调用我的代码,毕竟看起来它已完全加载,但这里还有另一个问题,似乎以下代码似乎不适用于仅包含框架集的页面

 (function(){
 document.addEventListener('keydown', function(e) {
 if (e.keyCode == 72 && !e.shiftKey && !e.ctrlKey && e.altKey && !e.metaKey) {
 
 //...my previous code inside document.ready...
 
   }
 }, false);})();

最好是代码自动梳理所有帧和子帧,但其当前形状(每个级别都有自己的循环)也很好。

无法使用快捷键的问题是次要的。 主要是获取主文档框架内及其他框架的正确计数。

编辑:示例输出和带有嵌套框架集的我的测试页

输出

level 0 > 3

level 1 - 0 > main1 - 0

level 1 - 1 > main2 - 0

level 1 - 2 > main3 - 0

带有嵌套框架集的测试页面

frame0.htm

<!DOCTYPE html>
<html>
<frameset cols="25%,*,25%">
  <frame id="frmain1" name="main1" src="frame0_1.htm">
  <frame id="frmain2" name="main2" src="frame0_2.htm">
  <frame id="frmain3" name="main3" src="frame0_3.htm">
</frameset>
</html>

frame0_1.htm

<!DOCTYPE html>
<html>
<frameset rows="25%,*">
  <frame id="frsub11" name="sub11" src="frame0_1_1.htm">
  <frame id="frsub12" name="sub12" src="frame0_1_2.htm">
</frameset>
</html>

frame0_1_1.htm

<!DOCTYPE html>
<html>
<body style="background: darkorange;">
</body>
</html>

frame0_1_2.htm

<!DOCTYPE html>
<html>
<body style="background: lightyellow;">
</body>
</html>

frame0_2.htm

<!DOCTYPE html>
<html>
<frameset rows="25%,*,25%">
  <frame id="frsub21" name="sub21" src="frame0_2_1.htm">
  <frame id="frsub22" name="sub22" src="frame0_2_2.htm">
  <frame id="frsub23" name="sub23" src="frame0_2_3.htm">
</frameset>
</html>

frame0_2_1.htm

<!DOCTYPE html>
<html>
<body style="background: skyblue;">
</body>
</html>

frame0_2_2.htm

<!DOCTYPE html>
<html>
<body style="background: cornflowerblue;">
</body>
</html>

frame0_2_3.htm

<!DOCTYPE html>
<html>
<body style="background: slateblue;">
</body>
</html>

frame0_3.htm

<!DOCTYPE html>
<html>
<frameset rows="25%,*">
  <frame id="frsub31" name="sub31" src="frame0_3_1.htm">
  <frame id="frsub32" name="sub32" src="frame0_3_2.htm">
</frameset>
</html>

frame0_3_1.htm

<!DOCTYPE html>
<html>
<body style="background: darkgreen;">
</body>
</html>

frame0_3_2.htm

<!DOCTYPE html>
<html>
<body style="background: lightgreen;">
    <a id="test" href="http://www.google.com">testlink</a>
</body>
</html>

最佳答案

问题是您调用它的事件。 $(document).ready() 在加载当前 DOM 时触发。所以在加载3个主框架时触发。但此时这些框架还没有加载它们的 iframe。通过将事件更改为 window.onload,您应该会得到预期的结果。像这样:

$(window).load(function(){
    ...

window.onload = function(){
    ...

参见window.onload:https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

参见 https://api.jquery.com/ready/

关于javascript - Javascript,难以获取页面中所有嵌套框架的列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34780751/

相关文章:

javascript - 在 Javascript 中更改 ExtJS 网格高度

javascript - 如何使用 0 :00:00 format? 递增数字

javascript - XMLHttpRequest:需要使用ajax的成功和错误函数

jquery - 表格单元格中的文字换行最多两行

javascript - 如何设置文本框值以使用 javascript 上传文件名?

php - 如何在 javascript 中获取输入索引 - 可以使用 jQuery

Javascript如何设置超时

html - angularjs:依赖于json数据的动态html

javascript - 根据javascript条件切换sass类

javascript - 在数组中的每个数字后面添加逗号