Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Setting iFrame Height to Its Contents ...

Posted on 2013-06-28
5
844 Views
Last Modified: 2013-06-28
Hey all.

I have an iFrame and I want it to expand / contract to fit its contents. The following code works on "some" of the loaded pages within the iframe, but on others it doesn't. I think the "Hgt2" below is what I need, that is the one that returns "null"; the other two return actual values.

I pulled some of this from Googling my issue, the statement below are the core of what I found to do but they don't work across the board.

What I need, I think, is the body height of the page that is being loaded into the iframe, but how do I get that value "consistently"??

iframe definition
<div id="iframeContainer" name="iframeContainer">
                  <iframe name="main" id="main" src="" width="100%" height="1000" frameborder="0">
                </iframe>
                <div class="clear">&nbsp;</div>
            </div>

JS
$("#main").load(function (){
        //$('#main').contents().find("div.iframecontent").css('width',$('#main').width()-20);
        //$('#main').contents().find("div.iframecontent").css('height',$('#main').height()-20);
        //$('#main').contents().find("div.iframecontent").css('overflow',"auto");
       
        alert('Hgt1: '+this.contentWindow.document.body.offsetHeight + 'px'+'\n'+
              'Hgt2: '+$(this).contents().find('body').height()+'\n'+
              'Hgt3: '+this.contentWindow.document .body.scrollHeight);
       
    });
0
Comment
Question by:Webspeeder
  • 3
5 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39284461
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39284535
If the page being loaded are from a different domain, then any reference to the window or document object of the loaded page will fail because cross-domain scripting is a security violation that is enforced in every modern browser.

Cd&
0
 

Author Comment

by:Webspeeder
ID: 39284656
No.

The problem is that the $('iframe').contents().find('body').height() comes back as null, so using that as a base won't work.

I need to either A) figure out why that value is null or B) figure out a way to calculate it based on the iframe's scroll height / innerheight etc.
0
 

Author Comment

by:Webspeeder
ID: 39284672
COBOLdinosaur,

Everything is within the same base domain, on our website. When I say base domain, I mean test.mydomain.com. But, it seems that the one page that returns values is a static page on the web server itself, whereas the other pages are "loaded" from our internal server, meaning the html page is not on the web server, it resides on our internal server. It is sort of like JAVA in that the JAVA code is not on the web server, it's on a server that is called.

Would that matter? It seems coincidental, maybe I should test that some.
0
 

Author Comment

by:Webspeeder
ID: 39284732
I think what I'm going to use is this. The base is from this link: http://stackoverflow.com/questions/14473835/how-to-find-the-iframe-content-scrollheight-and-scroll-width

What I'm going to do is determine if it has a scrollbar and simply add to it until the scroll disappears.

var iFrameID = document.getElementById('main');
            var hasHorizontalScroll= iFrameID.contentWindow.document.body.scrollWidth>iFrameID.contentWindow.document.body.clientWidth;
            var hasVerticalScroll= iFrameID.contentWindow.document.body.scrollHeight>iFrameID.contentWindow.document.body.clientHeight;
            if (hasVerticalScroll)
                  $('#main').height($('#main').height() + 1500);

If anyone has any other suggestions please let me know.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question