Menu
Hello I need to get list of all frames for my GreaseMonkey script but in fact i guess it is general Javascript question. It would be great if I could get to every single frame that is nested in page. So far i got problem getting number of frames nested in main document frames.
Page I'm dealing with consist of frameset that is multilevel and frames contains other frames. I've managed to get information about top-level frames of main document frameset (in code level 1) but at this level i get information that frame count for these frames equals 0 which is not true.
I've came up with following code
$(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);}); So level 0 which is in fact main document frame count and level 1 names or main document frames - these things are reported correctly but not the amount of frames of each level 1 frame. And i want to know if it is because my code got mistakes or maybe because subframes are not yest fully loaded.
I've tried to call my code from keyboard shortcut, after all will look like its completely loaded, but here another problem, seems like following code seems to not to work with page that consist only of frameset
(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);})(); Best would be if code automatically comb through all frames and subframes but with its current shape (where each level got it own loop) is also good.
Problem with inability of using shortcut key is secondary. Main thing is getting proper counts of frames inside frames of main document and beyond.
EDIT: Sample output and My test page with nested frameset
Output
level 0 > 3
level 1 - 0 > main1 - 0
level 1 - 1 > main2 - 0
level 1 - 2 > main3 - 0
Test page with nested frameset
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> 
409
In this article, we will discuss a nested list in HTML. These tags are used in HTML listing. HTML Unordered List: An unordered list starts with the “ul” tag. Each list item starts with the “li” tag. The list items are marked with bullets i.e small black circles by default. Attribute values: This tag contains two attributes which are listed below.
I want to create a recursive JavaScript loop which can display all the Frames (either using IFRAMES Tag or using FRAME Tag). The result should give FrameName, NestingLevel, FrameURL, etc. For example, when we open 'Developer Tools' in Google Chrome, we can see in all the FRAMES (even nested Frames too) in the console tab.
To be precise, frames are a way of dividing up sections of a web page using HTML. Take this webpage, for example. Each section is a different frame, independent of the other frames on the page. Multiple frames can be grouped together inside a single frameset.
HTML Ordered List: An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are marked with numbers by default. <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> compact: It defines the list should be compacted (compact attribute is not supported HTML5. Instead use CSS).
The problem is the event on which you call this. $(document).ready() is fired when the current DOM has been loaded. So it's triggered when the 3 main frames are loaded. But at this point these frames didn't load their iframes yet. By changing the event to window.onload, you should have the expected result. Like this:
$(window).load(function(){ ... or
window.onload = function(){ ... See 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.
See https://api.jquery.com/ready/
186
Working Code Solution
Use a recursive function and the window load event, like so (works in latest versions of Chrome, FireFox and Edge; didn't test others. Probably works in IE5+ also).
Use this code in your top level frameset, frame0.htm:
<!DOCTYPE HTML Frameset DTD> <html> <head> <script> window.onload = function() { var allFrames = []; function recursFrames(context) { for(var i = 0; i < context.frames.length; i++) { console.log(context.frames[i].name + " -- " + context.frames[i].location.href); allFrames.push(context.frames[i]); recursFrames(context.frames[i]); } } recursFrames(window); console.log("Frames count: " + allFrames.length); } </script> </head> <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> This writes to the console just to show you what is going on, but of course you can do whatever you want with this information. It creates a flat list (array) of all child frames, but you could structure it hierarchically if you like, or whatever.
HTML 5 Reminder
You are using the HTML5 DOCTYPE, but frameset is not supported by HTML5. But it is up to the browser to decide when to stop supporting this, and many of them still do. I recommend you stop using frameset ASAP. Use iframe instead if you need frame-like behavior (different windows and documents).
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
