首页新闻找找看学习计划

请教一个关于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会报不能跨域操作父窗体的错误.

 

再次感谢!

 

 

 

hexllo的主页 hexllo | 菜鸟二级 | 园豆:405
提问于:2015-09-30 10:14
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册