Geek Answers Handbook

How to check if frame is loaded using javascript? - not onload, not iframe

Problem . Old knowledge base software that for some reason has corrupted links. This is a series of nested frames. Some point to the right goal, some not, and many are simply broken. This makes using the knowledge base cumbersome when it doesn't work smoothly.

What am I trying to accomplish . I want to determine when a particular frame is loaded, and then parse the frame document, replacing the anchor labels with the correct hrefs and target.

Resources and limitations . I have access to some .aspx pages. Targeting currently contains a frameset that loads a knowledge base document. However, the src of this frame is not the actual .aspx page (physical file) - an insecure way to create and uncertainty about how documents are stored. I see the src list but cannot find it on the web server that I have access to.

Basic information: Pages are loaded using .aspx (I do not understand parts of this well and do not have access to anything much deeper). An .aspx page has a set of frames that is created when the page loads.

Sample Framset code from an .aspx file:

<FRAMESET id="FrameSetMainView" runat="server" border="0" framespacing="0" frameborder="0"> <!-- This frame set is defined and generated in the code --> </FRAMESET>

I tried adding onload to the FRAMESET tag (this results in a page error when trying to load). A set of frames takes the body, so I cannot add an inline script to the bottom of the page to run it after loading.

In addition, b / c is the age of the product - it is forcibly switched to compatibility mode. Therefore, you must use equivalent IE7 support. (no addeventlistener )

Current Strategy:. I think I can work, but I feel awkward, like everyone else, adding a script to <head> . Sort of:

  <SCRIPT> function load(){ var frameset = window.frames; if(frameset.length > 0){ // frames have loaded - commence replacement }else{ // frames not loaded setTimeout(load,1000); // wait 1 sec, try again } } load(); </SCRIPT>

Other solutions?

+6
source share
1 answer

Use onreadystatechange event

Yes, there is a reliable way to solve this problem without resorting to timers or other ticks. When a page load assigns a handler to each "onreadystatechange" event of each frame. And you should also call it once to make sure that it applies to already loaded frames. The code below was tested in IE 5,7,8,9,10 compatibility modes and worked as expected (crash in IE11). It was also tested with slow boot frames without any problems.

Literature:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>Demo</title> <script type="text/javascript"> window.onload = function() { for (var i = 0; i < window.frames.length; i++) { (function(frame) { // called whenever a frame is loaded or reloaded frame.onreadystatechange = function() { if (frame.readyState === 'complete') { updateLinks(frame); } } // call once to apply to already loaded frames frame.onreadystatechange(); })(window.frames[i].frameElement); } } // modify the links within the frame function updateLinks(frame) { var i, links, doc; doc = frame.contentDocument || frame.contentWindow.document; links = doc.getElementsByTagName('A'); for (i = 0; i < links.length; i++) { // modify the links here links[i].href += '?time=' + (new Date()).getTime(); } console.info('modified ' + links.length + ' links in frame ' + frame.src); } </script> </head> <frameset cols="*,*"> <frame src="frameLeft.html"> <frame src="frameRight.html"> </frameset> </html>
+1
source

More articles:


All Articles