CODEWITHSUNDEEP
phpjavascripthtmlcssbrowser
user188962
user188962

Reputation:

"Body Onload" to send "ScrollHeight" not working properly in Chrome and Safari

I just asked a question here, about why an iframe_resize function wasn't working.

After troubleshooting, I found out that the problem is not the function, so I am posting a new question.

I have an index.html with this resize function:

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

Then I have a form in index.html with target set to an iframe, and action set to query.php:

   <form action='query.php' target='iframe001'>

The in my query.php:

 //ALOT OF PHP HERE
 <body onload="parent.resize_iframe(document.body.scrollHeight)">
 <?php echo $results_table; ?>
 </body>

The problem is, in Chrome and Safari, the scrollHeight isn't changed at all.

In all other browsers, scrollHeight changes and the function works.

However, in Chrome/Safari, when clicking on a link anywhere on the page, and then clicking on the browser back button to return to the search results (iframe content), THEN the iframe is resized properly even in Chrome/Safari... ?

This is very strange behaviour for me.

Can somebody explain this?

Thanks

PS: I think this person has the same problem: iframe resizing with scrollheight in chrome/safari

Upvotes: 0

Views: 3588

Answers (2)

OZZIE
OZZIE

Reputation: 7348

It seems there is a bug in general with webkit browsers. https://bugs.chromium.org/p/chromium/issues/detail?id=34224&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=

WORKAROUND(!): I had margin applied to a wrapping element like this inside the iframe:

<div class="wrapper" style="margin-top: 30px"><!-- ... content --></div>

changed it to be instead:

<div class="wrapper" style="padding-top: 30px"><!-- ... content --></div>

then scrollHeight is correct :)

Upvotes: 0

Divlancer
Divlancer

Reputation: 36

Did you try offsetHeight property?

Upvotes: 2

Related Questions