Iframe and jQuery
Most web masters have, or will, come across the “ol’ iframe resizing dilema”. I know, I have and How! I have tried any and everything from javascript ot PHP to resize the iFrame window according to the size of the page loaded within. And more often than not, failed miserably, because of the cross server scripting security instilled in every browser and platform.
Well, not until recently, with the help of jQuery I was able to resize the iFrame height even with the cross server security of all browsers and it was something that bought a smile to my face and simply because it did, I am in love with jQuery. Here’s how to…
The Problem statement.
The below code will guide you through the entire process of getting your iframe resized, even if the page loaded within the iframe is from a different server. I am still working on this code, to get the iframe resized exactly as the size of the page within the iframe, and as soon as I figure that one out, it will be out here.
The Idea.
For the resizing to work, we need a <div> to envelope the <iframe>. And instead of resizing the iframe we resize the div to height and width we want…
The Code.
1. <html>
2. <head>
3. <script type=“text/javascript” src=“jquery.js”></script>
4. <Script>
5.
function resizeIframe() {
$(’#iframewrapper’).css(’height’,$(document).height()+1000);
};
6. </script>
7. </head>
8. <body onload=”resizeIframe();” >
9. <div id=”iframewrapper”>
10. <iframe name=”res” id=”res” src=”http://google.com”>Google.com</iframe>
11. </div>
12. </body>
13. </html>
The Explanation for the code.
Line 3: We import the jQuery file, that we have downloaded from herefor the latest version of jQuery click here
Line 5: Is a script that is written using jQuery and it essentially increases the size of the div by 1000px. You can use any value you did like to here. using the $() we use the div nodes css property and change/adjust the height as we require it to be.
Line 8: We call the function writing(Line 5) on the onload event of the <body>. This function can be called anytime.
And Thats about it!
Resources
jQuery@ http://jquery.com/
More jQuery Tutorials@ http://docs.jquery.com/Tutorials
2 Responses to “Iframe and jQuery”
Leave a Reply
Subscribe TO US
You can subscribe by email to receive newsletter updates:
Subscribe through a RSS feed reader
Thanks for the useful info. It’s so interesting
Nice post on how to access content in IFrame in Jquery here.
http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html