德国开元华人社区开元周游

标题: 谁有经验做网页 iframe 自适应高度 [打印本页]

作者: gao_liang 时间: 17.1.2011 22:40
标题: 谁有经验做网页 iframe 自适应高度
谁有经验做网页 iframe 自适应高度。

我网站包括2部分一部分上面导航菜单，下面是显示内容，内容部分想用 iframe做，因为可以载入不同html在同一窗口中，这样比较方网页更新。但是 iframe的自适应高度一直没解决，因为如果超过 iframe的设置高度，它会出滚动条这个很难看。

我最近在网上找了一段代码可以实现自适应高度，不过也有一些问题，很多网站不支持，而且我的网站内的lightbox效果有受影响。

www.gao-liang.de 我的网站，
http://www.grip.de/gao/test/ 是我做的 iframe 实验，点击上面的链接就能发现我说的问题。

哪有经验说说

多谢

作者: yellowbee 时间: 22.1.2011 07:16
帮顶，等人回答

作者: taohui 时间: 23.1.2011 04:07
同域下很简单
以jquery为例，这样就只要一句话搞定了

$(window.parent.document).find("#iframeid").height($("body").height() );

复制代码

作者: gao_liang 时间: 23.1.2011 11:34
能把代码写全一点吗？并且告诉我一下吧代码应该复制到什么位置，我极为初学不好意思。
多谢多谢

作者: taohui 时间: 24.1.2011 03:31
我加了一个alert出的高度是为了让你理解，实际中你可以去掉。你可以直接下载附件，其内容如下：
iframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="JavaScript">
$(function(){
alert($("body").height());
$(window.parent.document).find("#iframeid").height($("body").height());
});
</script>
</head>
<body>
haha<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe<br />hehe
</body>
</html>

复制代码

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<iframe frameborder="no" width="100%" marginheight="0" marginwidth="0" border="0" src="iframe.html" id="iframeid"></iframe>
<hr />
xixi
</body>
</html>

复制代码

iframe_sample.zip

903 Bytes, 下载次数: 109

欢迎光临德国开元华人社区开元周游 (https://forum.kaiyuan.de/)

德国开元华人社区 开元周游

德国开元华人社区开元周游