PHP程序员站--PHP编程开发平台
 当前位置:主页 >> PHP基础 >> 每日技巧 >> 

iframe框架实现自适应高度

iframe框架实现自适应高度

来源:  作者:  发布时间:2010-01-08
经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子

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

对于同父级域名下的自适应高度:www.chinaz.com/index.html 页面中嵌入www.chinaz.com/xxx.html页面

 

 

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

<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxx.htm" mce_src="http://www.chinaz.com/xxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe>

页面增加如下JS:

<mce:script type="text/javascript"><!--
(function(){
/**
* 获取当前域
**/
function _getDomain(){
var _hostname = window.location.hostname.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.length;
if(_len>2){
return _hosts[_len-2]+"."+_hosts[_len-1];
}
return _hostname;
}
document.domain = _getDomain();
})();
// --></mce:script>

2.子页面http://www.chinaz.com/xxx.htm 中嵌入如下代码。即可 


<mce:script type="text/javascript"><!--
(function(){
/**
* 获取当前域
**/
function _getDomain(){
var _hostname = window.location.hostname.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.length;
if(_len>2){
return _hosts[_len-2]+"."+_hosts[_len-1];
}
return _hostname;
}

window.onload = function()
{
//设置子页面的域
document.domain=_getDomain();
function _setHeight()
{
if (window.parent != window)
{
try
{
//设置父级iframe的高度
parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';

}
catch(e)
{
}
}
//每隔2s设置一次,主要为了兼容子页面加载完毕之后高度再变化
setTimeout(_setHeight,2000);
}
//子页面加载完毕之后调用一次
_setHeight();
}
})();
// --></mce:script>

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

 

 

1.www.chinaz.com/index.htm页面中关键代码:


<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxxx.htm" mce_src="http://www.chinaz.com/xxxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe>

增加如下JS:


  1. <mce:script type="text/javascript"><!--   
  2.  (function(){   
  3.     /**  
  4.      *  获取当前域  
  5.      **/  
  6.     function _getDomain(){   
  7.         var _hostname = window.location.hostname.toString();   
  8.         var _hosts = _hostname.split(".");   
  9.         var _len = _hosts.length;   
  10.         if(_len>2){   
  11.             return _hosts[_len-2]+"."+_hosts[_len-1];   
  12.         }   
  13.         return _hostname;   
  14.     }   
  15.     document.domain = _getDomain();   
  16. })();   
  17. // --></mce:script> 

2. www.chinaz.com/xxxx.htm 中关键代码:


<iframe scrolling="no" frameborder="0" style="display: none;" mce_style="display: none;" src="http://www.chinaz.com/proxy.htm#597" mce_src="http://www.chinaz.com/proxy.htm#597" id="taobaoIframe">
</iframe>


<mce:script type="text/javascript"><!--
(function(){
var pageHeight = document.body.scrollHeight;
document.getElementById('taobaoIframe').src = 'http://www.chinaz.com/proxy.htm#' + pageHeight;
})();
// --></mce:script>

3.在代理页面book.chinaz.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"><!--
(function(){
/**
* 获取当前域
**/
function _getDomain(){
var _hostname = window.location.hostname.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.length;
if(_len>2){
return _hosts[_len-2]+"."+_hosts[_len-1];
}
return _hostname;
}
document.domain = _getDomain();
var height = window.location.hash.substring(1);
try{
var el = window.top.document.getElementById('J_selfAdapting');
if(el) {
el.style.height = height + 'px';
}
}
catch (e) {}
})();
// --></mce:script>
</body>
</html>


延伸阅读:
防止被IFRAME的代码
防止被iframe,网站被挂iframe木马的解决方案
Tags: iframe   框架   高度   自适应  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号