1

This is similar to Javascript callback when IFRAME is finished loading?, but the difference is that I took a web-based application that we are using, and to do some monitoring of it I have put it inside of an iframe so my javascript can look inside the webpage.

So, as the user uses the application it will load new pages, but they are all within the iframe, which doesn't get reloaded.

Is there some way event that will inform me whenever a page gets loaded within this iframe, or, to at least be informed when the page is being replaced?

Community
  • 1
  • 1
James Black
  • 41,583
  • 10
  • 86
  • 166
  • If you're loading pages from an application that you control, you should probably have that application explicitly send messages to the parent frame, rather than trying to monitor the iframe's ready state. – Dave Feb 20 '12 at 19:28
  • This is a third-party application that we need to monitor some of what is sent back, to help identify a problem. – James Black Feb 20 '12 at 19:41

2 Answers2

2

There is no such event. The only idea I have in mind is to have timer running (window.SetInterval()) that regularly checks if the location (URL) of the iframe has changed compared to the previous check.

Just another thought: is the content of the iframe under you control or are you viewing content from some other domain? If it's your's, you can of course place events inside that code like "onbeforeunload" which would inform you if the iframe is redirected.

Krumelur
  • 32,180
  • 27
  • 124
  • 263
  • +1 - I was afraid that there is no event, but I was hoping to be wrong. But, I liked your solution about checking periodically, as that I didn't think about. – James Black Feb 20 '12 at 19:25
  • @Dave - How can an iframe get this event if it isn't the caller, just an observer? – James Black Feb 21 '12 at 15:22
1

Do you have control over those pages that get loaded inside the iframe? If so then you can just add to all of them a js file that only does this:

parent.loaded(document.location.href);

Then in the main page, where you have the iframe have this:

function loaded(url) {
    alert('"' + url + '" was loaded');
}

For this to work you also need to serve all the pages in the iframe from the same domain as the main page.

EDIT

Since you serve the iframe pages from the same domain as the main one, you need to have control of the server that is serving the pages, so even if you can't modify the code, you can modify it at "run-time" when the server return the content. You can for example return a modified version of a js file that is always loaded with something like parent.loaded(document.location.href);.

This might seem more complicated than using setTimeout, but it's another solution none the less.

Another thing that you can do, since you have access to the dom, is to register to the onunload event so that you can use setTimeout when you know for sure that the page is about to be reloaded, that will prevent a continues none stopping timer.

With all of that said, maybe this is not the best way to implement this monitoring? Maybe you can implement this with a browser extension? Those privileged to be aware of changes in locations of all the documents.

Another Edit

You might want to try to use this onload event for iframes

Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299
  • The problem is that this is a package we bought. I can't make any changes to it, but I need to monitor some of what is displayed to the user. So, the only solution I could come up with was to have an iframe then load this application, since the url is the same domain I am able to inspect the dom, but, when someone clicks on a tab or link and goes to some page within the application I need to them re-examine the data to see if certain information is still correct. This is where I got stuck. – James Black Feb 20 '12 at 19:44
  • Ok, now that I know more about your situation, I'll edit my original answer. – Nitzan Tomer Feb 20 '12 at 19:50