无法弄清楚为什么Chrome / Safari无法在这里获得ScrollHeight [英] Can't figure out why Chrome/Safari can't get the ScrollHeight right here
问题描述
我刚刚问了一个关于为什么某些js代码无法在Chrome和Safari 100％中运行的问题，但经过更多的故障排除后，我想我已经发现这是我应该发布的问题。
我有一个包含表单的页面。此表单的目标是同一页面上的iframe。
iframe是动态的，基于php。
$ b
这是我的php iframe内容的底部：
< body onload =parent.resize_iframe（document.body.scrollHeight）>
<？php echo $ display_table; ？>
正如您所看到的，我调用了一个函数来调整主页面（父页面）中iframe高度的大小， 。
这个效果很好，而且确实可以调整大小，但在Chrome和Safari中，调整大小的设置高度应该比应该高一些。因此，如果高度为500px，那么Chrome和Safari将其设置为大约2000px，这是iframe文档高度的最大值。
这是为什么？一个想法可能是，在scrollHeight被发送到resize函数之前，body没有被完全加载？也许有什么办法让它等到文档是完全加载？
有一件令我困惑的事情是，当我点击主页面上的一个链接，然后回来时，页面调整大小工作良好，并设置甚至在Chrome / Safari中也应该是500px。但是，当我在浏览器中点击返回时。
嗯，我真的不明白这一点，所以请在这里帮助我。
谢谢
document.body.scrollHeight将始终返回chrome中的两个值之一：
如果文档内容长于窗口的高度，则返回内容的高度
如果文档短于窗口的高度，则返回窗口的高度。
听起来很像你在iframe上设置了一个高度。当iframe中的内容加载时，它会将iframe视为窗口。因此，如果iframe的高度设置为2000，并且内容的高度仅为500，则chrome将返回2000的高度偏移。
如果是这种情况，最简单的事情要做的就是将iframe的高度设置为1px。 （或者自动）
另一个选项（就像point.m....points out）是你可以在包含所有内容的主体之后创建一个wrapper div。然后你可以获得该div的高度并将其返回给你的父函数。
关于这个问题：
有没有办法让它等到
直到文档被完全加载？
答案是肯定的，你已经在做。由于您在onload上调用parent.resize_iframe，因此只有在屏幕上加载了所有HTML，JS，CSS和图像之后，该函数才会被调用。但是应该指出的是，使用body标签onload函数有一些缺点。一，它是否必须在调用onload之前加载所有图像。其次，如果有人重新绑定到window.onload，你的函数将永远不会被调用。如果您有兴趣了解关于onload的更多信息和处理方法，请查看此链接 http：/ /www.webreference.com/programming/javascript/onloads/
I just asked a question about why a certain js code won't work in Chrome and Safari 100%, but after more troubleshooting I think I have found out that this is the question I should be posting.
I have a page which has a form in it. This form's target is an iframe on the same page. The iframe is dynamic, and php based.
This is the bottom of my php iframe content:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
<?php echo $display_table; ?>
As you see, I call a function to resize the iframe's height in the main page (parent page).
This works fine, and it does in fact get resized, BUT, in Chrome and Safari the resize is setting a height "higher" than it should be. So if the height is 500px then Chrome and Safari sets it to around 2000px, which is the maximum of the iframe document height.
Why is this? One thought might be that the body isn't fully loaded before the scrollHeight is being sent to the resize function maybe?
Is there any way of making it wait until the document is fully loaded?
One thing that confuses me is that when I click a link on the main page, and then hit back, the page resize works good, and is set to 500px as it should be even in Chrome/Safari. But that's when I hit "back" in the browser.
Hmmm, I really don't understand this, so please help me out here.
Thanks
document.body.scrollHeight will always return one of two values in chrome:
if the document content is longer then the height of the window, then the height of the content is returned
if the document is shorter then the height of the window, then the height of the window is returned.
It sounds alot like you have a height set on the iframe. When the content in the iframe loads, it will treat the iframe as the window. So, if the iframe's height is set to 2000 and your content's height is only 500, chrome will return an offsetheight of 2000.
If this is the case, the simplest thing to do is set the height of the iframe to 1px. (or auto)
Another option (as pointy um..points out) is that you could create a wrapper div right after the body that contains all of your content. You can then just get the height of that div and return that to your parent function
Regarding this question:
Is there any way of making it wait until the document is fully loaded?
The answer is yes, and your already doing it. Since your calling parent.resize_iframe on onload, the function will not get called till all of the HTML, JS, CSS and images are loaded on the screen. However it should be pointed out there are a few draw backs to using the body tags onload function. One, is it has to load all the images before it calls onload. Secondly, if someone rebinds to window.onload your function will never get called. If your interested in learning more about onload and ways to deal with it, check this link out http://www.webreference.com/programming/javascript/onloads/
这篇关于无法弄清楚为什么Chrome / Safari无法在这里获得ScrollHeight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
