开元周游
德国频道
查看: 1329|回复: 4
打印 上一主题 下一主题

[互联网] 谁有经验做网页 iframe 自适应高度

[复制链接]
跳转到指定楼层
1#
发表于 17.1.2011 22:40:37 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
即时机票
谁有经验做网页     iframe 自适应高度。

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

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



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

哪有经验 说说

多谢
2#
发表于 22.1.2011 07:16:00 | 只看该作者
回复 支持 反对

使用道具 举报

3#
发表于 23.1.2011 04:07:20 | 只看该作者
同域下很简单
以jquery为例,这样就只要一句话搞定了
  1. $(window.parent.document).find("#iframeid").height($("body").height() );
复制代码
回复 支持 反对

使用道具 举报

4#
 楼主| 发表于 23.1.2011 11:34:32 | 只看该作者
能把代码写全一点吗?  并且告诉我一下吧代码应该复制到什么位置,  我极为初学 不好意思。
多谢多谢
回复 支持 反对

使用道具 举报

5#
发表于 24.1.2011 03:31:16 | 只看该作者
我加了一个alert出的高度是为了让你理解,实际中你可以去掉。你可以直接下载附件,其内容如下:
iframe.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  5. <script language="JavaScript">
  6. $(function(){
  7.         alert($("body").height());
  8.         $(window.parent.document).find("#iframeid").height($("body").height());
  9. });
  10. </script>
  11. </head>
  12. <body>
  13. 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
  14. </body>
  15. </html>
复制代码
index.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. </head>
  5. <body>
  6. <iframe frameborder="no" width="100%" marginheight="0" marginwidth="0" border="0" src="iframe.html" id="iframeid"></iframe>
  7. <hr />
  8. xixi
  9. </body>
  10. </html>
复制代码



iframe_sample.zip

903 Bytes, 下载次数: 109

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点信息

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

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

GMT+1, 14.11.2024 03:23

关于我们|Apps

() 开元网

快速回复 返回顶部 返回列表