跨域从子页面设置父页面iframe高度（前提，两个域名下都有操作权限）

最新推荐文章于 2023-01-06 14:40:31 发布

不想离开水的鱼

最新推荐文章于 2023-01-06 14:40:31 发布

阅读量3.7k

点赞数 3

分类专栏：前端文章标签： iframe 跨域调节高度

本文链接：https://blog.csdn.net/ivyandrich/article/details/24372909

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

之前在论坛里看到有个同学问关于跨域调整iframe高度的问题，正好之前解决过类似问题，鉴于此问题还是有一定的通用性，索性总结一下，记录于此。

具体思路如下：

父页面域名为： www.a.com

IFRAME里子页面域名为： www.b.com

1.在父级页面所在域名（www.a.com）下设置一个文件，（用来设置IFRAME的高度）比如：http://www.a.com/setHeight.html

2.在子级页面加载完毕后，计算当前页面高度付给一个变量cheight，然后动态创建一个iframe，src是http://www.a.com/setHeight.html#cheight;

3.通过在setHeight.html页面中parent.parent.document.getElementById('iframeid')来调整iframe的高度

4.解释一下，在子页面里动态创建的iframe跟当前子页面的父级页面是同一个域名，这样就不存在跨域问题了。

举例：
假设父页面的域名是www.a.com，页面名字是 A.html；子页面的域名是www.b.com，页面名字是 B.html

父页面 A.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>
    <meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>
    <body>
    <iframe height='200px' id='iframe1' src="http://www.b.com/B.html"></iframe>
</body>
</html>

父级页面所在域名下的用于调节iframe高度的页面 setHeight.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>
    <meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>
    <body>
        <div></div>
        <script type="text/javascript">
            window.onload = function()
            {
                var b_iframe = parent.parent.document.getElementById("iframe1");
                var hash_url = window.location.hash.split("#");
                var hash_height = hash_url[1]+"px";
                b_iframe.style.height = hash_height;
            }
        </script>
    </body>
</html>

子页面 B.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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body style="background-color:#ccc">
    <div style="height:600px;">sdfsfsssfsfs</div>
    <script>
        window.onload = function()
        {
            var iframe = document.createElement("iframe");
            iframe.width='0px';
            iframe.height='0px';
            var currentheight = document.body.scrollHeight;
            iframe.src='http://www.a.com/setHeight.html#'+currentheight;
            document.body.appendChild(iframe);
        }
    </script>
</body>
</html>

可见默认的iframe高度是200px,而iframe中B.html的实际高度至少为600px,当B.html加载完成时，会自动调整其父页面iframe的高度

不想离开水的鱼

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
跨域从子页面设置父页面iframe高度（前提，两个域名下都有操作权限）

如果跨域的话，也可以从子页面调整父页面里IFRAME的高度，但是前提是，这俩域名下你都有权限操作。具体思路如下：[img=http://img.bbs.csdn.net/upload/201404/23/1398238646_194388.jpg][/img]父页面域名为： www.a.comIFRAME里子页面域名为： www.b.com[color=
复制链接

扫一扫