Web Tool Bag  
Home · Articles · Downloads · Discussion Forum · Web Links · News Categories · Synonyms DatabaseMarch 28 2024 14:44:28
Navigation
Home
Articles
Downloads
Discussion Forum
Web Links
News Categories
Synonyms Database
Search
Users Online
Guests Online: 2
No Members Online

Registered Members: 856
Unactivated Members: 118
Newest Member: lakim
Forum Threads
Newest Threads
Error: Cannot find m...
Uncaught Error: _reg...
Module build failed:...
Installation
mochi script questions
Hottest Threads
Installation [12]
Any questions and... [5]
Captcha picture d... [4]
Integrate with Vi... [4]
Mods: Sucess/Than... [4]
 
Latest Articles
Ubuntu: the vpn conn...
Howto Install HP Pri...
ReactJS progress met...
react-show-more-text
react-collapsible-co...
Automatically resize iframe height depending on content and cross domain solution autofiting of iframe

Automatically resize iframe height depending on content and cross domain solution autofiting of iframe


How to remove the scroll bars of iframe dynamicaly


Introduction of the problem


Does your iFrame step through multiple pages of varying heights? Or, does the height of the remote page change frequently? Do you find that the height of your iFrame is sometimes too short, cutting off the bottom of the remote page? Is your iFrame sometimes too tall, pushing down your content far beneath the embedded page?
Then this technique is for you.

This technique requires that you are able to edit the remote web-page. It requires a bit of script, and you’ll need to upload a couple of files to your web-host.

Your visitors must have javascript enabled, which, according to several sources i checked, is about 95% of all users. This method includes a fall-back, for users without javascript.


Explanation


Normally, the parent page is unable to see the height of the remote page embedded in the iFrame. This is a security restriction in browsers, as a security precaution. The assumption is that the page in the iFrame is in a different domain.

Here's the trick--we embed a hidden iFrame inside the visible iFrame. That hidden iFrame is in the same domain as the parent page. Therefor, the parent page is able to communicate with the hidden iFrame.

To pass the height of the content in the visible iFrame up to the parent web-page, the LoadHiddenIframe script in the remote page embeds it's height in the url of the hidden iFrame. Then, the parent page is able to grab the height from the src of the hidden iFrame, and then resize the visible iFrame.

Resizing of iframe if you load pages in iframe from your site


Here's one solution for resizing of iframe if you load pages in iframe from your site.
This of course doesn't solve the cross-domain problem. Setting document.domain might help if these sites are in the same place.
I don't think there is a solution if you are iframe-ing random sites.

<script type="text/javascript">
function autoIframe(frameId) {
   try{
      frame = document.getElementById(frameId);
      innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
      objToResize = (frame.style) ? frame.style : frame;
      objToResize.height = innerDoc.body.scrollHeight + 10;
   }
   catch(err){
      window.status = err.message;
   }
}
</script>


Other way to relsolve the problem

If you need auto resized iframe for your own content.

function autoIframe(){
    var x = 0;
    
    // reset iframe size for Opera
    if(navigator.userAgent.indexOf("Opera")!=-1){
    this.document.body.scrollHeight = this.document.body.offsetHeight
    }
    //IE, Opera
    var y = this.document.body.scrollHeight;
    while (x < y){
        x+=1;
    }
    parent.document.getElementById("ifrm").style.height = x
    
    ///////////////////// Firefox //////////////////////////////
    if(navigator.userAgent.indexOf("Firefox")!=-1){
    parent.ifrm.frameElement.height = this.document.body.scrollHeight+5;
    }
}

The body tag of the iframe content is needed to look like this:

<body onload="autoIframe()">

This script is tested with Opera 9.0, IE 7.0, Firefox 2.0

Posted by admin on May 15 2009 14:47:38 11022 Reads · Print
Ratings
Rating is available to Members only.

Please login or register to vote.

No Ratings have been Posted.
Login
Username

Password



Not a member yet?
Click here to register.

Forgotten your password?
Request a new one here.
Member Poll
Which PHP framework do you preffer?

Symfony

Zend

CodeIgniter

PHP on TRAX

eZ Components

Fusebox

PhpOpenbiz

Prado

QPHP

Seagull

You must login to vote.
Shoutbox
You must login to post a message.

Vince
03/10/2011 18:17
Hi, How to remove Register from Login screen? I don't want them to register and have full access! if you leave register then they should not have any rights until the admin assigns them

webtoolz
26/09/2011 08:28
Please describe your problem with more details. Thank you.

bimmer98
22/11/2010 18:31
Help. There was a problem with the request; error regarding feedbackzdr form program

Custom web software development by Devzone Tech
Copyright © 2024 - www.webtoolbag.com