Advanced Search

Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: jQuery get height of iframes source.

  1. #1
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,508
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default jQuery get height of iframes source.

    Greetings all!
    I'm trying to get the height of the source of an iframe, so that I can resize the iframe so that it fits this...

    I've tried using
    Code:
    $('#forum_iframe').contents().height()+'px';
    But this won't work in FF for some reason...
    Any suggestions?

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    I haven't tried yet to do it with jQuery, but this is an alternative.

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,885
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    This auto-height Iframe plugin for jQuery might be useful, if only to investigate their method : https://github.com/Sly777/Iframe-Height-Jquery-Plugin
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    The plugin seems to work alright, but I don't see an animated version. Does jQuery haved something like this or this? I made them some time ago.

  5. #5
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,508
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    I looked at both your suggestions... then I remembered a bit of information that I forgot -

    With the code I posted, or this code -
    Code:
    function changeHeight(iframe) {
    	try {
    		iframe = document.getElementById(iframe);
    		var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
    		if (innerDoc.body.offsetHeight) {
    			/*iframe.height = */alert(innerDoc.body.offsetHeight + 32); //Extra height FireFox
    		} else if (iframe.Document && iframe.Document.body.scrollHeight) {
    			/*iframe.height = */alert(iframe.Document.body.scrollHeight);
    		}
    	}
    	catch(err) {
    		alert(err.message);
    	}
    }
    It's only Firefox that will not alert it correctly. HOWEVER - Sometimes it does work, normally on the first page load... Does this suggest anything?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    First off, Firefox often will not cross script locally. So it needs to be tested on a server or virtual server like XAMP, WAMP, etc.

    Second, using the iframe as an element is the hard way. If you use it as a window, it's document is window_reference.document in all browsers, so none of that testing business that's required when the iframe is used as an element. The only trick is obtaining the reference to the iframe which corresponds to it as a window in such a way that all browsers agree upon it. I believe that's by number. So, let's say it's the only iframe on the page:

    Code:
    alert(jQuery(window.frames[0].document).height());
    should do it (untested).

    The other way of obtaining a reference to the iframe as a window is by it's name attribute. So let's say you have an iframe with a name attribute of "myframe":

    Code:
    alert(jQuery(window.frames['myframe'].document).height());
    But I think the number method is more cross browser.

    Now of course you have to wait until the onload event of the iframe has fired before checking for this, so assuming the first scenario (by number), this might be fun playing with to see how it works out:

    Code:
    jQuery(function($){
    	var $iframe = $('iframe').eq(0);
    	$iframe.load(function(){
    		$iframe.animate({height: $(window.frames[0].document).height()}, 600);
    	});
    	$iframe.data('load', function(){$iframe.trigger('load');});
    });
    The last line simply creates a reference in case you want to fire the load function manually with a button or link:

    Code:
    $('#mybutton').click($('iframe').eq(0).data('load'));
    All of this is untested though, and knowing jQuery visa vis straight javascript like I do, in this sort of situation, more of the duties might have to be carried out in ordinary javascript.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    I tried it out. It needed some tweaks. This worked in limited testing:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery Resize Iframe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var $iframe = $('iframe').eq(0), ie = (function(){var ie; return (ie = /MSIE (\d+)/.exec(navigator.userAgent)) && ie[1] < 9 ? 5 : 0;})();
    	$iframe.load(function(){
    		$iframe.animate({height: $(window.frames[0].document.body).outerHeight(true) + ie}, 600);
    	});
    	$iframe.data('load', function(){$iframe.trigger('load');});
    	ie && $(window).load($iframe.data('load'));
    });
    </script>
    </head>
    <body>
    <iframe name="myframe" src="frame1.htm" width="300" height="300" scrolling="auto" frameborder="1"></iframe><br>
    <a href="frame1.htm" target="myframe">Frame1</a><br>
    <a href="frame2.htm" target="myframe">Frame2</a><br>
    </body>
    </html>
    Last edited by jscheuer1; 01-07-2013 at 11:43 AM. Reason: one slight tweak to the tweak
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    Hi Keebs,
    Your code produces the correct alerts on my machine (using FF), but doesn't seem to correctly resize the iframes. If you just want a simple script that works (no animation), you can do this:
    main.html:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Setting Iframe Element Height to Iframe Content Height</title>
    
    
    
    <script>
    /* free code from dyn-web.com */
    
    function getDocHeight(doc) {
    doc = doc || document;
    // from http://stackoverflow.com/questions/1145850/get-height-of-entire-document-with-javascript
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
    }
    
    function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
    ifrm.style.height = getDocHeight( doc ) + 5+"px";
    ifrm.style.visibility = 'visible';
    }
    </script>
    
    </head>
    <body ><div style="position: relative; margin: auto; width:100%">
    
    
    <h1 style="margin-top: 10px; text-align: center">Setting Iframe Element Height to Iframe Content Height</h1>
    
    <div style="position: relative; text-align: center; margin-bottom:10px">
    <a href="javascript: void(0)" onclick="frames.some_name.location.replace('page1.html'); return false">page 1</a>
    <a href="javascript: void(0)" onclick="frames.some_name.location.replace('page2.html'); return false">page 2</a>
    <a href="javascript: void(0)" onclick="frames.some_name.location.replace('page3.html'); return false">page 3</a>
    </div>
    
    <div  style="position: relative; margin: auto; width:400px; background:white; border: 1px solid black">
    <iframe id="some_id" name="some_name" src="page1.html" style="width:100%; text-align: center" frameborder="0" scrolling="no" onload="setIframeHeight(this.id)"></iframe>
    </div>
    
    </div></body>
    </html>
    page1.html (first iframe):
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title></title>
    
    </head>
    
    <body style="font-family: verdana; font-size:12px; "><div>
    
    <h2 style="text-align: center">PAGE 1<br>The height of this iframe is auto-adjusted to its content's height</h2>
    <div style="text-align: center">
    <a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page1.html'); return false">page 1</a>
    <a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page2.html'); return false">page 2</a>
    <a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page3.html'); return false">page 3</a>
    </div>
    
    <br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history. 
    </div></body>
    
    </html>
    page2.html (second iframe):
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title></title>
    
    </head>
    
    <body style="font-family: verdana; font-size:12px; "><div>
    
    <h2 style="text-align: center">PAGE 2<br>The height of this iframe is auto-adjusted to its content's height</h2>
    <div style="text-align: center">
    <a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page1.html'); return false">page 1</a>
    <a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page2.html'); return false">page 2</a>
    <a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page3.html'); return false">page 3</a>
    </div>
    
    <br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history. <BR><BR>
    
    <br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history. <BR><BR>
    
    <br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history. 
    </div></body>
    
    </html>
    page3.html (third iframe)
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title></title>
    
    </head>
    
    <body style="font-family: verdana; font-size:12px; "><div>
    
    <h2 style="text-align: center">PAGE 3<br>The height of this iframe is auto-adjusted to its content's height</h2>
    <div style="text-align: center">
    <a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page1.html'); return false">page 1</a>
    <a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page2.html'); return false">page 2</a>
    <a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page3.html'); return false">page 3</a>
    </div>
    
    <br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.<BR><BR> 
    
    <br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.<BR><BR> 
    
    
    <br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.<BR><BR> 
    
    
    <br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.<BR><BR> 
    
    
    <br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.<BR><BR> 
    
    
    <br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.
    
    </div></body>
    
    </html>
    Tested and working with all modern browsers. (IE and Chrome only handle this well online).

  9. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    For some reason, I hadn't noticed John's script when I submitted my last post.
    It's a very nice script. I tested it in IE (down to IE7), Firefox, Google Chrome, Opera and Safari. The results were fine with each browser.
    I would suggest 2 modifications though:
    Code:
    <iframe scrolling="no" ...
    and:
    Code:
    document.body).outerHeight(true) + 5 + ie}, 600

  10. #10
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,508
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Thanks for all those responses everyone!
    Thanks for that suggestion John, I'll use that method to retrieve the height instead!

    As for your post Arie, sometimes on my machine it works, others it doesn't.... Maybe it's just a problem with my computer. And yes, I know it won't resize, I commented that bit out of my code for testing purposes...

    I think scrolling="no" is now depricated, and you have to use css instead... but point taken!


    Thanks for all the help guys... I'll try it all out later this afternoon and see how I go

Similar Threads

  1. jquery scrollTo and resize height
    By vinny.benson in forum JavaScript
    Replies: 0
    Last Post: 01-27-2011, 12:00 AM
  2. Replies: 0
    Last Post: 12-14-2010, 03:20 PM
  3. Replies: 2
    Last Post: 02-16-2010, 04:03 PM
  4. Ajax XML Ticker (txt file source) no source is showing
    By hups in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 07-23-2008, 07:09 PM
  5. iframes height problem
    By pinky12 in forum CSS
    Replies: 1
    Last Post: 01-05-2006, 08:41 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •