I'm trying to set up event, which should fire when iframe is loaded. It is important to acknowledge, that I want this event to fire INSIDE iframe, not in parent page. Actually, parent doesn't have to know that iframe was loaded.
On the beggining I've tried $(function() {....} (document.ready) event, but it doesn't seem to work as expected. It seems that it fires when parent page was loaded (the same event on parent page works as expexted).
Then, I've tried window.onLoad = function() {...} but it doesn't seem to work at all (event not fired).
So, how to do that? Again, I'd like the page inside iframe to know that loading was complete. Basically, I'd like to have event, that will work in iframe page as $(function() {}) in parent page.
I am afraid you can't do this in a right way.
See this link : How to add onload event to a div element?
May be somebody should post the ticket to github.
If you own the page being loaded into the iframe, put the code in the page being shown in the iframe, not the parent page. If you do not own the page being loaded into the iframe, you cannot do what you're attempting due to cross-domain security sandbox restrictions. You would need a CORs solution http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Related
I have two different pages: the main page and the second page (that will be displayed in the main page as an iFrame).
The fact is that I cannot edit the main page, except from the iFrame href link.
What I want to do is to manually trigger the iFrame "onLoad" event in the main page, by using jQuery in the second page.
This is getting really hard cause of the impossibility to edit the main page, and the only thing I managed to do is to manually trigger the "ready" event on the second page, but this is not related to the "onLoad" event, unfortunately.
Any help would be greatly appreciated.
Thanks in advance.
Try
parent.$("iframe[src=myhref]").trigger("onload");
To test if a page is loaded, it is possible to add a "load" event listener on the window:
window.addEventListener ("load", function(){});
But in certain case, this event is never fired even if everything is loaded: imagine that you want to execute some JS when the page is loaded, but this page is not get as usual. It is loaded into an iframe without setting its "src" property but by doing
iframe.contentWindow.document.write ("<!DOCTYPE html><html>...</html>");
In this case, the "load" event is not thrown.
But whatever, inside this page, it is still necessary to be able to known when the page is like "loaded", to begin some js stuff.
Can i assume that if the end of the html is reached, then the page is loaded? If the answer si "yes", then starting the JS in a <script>tag at the end of the page would do the trick...
In other words: in a normal load workflow (by setting the "src" attribute) does some other "init" processes still asynchronously run at the end of the page (like a css engine init process), and the "load" event is fired only when all of these processes terminate? are these processes also present when loading a page by using document.write?
Thank you for your attention.
An answer to the question in the header is no.
Practically DOMContentLoaded fires when </body> is met, but for example some images can still be under loading. window.onload fires after all the content and resources (like images and contents of iframes) of the page have been loaded.
When you write to any document using document.write() after that page has been parsed, write() implicitely opens the document, but it doesn't close it. "Ready" events can't be fired while the document is open. Hence after document.write()(s) you've to close the document manually:
document.close();
With jQuery it's as easy as this:
$( document ).ready(function() {
// Handler for .ready() called.
});
http://api.jquery.com/ready/
That event triggers once the DOM is ready which is most probably sufficient for starting DOM-Manipulations via JS. The onload event on the other hand triggers after all the assets to the page like images are loaded as well and can therefore take a little longer to be triggered.
I know there are several questions/answers already about how to redirect a parent window from within an iframe, but this one has a slight twist.
I need to be able to redirect the parent window when the page in the iframe is changed. However, the page in the iframe is not on my domain, so I can't use the parent.window.location trick that was suggested in other threads.
So, for example, if I put stackoverflow.com in my iframe, I need the parent frame to redirect when the user clicks any link on the stackoverflow page.
I doubt this is actually possible, but I thought there might be some sort of polling of the iframe that the parent can do or something.
This is a bit convoluted, but should do the trick. If you define your IFRAME like this
<iframe id="xMyIframe" src="http://someurl" onload="replaceLoad(this)" ></iframe>
Then you can define a JavaScript code;
function replaceLoad(oIframe) {
oIframe.onload = function () {
location.href = 'http://www.microsfot.com'
}
}
On load of the initial Iframe URL inital onload event handler fires which replaces itself with new handler that will fire after next load i.e. after user clicks link in the iframed page.
Is there a way for me to detect when a particular element within an iframe is loaded without waiting for the full iframe content to load?
The problem I have is that the iframe is filled with many SVG buttons that take a long time to load and process and hooking into the load event of the iframe forces the action I want to take to wait for them to load fully. I want to access one element out of the iframe and wanted to know if it was possible to detect that that element has been loaded without waiting for the full contents of the iframe to load.
JavaScript or jQuery solutions are both file with me.
$('iframe').onload = function() {
alert("loaded")
})
This will fire when the HTML is loaded, but before it has been fully parsed and rendered.
Beyond that you'd have to poll to see of the element you're looking for is in the page.
You can use it :
$("iframe").contents().find("your iframe elem").load(function(){
alert('element loaded.');
});
On my page (index.htm) i have a iframe inside a modal that loads a content i.e (pagex.htm) from a different domain (not owned by me).
This iframe with (pagex.htm) has a element with id (#close) that also have a onclick() event as below:
<a id="close-lite" class="ch-close" onclick="closeRender();" href="#">×</a>
In my index.htm i have my jquery/javascript and what im trying to do is to access the iframe and get the click event to close the modal that is inside my page (so im not trying to modify the iframe content). I have tried to use .content() but without sucess yet.
Perhaps is a cross domain policy ussue? how can i get around this?
How can i do this with javascript/jquery ?
The same-origin-policy prevents you from listening to what is going on in the Iframe.
Can be used postMessage().
http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
But it works not in all browsers and needs init from both sides.