谁有经验做网页 iframe 自适应高度

gao_liang · 发表于 17.1.2011 22:40:37

谁有经验做网页 iframe 自适应高度。

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

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

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

哪有经验说说

多谢

yellowbee · 发表于 22.1.2011 07:16:00

帮顶，等人回答

taohui · 发表于 23.1.2011 04:07:20

同域下很简单
以jquery为例，这样就只要一句话搞定了

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

复制代码

gao_liang · 发表于 23.1.2011 11:34:32

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

taohui · 发表于 24.1.2011 03:31:16

我加了一个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 自适应高度

请您关注我们在:

站点信息

站点统计| 举报| Archiver| 手机版| 小黑屋

Powered by Discuz! X3.2 © 2001-2014 Comsenz Inc.

GMT+1, 12.11.2024 18:00

关于我们|Apps

() 开元网