文档章节

如何设置iframe高度自适应,在跨域的情况下能做到吗?

 恐空控
发布于 2013/09/01 23:55
字数 959
阅读 354
收藏 10

 

  在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载。iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的实际高度,超出的部分无法显示;相反,如果iframe的高度过高,则页面上会出现大量的空白区域。我们可以通过属性或者CSS来设置iframe的高度,当不确定子页面内容的高度时,也可以通过脚本来进行动态指定。但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题!

  如题所述,本文在介绍可用方法的同时,也向大家询问除下文列出来的方法之外是否还有其它方法可寻?

  通过属性或CSS来设置iframe的高度这里就不再具体介绍了。首先来看看如何通过脚本进行设置。

复制代码
function ChangeFrameHeight(id) { var count = 1;
    
    (function() { var frm = document.getElementById(id); var subWeb = document.frames ? document.frames[id].document : frm.contentDocument; if (subWeb != null) { var height = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight);
            frm.height = height;
        } if (count < 3) {
            count = count + 1;
            window.setTimeout(arguments.callee, 2000);
        }
    })();
}
复制代码

  假设iframe子页面和父页面都在同一域内,通过该脚本可以对给定id的iframe高度进行动态调整。为了防止父页面在子页面之前加载完成,该函数会每隔2秒重新执行一次,一共执行3次。极端情况下子页面的加载速度会慢于父页面,可适当对执行次数和时间做调整。

<iframe frameborder="0" width="450" marginheight="0" marginwidth="0" scrolling="no" id="frm1" name="frm1" src="abc.html" onload="ChangeFrameHeight('frm1')"></iframe>

   如果遇到子页面跨域的问题,可通过HTML5的postMessage来实现,但前提是子页面需要主动向父页面发送信息。下面是子页面部分:

复制代码
<!DOCTYPE html> <head> </head> <body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');"> <h3>Got post?</h3> <p>Lots of stuff here which will be inside the iframe.</p> </body> </html>
复制代码

  在父页面中获取到子页面传递过来的信息,然后对iframe的高度进行调整。

复制代码
<script type="text/javascript"> function resizeCrossDomainIframe(id, other_domain) { var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) { if (event.origin !== other_domain) return; // only accept messages from the specified domain if (isNaN(event.data)) return; // only accept something which can be parsed as a number var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar  iframe.height = height + "px";
    }, false);
  } </script> <iframe src='abc.html' id="frm1" onload="resizeCrossDomainIframe('frm1', 'http://example.com');"> </iframe>
复制代码

  有关如何使用HTML5的postMessage()方法可以查看这篇文章http://dev.w3.org/html5/postmsg/#web-messaging

  但是在大多数情况下,iframe中所引用的子页面除了和父页面不在同一域之外,我们可能根本无法对子页面进行任何操作,或者说子页面根本没有提供Corss-document messaging功能。在这种情况下,通过postMessage()方法也无法获取到子页面的任何信息。由于无法和子页面进行任何交互,也就没有办法得知子页面的document对象,从未无法根据子页面的实际高度来调整父页面iframe的height属性了。

  目前没有其它实际有效的方法来处理上面遇到的问题。默认情况下可以给iframe指定一个比较大的高度,这样假设所引用的子页面内容不会超出范围,除了在页面上会留下部分空白区域外,内容显示基本不会有问题。

  那是否还存在其它比较有效的解决方法呢?期待!

本文转载自:http://www.cnblogs.com/jaxu/archive/2013/08/30/3291400.html

粉丝 10
博文 22
码字总数 7160
作品 0
成都
私信 提问
加载中

评论(1)

silence_狂想
silence_狂想
同样期待
Iframe高度自适应(兼容IE/Firefox、同域/跨域)

看转贴吧 但是需要说明的是,就是大家不要以为可以用这种方法来控制别人的网页,不行的 这个跨域虽说域名不一样,但必须都是你的,也就是你可以修改的才行,这个跨域这种方法可以实现,但是如...

thinkgood
2013/10/14
335
0
iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接...

银月光海
2016/05/23
94
0
跨域实现IFRAME自适应高度~续(终级)

IFRMAE请求一个跨域时,而这个跨我们没有操作权限,我们只有加一个HTML文件的权限,如何实现自适应行高 这需要一个中间页面iframe.html 原理:通过改变top.location的hash值,来实...

mcy247
2017/12/06
0
0
JavaScript 处理Iframe自适应高度的问题

1.同域名下Iframe自适应高度的处理 当然此处我用的是Asp.Net MVC 此处src设置为路由结构

aehyok
2013/03/28
0
0
使用iframe解决Javascript跨域问题

在今年的baidu salon分享会上黄方荣主讲的《WEB数据交互的艺术》中提到一个非常优雅绝妙的解决方案!话不多说,直接上解决方案原理图: 该图要解决的问题说明如下: 在AAA.com域名下的index...

黄平俊
2010/08/13
5.9K
3

没有更多内容

加载失败,请刷新页面

加载更多

定期批量改密,实现高效运维,保障口令安全

随着企业IT资产规模的不断增大,各类主机、应用系统的管理也变得愈加困难。 对于系统管理员来说,保证操作系统的密码安全是其重要工作,在需要维护众多的主机时,其面临的困境将是: 1、难以...

堡垒啊
34分钟前
5
0
怎样在磁盘上查找MySQL表的大小?这里有答案

导读 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应该在 INFORMATION_SCHEMA.TABLES 中提供这些信息吗?没那么简单! 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎...

问题终结者
今天
6
0
jQuery load() 方法实现加载远程数据

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。 语法: $(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的...

前端老手
今天
5
0
Spring Boot缓存实战 Redis 设置有效时间和自动刷新缓存-2

问题 上一篇Spring Boot Cache + redis 设置有效时间和自动刷新缓存,时间支持在配置文件中配置,说了一种时间方式,直接扩展注解的Value值,如: @Override@Cacheable(value = "people#${s...

xiaolyuh
今天
10
0
怎样在磁盘上查找MySQL表的大小?这里有答案

我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应该在 INFORMATION_SCHEMA.TABLES 中提供这些信息吗?没那么简单! 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应...

Linux就该这么学
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部