3

I have an iframe on my index.html and this iframe is dynamic.

on my index.html I have a form, which when submitted, shows the results inside the iframe.

The problem is the Iframes height also has to be dynamic for the website to look "clean".

So in the Iframes php page, I have this code:

<body onload="parent.resize_iframe(document.body.scrollHeight)">

And in the index.html (which is the parent in this case) I have this function:

function resize_iframe(new_height){
    byId('iframe001').style.height=parseInt(new_height) + 20 + 'px';
}

The problem here is not the function, but that Safari and Chrome thinks the scrollHeight is something alot bigger than it is.

I have tried alerting the scrollHeight, and the nr is always around 2000px in Chrome and Safari, but in other browsers it is dynamic as it should be (500, 300, 800 etc)...

Any ideas?

UPDATE:

I noticed when I click a link on the index, and then click the browser back button, the iframe DOES resize correctly in SAFARI and CHROME.

But I must click back in the browser for it to work...

SEE THIS QUESTION FOR FURTHER INFORMATION: Can't figure out why Chrome/Safari can't get the ScrollHeight right here

Community
  • 1
  • 1
  • 2
    Inline JavaScript attributes are soooo 1999. – Skilldrick Oct 03 '10 at 11:40
  • try to write:byId('iframe001').style.height=(parseInt(new_height) + 20) + 'px'; – Erhard Dinhobl Oct 03 '10 at 11:42
  • 1
    @Skilldrick: For what it's worth, `` is the only standardized way of calling a function when the page loads. – Tim Down Oct 03 '10 at 11:42
  • @Tim : What @Skilldrick means is that you should call a locally named function in the attribute. In this way functionality is separate from markup. – Hogan Oct 03 '10 at 11:48
  • @Hogan: That's a valiant defence and a fair point, but I'm not at all sure that's what he meant. I imagine he meant that it's preferable to use `window.addEventListener` / `window.attachEvent`, probably using a library such as jQuery to abstract that particular browser difference. – Tim Down Oct 03 '10 at 11:53
  • @Tim: hmmm... maybe. I took it to mean that `OnLoad="myStartupCode();"` is better since that is clearly easier to maintain. But it is true, he might have been engaging in library snobbery. – Hogan Oct 03 '10 at 11:57
  • @Hogan: I think he meant to use `window.onload = …` in JavaScript code, not in HTML. – Marcel Korpel Oct 03 '10 at 12:39
  • @Camran [Check out this old question I asked.](http://stackoverflow.com/questions/1830080/jquery-scrolltop-doesnt-seem-to-work-in-safari-or-chrome-windows) – Pointy Oct 03 '10 at 12:47

2 Answers2

0

I am not sure but however I want to say what I want say. Safari and Chrome both webkit based browsers so its normal to behaviour like that. So I guess that they calculating the height adding padding and margin to normal height. please google it "webkit calculated style"

Fatih Acet
  • 28,690
  • 9
  • 51
  • 58
0

Sometimes javascript does not work as expected when the page has validation errors.

First try validating your markup (HTML).

If validating does not work, try using jQuery.

jQuery is cross-browser compatible; you should get the exact same result on every browser.

JoshDM
  • 4,939
  • 7
  • 43
  • 72
Shaakunthala
  • 11
  • 3