SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adjust IFRAME Height Using Javascript??

    Hello Sitepoint Fam,

    I'm looking for a good cross-domain iframe resizing script that adjusts its height based on its content without a scrollbar displaying at all. The width is working perfect but needing the actual iframe height to automatically fit in without showing any scroll bar at all. I have attached image of how it looks in site and also code below:
    screenshot4.jpg
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>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) + 5 + 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="100%" height="300" scrolling="no" frameborder="0"></iframe>
    </body>
    </html>
    Thanks so much in advance

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Any browser can satisfy your ie test - you should be using jscript conditional comments if you want to target specific ie versions. With the content of the iframe coming from a different domain JavaScript has no way to tell what that height is unless that other domain uses postMessage to pass the information to other domains.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what would be the post message on other domain page?? Javascript? thanks


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
  •