`
xuedong
  • 浏览: 287289 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

iframe 跨域的高度自适应问题

阅读更多

      iframe的高度自适应问题可以说不是一个新鲜的了。大家都知道iframe的高度是不能自适应的,那么我们需要他自适应怎么办呢?最简单的办法就是利用js在iframe加载的时候读出内容的高度,然后动态改变iframe的高度。但是如果我们引用的页面是站外的,不在同一个域名下就会出现问题。

      因为js通常是不支持跨域访问的,所以在这时候用js就不能捕获到页面内容的高度了,也就不能做到自适应了。那么我们该怎么做呢?既然不能跨域访问,那么我们就想办法把他放置在同一个域内。

这里我们需要3个文件。a.html,b.html,c.html.

      其中a 是用来放置iframe的,b是被引用的页面,c是我们的一个跳板。

 

 

a.htnl

 

<!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″ />
<title>frame</title>
</head>

<body>
<iframe id=”iId” name=”iId” src=http://b.test.com/b.html frameborder=”0″ scrolling=”no” width=100%></iframe>

</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″ />
<title>frame</title>
</head>

<body>

<script language=”javascript”>

var urlC = “http://a.test.com/c.html“;
document.write(“<iframe id=\”iframeC\” name=\”iframeC\” src=\”"+urlC+”\” frameborder=\”0\” height=\”0\”></iframe>”);
hashH = document.body.scrollHeight;
document.getElementById(“iframeC”).src=urlC+”#”+hashH;

</script>
</body>

</html>

 

 

 

 

c.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″ />
<title>frame</title>
</head>
<script language=”javascript”>
    var iObjaa = this.parent.parent.document.getElementById(‘iId’);
    iObjHaa = this.parent.parent.frames["iId"].frames["iframeC"].location.hash;
    iObjaa.style.height = iObjHaa.split(“#”)[1]+”px”;
</script>
<body>
</body>
</html>

 

 

 

我们把c和a放在一个域名下,b放在另外一个域名下。当b加载的时候会获取自己的内容高度,并把这个高度通过c传递到a域名下,a和c在一个域名下,所以c内的js就可以操作a内的iframe了。最终达到iframe跨域高度自适应的目的。

文章作者:IceSun
本文地址:http://www.iscss.tk/?p=78
版权所有 © 转载时必须以链接形式注明作者和原始出处!

 

欢迎查看本人博客:www.java.hourb.com

 

 

分享到:
评论

相关推荐

    iframe跨域嵌套自适应高度

    iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)

    解决iframe跨域高度自适应问题的源码

    有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载

    完美解决跨域iframe的高度自适应

    完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。

    iframe跨域自适应高度模板

    iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板

    iframe跨域高度自适应例子源码

    有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载

    Iframe跨域自适应高度

    可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了

    iframe跨域常用问题和iframe页面自适应

    这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。

    IFrame跨域高度自适应实现代码

    最近在做项目中,遇到一个问题,就是iframe高度的自适应问题,以下是解决办法

    iframe 跨域 自动适应高度

    iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    利用location.hash实现跨域iframe自适应

    页面域关系: 主页面a.html所属域... 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.

    js跨域问题之跨域iframe自适应大小实现代码

    前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。

    Iframe 高度自适应(兼容IE/Firefox、同域/跨域)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引 发出同域、跨域两种情况。 同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为...

    如何设置iframe高度自适应在跨域情况下的可用方法

    iframe的高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题

    iframe自适应高度.rar

    介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。

    JavaScript 处理Iframe自适应高度(同或不同域名下)

    Iframe自适应高度一直都备受关注,接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应,感兴趣的朋友可以参考下哈

    iframe窗口高度自适应的实现方法

    无法进行跨域操作,使得问题比较棘手参考了一下网上的做法,引入了一个代理页面,或者叫做中介 agent.html,属于domainA然后,在domainB 中的other.html中,再使用iframe将agent.html进行嵌套 好了,现在情况是这样...

    iframe-resizer-master.rar

    iframe-resizer-master解决iframe高度自适应问题,跨域问题 iframe-resizer-master解决iframe高度自适应问题,跨域问题

Global site tag (gtag.js) - Google Analytics