Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943

    iframe resizing issues - external websites

    I'm posting content on our website provided by a third party vendor within an iframe on our site.

    We want our top navigation and footer to be part of the web pages, and they are matching the look/feel of the rest of our site so that things look consistent.

    The problem is that the page content within their own navigation comes through in different sizes for each page within their own navigation structure and I'd like the iframe to shrink and grow depending on the size of the content being provided. That way, I'll avoid inconsistent gaps between the bottom of the content and the placement of the footer.

    I found a handy little script that works with local files and files on my server, but the moment I link to the external site in the iframe it stops working. It's not a deal killer, but it will make the site look better.

    Code:
    <script language="JavaScript">
    <!--
    function autoResize(id){
        var newheight;
        //var newwidth;
    
        if(document.getElementById){
            newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
            //newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
        }
    
        document.getElementById(id).height= (newheight) + "px";
        //document.getElementById(id).width= (newwidth) + "px";
    }
    //-->
    </script>
    
    <iframe src="____.html" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onload="autoResize('iframe1');" style="border: 1px solid;"></iframe>
    I'm only interested in the height of the content, the width is set and works within our framework. If this script won't work, I can try another (any suggestions?). Do I need to add something to the content on the other server that will recognize the script on mine?

    Any help would be appreciated. Thank you.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Did you try calling the function on body load instead of on iframe load?
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Many things can go wrong with this script.
    Take care that you cannot control iframe if source is not on same domain.
    I think that script is fire before all the iframe content is loaded (slower on server).
    And, you don't need condition. Also, what is contentWindow?
    And, how you think to handle browser resize?

    Consider using <DIV> loaded with ajax instead of iframe.

  5. #4
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943
    Thank you both for the responses. I'm afraid both your suggestions are a bit beyond my skill set. As I said, I found the script and simply pasted it in place.

    TheGAME1264: How would I call the "body" tag rather than the iframe? From what I can see the script is connected to the iframe with the id="iframe1" I'm not sure how I would switch that to the body?

    sasha_bolcina: Is the "<div> loaded with ajax" an alternate for using iframes - posting content from a separate html file within a page?

    I do have some control over what is coming in from the third party on their servers, so if necessary, I can have them add some code to their body tags or html that will help me make this script function.

    But I'm not married to this script, if there are other solutions, I'm completely open to trying them. As I said, this one worked fine, locally, so I thought it had promise.

    If either of you know of resources I can look at to do some research on either of your possible solutions, I would appreciate it. Thanks again.

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Code:
     onload="autoResize('iframe1')
    Put that in the body tag instead of in the iframe tag.

    There is another alternative that can work if you're using jQuery, although as Sasha pointed out you're subject to the whims of the external site.

    .load() | jQuery API Documentation
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:12 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com