多层嵌入式框架（iframe）使用总结

最新推荐文章于 2024-04-21 11:38:21 发布

VIP文章 zhilunchen

最新推荐文章于 2024-04-21 11:38:21 发布

阅读量3.6k

点赞数

文章标签： iframe 框架嵌入式 function javascript web开发

本文链接：https://blog.csdn.net/zhilunchen/article/details/2959059

版权

在Web开发过程中，为了提高页面架构层次的清晰性和灵活性，应对复杂的页面布局，使用嵌入式框架iframe可能是最有效的解决办法。如果布局比较复杂或页面层次较多，则可能会用到嵌套多层的iframe，然而iframe并不会根据页面高度自动调整自身高度，为了屏蔽滚动条提高视觉效果，就需要使用javascript代码使iframe自动调整高度。

1、单层情况，假设在A.aspx页面的某个位置嵌入页面B.aspx,则在A页面中需使用一个嵌入框架iframeA,其示例代码如下：

        ...
        <head>
                ...
                <script type="text/javascript">
                        //iframeName:框架ID
                        function SetIframeSize(iframeName)
                        ...{
                                var iframe = document.getElementById(iframeName);
                                try
                                ...{
                                        var bHeight = iframe.contentWindow.document.body.scrollHeight;
                                        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                                        //据说这两个高度可能不一样
                                        var height = Math.max(bHeight, dHeight);
                                        iframe.height =    height;

最低0.47元/天解锁文章

zhilunchen

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
多层嵌入式框架（iframe）使用总结

在Web开发过程中，为了提高页面架构层次的清晰性和灵活性，应对复杂的页面布局，使用嵌入式框架iframe可能是最有效的解决办法。如果布局比较复杂或页面层次较多，则可能会用到嵌套多层的iframe，然而iframe并不会根据页面高度自动调整自身高度，为了屏蔽滚动条提高视觉效果，就需要使用javascript代码使iframe自动调整高度。 1、单层情况，假设在A.aspx页面的某个
复制链接

扫一扫