JavaScript behaving differently in each browser

Question

I'm trying to use an Iframe auto-height, and the code that served me most was this:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>

<script>
  function alertsize(pixels){
    pixels+=32;
    document.getElementById('myiframe').style.height = pixels+"px";
  }
</script>

</head>

<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>

Iframe: Save with the name "theiframe.htm"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
  function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
    parent.alertsize(document.body.scrollHeight);
 }
</script>
</head>

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

<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
    more height!<br />
    more height!<br />
    more height!<br />
    more height!<br />
    more height!<br />
    more height!<br />
    more height!<br />
    more height!<br />
    more height!<br />
    more height!<br />
    more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END
<div style="clear:both;"></div>

</body>
</html>

In IE, Opera and Firefox, it works perfectly. In Chrome and Safari, does not seem to work. A friend said that the problem is possibly here:

onload="parent.alertsize(document.body.scrollHeight);"

Example in Chrome: http://www.warezexpress.com/ups/2009_setembro/chrome.jpg

Example in Safari: (the iframe expands, and does not decrease) http://www.warezexpress.com/ups/2009_setembro/safari.jpg

But I still do not understand JavaScript to solve this. I took this code ready in a forum. Thanks for any word!

Possible answer here: http://stackoverflow.com/questions/3053072/iframe-resizing-with-scrollheight-in-chrome-safari — showdev, Apr 25 '13 at 17:27
What do you mean by "doesn't work"? What doesn't work? Do you see any errors? Is `alertsize` not called? Is the parameter passed not the right value? Does the height not change? What happens that shouldn't and what doesn't happen that should? — gen_Eric, Apr 25 '13 at 17:29
In Chrome the Iframe gets smaller shows scrollbar, hiding content. — Paulo Diaas, Apr 25 '13 at 17:36
@PauloDiaas The main idea of the linked answer is to set your frame's `height` to `auto` before getting `scrollHeight`. I haven't tried it myself, so please let us know if it helps. — showdev, Apr 25 '13 at 18:24

score 0 · Answer 1 · answered Apr 25 '13 at 17:26

0

If browser compatibility is something you're struggling with, it's better to start with a framework like jQuery, especially, if you don't need to use vanilla js for any explicit reason.

answered Apr 25 '13 at 17:26

Foreign Object

1,630
11
22

jQuery isn't *always* the answer. – gen_Eric Apr 25 '13 at 17:33
Where did I say `jQuery` is always the answer. – Foreign Object Apr 25 '13 at 17:35
and, based on what Paulo has posted, jQuery very well could be the answer. – Foreign Object Apr 25 '13 at 17:36
@c--misura You said "it's better to start with a framework like `jQuery`" – Ian Apr 25 '13 at 17:38
@Ian, I also said 'if you don't need to use vanilla js', also, Paulo stated that he grabbed the code from a forum. I don't think my assumption that he might want to try jQuery is contentious, or off-base. – Foreign Object Apr 25 '13 at 17:44
@c--misura I wanted to be able to do this, but do not dominate JavaScript or jQuery. My job is HTML and CSS, but I'm doing a training of JavaScript and jQuery. Meanwhile'm picking up some scripts ready around ... Sorry. – Paulo Diaas Apr 25 '13 at 17:44
Paulo, no problem. Even though it's widely adopted, I know not every developer is aware of jQuery, that's why I suggested it. If you're trying to learn, then I suggest working through it using JS. – Foreign Object Apr 25 '13 at 17:49

JavaScript behaving differently in each browser

1 Answers1