How to resize an external site to fit into an iframe?


You cant interact with an external iframe if it is in a different domain. If it is in the same domain, you can resize its contents as follows:

* this function allows you to retrieve the window object of an iframe given by its ID
* @param {string} id - iframe id
var getIframe = function (id) {
    if ($.browser.mozilla) return document.getElementById(id).contentWindow;
    return window.frames[id];

then, from the external file (the one which contains the iframe), you can call something like this when the iframe is loaded:

var resizeIframeContent = function(iframeID, sizeX, sizeY){

  var iframe = getIframe(iframeID);
  iframe.updateSize(sizeX, sizeY);


With this code, you are calling the function updateSize in the inner document of the iframe, so you should add this function in the nested document attached to the window object (global namespace). Something like this:

var updateSize= function(sizeX, sizeY){
   //do you resizing stuff here, which depends on your html structure, it could be something like this:

However, I think that you question is wrong, and you are actually trying to ask how can you modify the size of your iframe (not the iframe content) to fit its inner content. If so, you cant do it in a crossdomain situation, but if both pages are in teh same domain you can do it in a similar way, something like this:

On your inner document, when the document is ready, send its size to the parent container:

  var content = $("#content"); //change this to point your container, or obtain the document height or anything else
  parent.onIframeDimensionsRetrieved( content.width(), content.width() );

and in your outter document (the one with the iframe) retrieve the new size and update the iframe dimensions:

var onIframeDimensionsRetrieved = function(width ,height){

That is all 🙂 All my sample code was using jQuery to make it readable, you can do it with pure JS too if you want to.

Good luck! i hope it helps 🙂

Leave a Comment