First off, both frames must be running on the same domain because browsers will prevent code in one frame from accessing anything in the other frame if they are different domains. If the two frames are not on the same domain, then the iframe will have to monitor itself and notify the other frame when it has finished using something like window.postMessage().
If they are on the same domain, this is slightly complicated. You have to get the iframe element (that's in your main document). You have to wait for that to be ready (since it has to load it's own contents). Then, you have to get the document in the iframe. Then you can find the desired image in the iframe. Then you can observe it's contents. And, of course, you can only do any of this if the iframe is the same domain as your main page (because of security restrictions).
First, add an id to the iframe:
<iframe id="myFrame" seamless width="100%" frameborder="0" height="80%" src="http://fritz.box/usb/usb_diskcut.lua?usbdev=all"></iframe>
Then, you can use this:
// put this code in your document AFTER the iFrame tag
// or only run it after the DOM is loaded in your main document
function checkImageSrc(obj) {
if (obj.src.indexOf("/finished_ok_green.gif") !== -1) {
// found the green gif
// put whatever code you want here
} else {
// check repeatedly until we find the green image
setTimeout(function() {
checkImageSrc(obj);
}, 2000);
}
}
// get the iframe in my documnet
var iframe = document.getElementById("myFrame");
// get the window associated with that iframe
var iWindow = iframe.contentWindow;
// wait for the window to load before accessing the content
iWindow.addEventListener("load", function() {
// get the document from the window
var doc = iframe.contentDocument || iframe.contentWindow.document;
// find the target in the iframe content
var target = doc.getElementById("uiView_TestPic");
checkImageSrc(target);
});
FYI, there's more detail on waiting for an iframe to be ready here: How can I access the DOM elements within an iFrame
If you control the code in the iframe, then a much cleaner way to implement this would be to use window.postMessage() to post a message to the parent window when the code in the iframe finishes its operation. Then the parent window can just listen for that single message and it will know when the operation is done.
That could look something like this. Put this code in the iframe:
// put this code in your document AFTER the relevant image tag
// or only run it after the DOM is loaded in your iframe
// if you can hook into the actual event that knows the unmount
// is done, that would be even better than polling for the gif to change
function checkImageSrc(obj) {
if (obj.src.indexOf("/finished_ok_green.gif") !== -1) {
// found the green gif
// notify the parent
window.parent.postMessage("unmount complete", "*");
} else {
// check repeatedly until we find the green image
setTimeout(function() {
checkImageSrc(obj);
}, 2000);
}
}
// find the target in the iframe content
var target = document.getElementById("uiView_TestPic");
checkImageSrc(target);
Then, in your main window, you would listen for the posted message like this:
window.addEventListener("message", function(e) {
// make sure this is coming from where we expect (fill in the proper origin here)
if (e.origin !== "http://example.org:8080") return;
if (e.data === "unmount complete") {
// unmount is complete - put your code here
}
});
