Suppose a HTML document has a iframe. Using javascript,I want to detect ,on load of the html document, whether the body of the iframe document is ready to be displayed.
I want to be able to overwrite the the body contents (before it actullay loads) of the iframe. Any suggestions? can I do it with jquery?
say if ,HTML doc is
<html>
<head>
</head>
<body>
<iframe id="ifrmId" src="http://www.google.com" >
</iframe>
</body>
</html>
You can use the onload event on the iframe element:
var iframe = document.getElementById('ifrmId');
iframe.onload = function () {
// iframe loaded
var innerDocument = iframe.contentDocument || iframe.contentWindow.document;
};
Edit: With jQuery, exactly the same idea:
$('#ifrmId').load(function () {
// iframe loaded
var innerDocument = $(this).contents();
});
Keep in mind that if you want to manipulate the iframe's inner document, the file needs to be on the same domain, this is because the same origin policy restrictions.