Question

我正在尝试使用Iframe自动高度，而对我最有用的代码是：

<!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：使用名称“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>

在IE，Opera和Firefox中，它运行得很好。在Chrome和Safari中，似乎无法正常工作。一位朋友说这个问题可能就在这里：

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

Chrome中的示例： http://www.warezexpress.com/ups/2009_setembro/chrome.jpg

Safari中的示例:( iframe扩展，不会减少） http://www.warezexpress.com/ups/2009_setembro/safari.jpg

但我还是不懂JavaScript来解决这个问题。我在论坛中准备好了这段代码。谢谢你的一句话！

Answer 1

如果您正在努力解决浏览器兼容性问题，最好从像jQuery这样的框架开始，尤其是如果您不需要将vanilla js用于任何显式原因。

JavaScript在每个浏览器中表现不同

1 个答案: