iframe自适应高度解决方案

txf2004

浏览: 7040498 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript XHTML J#HTML

经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度，这就要求页面必须具有自适应功能。自适应思想比较简单：就是父页面中iframe高度必须要适时根据子页面高度进行调整。由于涉及到js操作，因此对于不同域名的自适应解决方案有所不同，主要是在解决跨域问题。

对于同父级域名下的自适应高度：jipiao.taobao.com/index.htm 页面中嵌入jiudian.taobao.com/xxx.htm页面

1.0 http://jipiao.taobao.com/index.htm中关键代码

不同父级页面，例如jipiao.taobao.com, www.koubei.com域名完全不一样，解决办法是使用一个代理页面jipiao.taobao.com/proxy.htm jipiao.taobao.com/index.htm页面嵌入 www.koubei.com/xxxx.htm，而xxx.htm需要隐藏嵌入jipiao.taobao.com/proxy.htm做为代理，可以将高度写在后面jipiao.taobao.com/proxy.htm#500，表示500px高度。

1.jipiao.taobao.com/index.htm页面中关键代码：

增加如下JS:

<mce:script type="text/javascript"></mce:script>

2. www.koubei.com/xxxx.htm 中关键代码：

<mce:script type="text/javascript"></mce:script>

3.在代理页面jipiao.taobao.com/proxy.htm中所有的代码如下：

<!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=GBK" /> </head> <body> <mce:script type="text/javascript"></mce:script> </body> </html>

分享到：