I'd like for the opener of an iframe to be able to detect each time the user changes pages within that iframe. Using jQuery, I can detect each time a page finishes loading within an iframe via the following:
$('#myIframe').on('load', function() {/*do stuff*/});
However, I'd also like to detect (in the iframe opener) each time a page starts loading within that iframe.
Note: The content that is displayed in the iframe is from a third-party site, so I don't have the ability to insert code there so that the iframe can explicitly alert the opener.
Does anyone know of an event that is fired when a page begins loading? I'm not having much luck finding anything via Internet searches, as most people seem to only be interested in detecting when the iframe has finished loading.
It seems unfortunately that the only way to be sure it will work in most browsers is to use the <iframe onload="myonloadscript();"
The window.onload event of the main page will tell you when the iframe has loaded and you can be sure it has begun it's request for it's src page
Edit:
Just copying it from an article (Their are hacks for this)
doing this cross-domain? Not so easy. You’ll get something along the line of: Child document does not have the right to access parent document. In fact there is a lot of documentation on the web about how to achieve it, but the problem is that it is often outdated, with solutions that often only works in a couples of browsers.
Related
does anybody know how can I expand javascript so that it targets whole website not only the page in iframe it is on. Im currently using a javascript for gallery on my website, so when you click on a picture it pops up enlarged, however since the page with javascript is in an iframe it shows only in the iframe, how can I accomplish the pop up to expand to the whole page?
Thanks in advance.
Iframes can call out to the window which embeds them using simple javascript (see window.frames on http://www.w3schools.com/jsref/prop_win_frames.asp). However, if src of the iframe is on a different domain, then the script can only affect the iframe, due to security policy within the browser.
If you'd like to apply a work-around, there are some solutions like this: Yet Another cross-domain iframe resize Q&A
These solutions tend to break on different browsers and with updates to browsers.
Your best bet is keeping the entire iframe contents within the browser by writing the iframe code yourself (and hosting on your own domain).
I have content. They are all different (generated from widgets on Wordpress), and they all need to be pulled apart and concatenated in various ways. Basically on window.load, the javascript loops through each of the widgets, takes out the content, then puts them in clean containers in a specific order, then fades them in nicely. This works perfectly.
In comes Twitter. Twitter has a script that loads an iframe. The Twitter script is inside a widget. I'm doing the same thing, taking the contents of the widget and dumping it into a new container. This causes it such that I'm taking the Twitter script and putting it into a new container before the iframe has loaded. Somewhere along this journey, the iframe never loads. I don't want to manipulate the content inside the iframe by an means, I just want it to load in the container I choose.
My question is: is this process wrong? Or, can I get the iframe to load first, THEN grab the contents of the iframe and dump it in another container? It seems as if the iframe doesn't load until the page is loaded, but my javascript is interrupting the load process and stopping.
I'm not sure if I'm explaining this correctly, nor do I have example code that is in simplified form. Is this question answerable without these things? Thanks for the help in advance.
Edit: Taking out window.onload solved the problem. Meaning, window.load was probably interrupting the iframe from loading. However, window.load is necessary. Any other ideas?
So, the answer to my question :
Or, can I get the iframe to load first, THEN grab the contents of the iframe and dump it in another container?
No. Currently, there's no way to do this. See reference The Twitter script was firing right away, and the window.onload was being rightfully interrupting.
The Twitter embed script is in two parts: an element and the inline script. My workaround was to keep the script inside the javascript, and keep the element in the widget (so the client can switch off, have multiple twitter account embeds, etc). Then, after the DOM elements are finished shuffling around and into their respective containers, I insert the script into the widget for twitter.
The iframe load, and tada! No more half-loaded twitter iframe.
I am working on the extension that needs to update page texts after page is loaded. I use window.onload in "content_script".
As I need to test my changes a lot I decided to create a little page with a few paragraphs of text and put it in my web server. But when this page loads - extension's window.onload doesn't trigger, wheres on any other internet page it works properly.
I started investigation and found out, that this is because of the page loading speed. So basically page loads faster than extension code.
It was verified by adding background image on the body linked to the external site. Like this:
body
{
background: url(http://colourunity.com/img/2013/07/autumn-wallpaper-computer-14172-hd-widescreen-wallpapers.jpg) no-repeat;
}
So the page's loading speed slows down and extension has enough time to load in and window.onload triggers.
Of course I don't worry about extension work, because it is too rare case when page loads that fast.
But still - is there anyway to bypass this?
Thanks.
The window object of your content script is not the same as the one of your page. From the content script documentation:
It's worth noting what happens with JavaScript objects that are shared by the page and the extension - for example, the window.onload event. Each isolated world sees its own version of the object.
Therefore listening for this event in your content script won't work as you intent, since it's not the one you want.
It doesn't matter anyway: you can specify at which point your script is executed via the run_at option. For example, if you choose to run it at document_idle, then you're guaranteed it's executed after the window.onload event of your page.
In other words, you can simply stop using the window.onload event, and directly run the code you need.
At first this might seem an odd question, but here's my problem. I'm developing a website that on window.load calculates the div positions as it has some dynamic scroll event highlighting (DOM Ready is the wrong choice for this as images and content isn't loaded yet and the calculate div positions are incorrect when the page has fully rendered.) The local assets run perfectly and are optimised for performance, but my problem is that the client wants social media embeds, for instance a twitter follow and facebook like button. Twitter seems to render pretty quickly, but Facebook takes so long and you can literally lag for about 20-30 seconds before the window.load event is ready, which means my navigation then lags and doesn't work properly. I don't know if it's even possible, but is there a way to determine when all local JavaScript files are loaded (these are included before the closing body tag).
Probably. All JavaScript in a page is executed in the order in which the browser encounters it. So when you add a <script> element as the last element inside the <body> element (i.e. at the bottom of the page), this code will run after all other script code has been executed. Also, at that time, the DOM will be finished (no further HTML to process) except for things that callbacks still might do (timers, onload-handlers).
So what you can try is to put a <script> element between your code and the code from Facebook. But that means your DOM won't be ready.
A better solution is probably to start loading the Facebook code in the background inside of onload. That means all the rest of the page is there and Facebook can take its time.
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.