View Full Version : Watch content of iFrame?

12-31-2009, 11:38 PM
I understand that it's possible to add events like onReadyStateChange to a iFrame to determine if a new page was loaded into the iframe (such as the viewer clicking a link inside the iframe to load a new page), but what if the page is changed via AJAX? Is there any way to read information about the iframe to determine if the page has been changed in some way?

In my situation, I'm trying to create a script that will watch an automatically updating page that uses AJAX, and display an alert when the content of the page changes. The exact use is with a chat box called CBox. They use AJAX to display new posts in the chat. I use their chat box on my website, but I don't always have it displayed on the page. The user can click a button to display the chat box as an overlay on the page. My goal is to create a script that will watch the chat box while it is not being displayed and call a function whenever the content of the chat box changes, such as if another person posts in the box.

01-01-2010, 03:38 AM
If the iframe when not seen is visibility hidden, as opposed to display none, things that take place on it are more available. Like if it is visibility hidden and absolutely positioned too far to the top and left to be seen, an alert fired from it will still be seen as if it were on the top page.

Now, if the page in the iframe gets AJAX imported content, that process will fire an onreadystatechange event for the import. If that event's function can be edited by you, you can make it fire an alert on success (readyState === 4). As long as everything is on the same domain, you can even make that alert's firing also be contingent upon the style of the iframe on the parent:

parent.reference_to_the_iframe_as_an_element.style.property === 'value'?

Like if it can be seen, don't alert, if not, then do alert.

01-01-2010, 08:06 AM
My issue is that the content inside the iframe is from another site, so I can't add or remove any code from that. When I attached an onreadystatechange event to the iframe, it only responds to the iframe loading or reloading a page and not the AJAX requests (unless they're using something else besides AJAX to update their pages dynamically)
Also, for the hidden factor, the iframe is inside a DIV, and it's the DIV that I hide. I'm not sure if that makes a difference though.