为什么这个 js 代码不能在 Chrome 和 Safari 中工作？答案

【问题标题】：Why wont this js code work in Chrome and Safari?为什么这个 js 代码不能在 Chrome 和 Safari 中工作？
【发布时间】：2011-04-20 11:01:16
【问题描述】：

我的 index.html 上有一个 iframe，这个 iframe 是动态的。

在我的 index.html 上，我有一个表单，提交时会在 iframe 中显示结果。

问题是 iframe 高度也必须是动态的，这样网站才能看起来“干净”。

所以在 iframe php 页面中，我有这段代码：

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

并且在 index.html（在这种情况下是父级）我有这个功能：

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

这里的问题不是函数，而是 Safari 和 Chrome 认为 scrollHeight 比它大很多。

我尝试过提醒 scrollHeight，在 Chrome 和 Safari 中 nr 始终在 2000 像素左右，但在其他浏览器中它应该是动态的（500、300、800 等）...

有什么想法吗？

更新：

我注意到，当我单击索引上的链接，然后单击浏览器后退按钮时，iframe 确实在 SAFARI 和 CHROME 中正确调整大小。

但我必须在浏览器中单击返回才能正常工作...

【问题讨论】：

内联 JavaScript 属性太棒了 1999 年。
尝试写：byId('iframe001').style.height=(parseInt(new_height) + 20) + 'px';
@Skilldrick：不管怎样，<body onload="..."> 是在页面加载时调用函数的唯一标准化方式。
@Tim ：@Skilldrick 的意思是您应该在属性中调用本地命名的函数。通过这种方式，功能与标记是分开的。
@Hogan：这是一个勇敢的防守和一个公平的观点，但我完全不确定他的意思。我想他的意思是最好使用window.addEventListener/window.attachEvent，可能使用诸如jQuery之类的库来抽象特定的浏览器差异。

【解决方案1】：

当页面出现验证错误时，有时 javascript 无法按预期工作。

首先尝试验证您的标记 (HTML)。

如果验证不起作用，请尝试使用 jQuery。

jQuery 是跨浏览器兼容的；你应该在每个浏览器上得到完全相同的结果。

【讨论】：

【解决方案2】：

我不确定，但我想说我想说的话。 Safari 和 Chrome 都是基于 webkit 的浏览器，所以这样的行为是正常的。所以我猜他们在计算高度时将填充和边距添加到正常高度。请用谷歌搜索“webkit 计算样式”

【讨论】：