请教一个关于iframe使用的问题..
0
悬赏园豆：20
[待解决问题]
主页面分为左右2个部分,
左边是个div,里边是各页面的导航链接.
右边是个iframe,内容随左边的导航链接而变化.
我在每个被iframe载入的页面的ready事件中,
都写了让外部iframe的高度自动调整为页面内容的高度,
代码如下:
$(function () { $(parent.window.document).find("iframe").height($("body").height()); });
这样做的目的,是不要iframe出现滚动条的前提下,能完整的显示页面内容.[只在主页面出现滚动条.]
这样写目前是没问题的,但是...当页面中有折叠的元素展开时,iframe就出现滚动条了,[加上外部页面的滚动条,就是双层滚动条,效果很不好]如下图:
看了下QQ邮箱的页面也用了iframe,并解决了双层滚动条的问题,但不知道它是怎么解决的.
我将我的demo代码放上来,代码不长,请大家帮忙看下怎么解决,谢谢了!
main.html页面代码
<!DOCTYPE html> <html> <head> </head> <body> <div style="border:1px solid red; width:18%; float:left;"> <ul> <li>菜单1</li> <li> 菜单2 <ul> <li>菜单2.1</li> <li>菜单2.2</li> </ul> </li> <li> 菜单3 <ul> <li>菜单3.1</li> <li> 菜单3.2 <ul> <li>菜单3.2.1</li> <li>菜单3.2.2</li> <li>菜单3.2.3</li> </ul> </li> <li>菜单3.3</li> </ul> </li> <li>菜单4</li> </ul> </div> <div style="border: 1px solid blue; height: 100%; width:80%; float: right;" id="div"> <iframe id="fid" name="fff" src="form.html" width="100%" frameborder="0" scrolling="auto"></iframe> </div> </body> </html>
被载入页面(form.html)的代码:
<!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script type="text/javascript"> $(function () { $(parent.window.document).find("iframe").height($("body").height()+30); }); </script> </head> <body> <div style="background-color:gray;width:100%; height:900px;"></div> <button onclick="$('#div2').show();">showMore</button> <div style="background-color:black;width:100%; height:500px; display:none;" id="div2"></div> </body> </html>
如果您考下来帮我调试,请修改jquery.js的引用路径.
另外请用FF或IE11调试,chrome会报不能跨域操作父窗体的错误.
再次感谢!
