Develop Reference

Resize iframe to wrap it's content every time it changes it src

I managed to resize the iframe to wrap its content with this code:
var frameHeight = document.getElementById("fibertjekIframe").contentWindow.document.body.scrollHeight;
$(this).height(frameHeight);
And it works fine the first time page loads, but inside that iframe is a form and when user submits the form, he is redirected to another page within that iframe. I want that iframe to resize based on its content as well.
I was hoping this would work:
// Auto resize of the Fibertjek Iframe
$("#fibertjekIframe").on("load", function () {
var frameHeight = document.getElementById("fibertjekIframe").contentWindow.document.body.scrollHeight;
$(this).height(frameHeight);
});
The function is called every time there is new src loaded inside the iframe but for some reason I am getting the old height of the iframe so it remains the same.
EDIT: I have investigated a little more and I found out that even after form submission (in the iframe) and after the redirection, the src attribute of the iframe remained the same so I assume it is still referring to the old page, even though it has been redirected. The only idea how to overcome this I've got, is to set source of the iframe to the page that I was redirected to after form submit, but that is not convenient and right solution ...

I'd recommend to use the iframe-resizer which does what you want: https://github.com/davidjbradshaw/iframe-resizer

Event firing when iframe loaded

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

iFrame .load event not waiting for preloading images to finish

I have built a portfolio site which contains an iFrame to display artworks. To display each artwork an html page containing a large image is loaded into the iFrame.
The iFrame is hidden whilst empty (display:none) and is supposed to fade up only when the content is fully loaded.
//pass url of artwork page to iFrame
$("#creativeiframe").attr('src', thisLink.attr('href'));
//fade up iFrame once content loaded
$('#creativeiframe').load(function() {
$('#creativeiframe').fadeIn(300);
});
I had this working as expected - the iFrame would only load up when the content including the large image that had loaded completely, but slow loading prompted me to try preloading the artwork images so they would start downloading before the user clicked to load them into the iFrame.
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
Now I have a problem - sometimes when a user clicks to load an artwork the iFrame will fade up showing a half-loaded image, or worse just showing the html content without the image loaded. I have looked at Chrome Dev Tools Network inspector and this appears to occur when the image in question has started preloading, but not finished.
So my questions are:
Does anyone know why this is happening? Is it because with the preloading there is no network request for the image when the iFrame src is changed, so the .load event doesn't wait for the image to load?
Is there a way I can get the iFrame .load event to wait for the 'half preloaded' image to finish loading before firing?

I got this to work in the end by running a script in the child HTML document to detect the image load. This then triggers a 'fade function' in the parent document which fades up the containing iFrame.
<script type='text/javascript'>
var img = new Image();
img.onload = function(){
window.parent.fadeFn();
}
<?php echo"img.src='".$fileNameVar."'"?>
</script>

There is also a .load() function in the img tag, which can be used to show whether the image is fully loaded or not.
So I think you can use the .load() function to enable/disable the iframe click.
Or show an waiting indicator, maybe better.

EDIT: this is incorrect, I was confused The load event is fired when the DOM is fully loaded, but that doesn't include external images.
You should be able to do what you want with the ready() event:
//no reason to run the jQuery selector multiple times
var creativeIframe = $("#creativeiframe");
//fade up iFrame once content loaded
creativeIframe.ready(function() {
creativeIframe.fadeIn(300);
});

execution order for twitter iframe and other javascript getting the contents of the former

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.

How can I detect when an iframe page begins loading?

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.