홈페이지>웹 디자인 튜토리얼>웹 표준화

iframe 프레임 페이지 구현 적응형 높이 솔루션

저자：Eve Cole 업데이트 시간：2010-01-06 17:05:40

종종 상위 페이지는 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"><!--
(기능(){
/**
* 현재 도메인을 얻으세요
**/
함수 _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];
}
_호스트 이름을 반환합니다.
}
document.domain = _getDomain();
})();
// --></mce:script>

2. 하위 페이지 http://www.chinaz.com/xxx.htm에 다음 코드를 포함시킵니다. 그게 다야


<mce:script type="text/javascript"><!--
(기능(){
/**
* 현재 도메인을 얻으세요
**/
함수 _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];
}
_호스트 이름을 반환합니다.
}

window.onload = 함수()
{
//서브페이지 도메인 설정
document.domain=_getDomain();
function_setHeight()
{
if (window.parent != 창)
{
노력하다
{
//상위 iframe의 높이 설정
parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';
}
잡기(e)
{
}
}
//2초마다 설정합니다. 주로 서브페이지가 로드된 후 높이 변경과 호환됩니다.
setTimeout(_setHeight,2000);
}
//하위 페이지가 로드된 후 한 번 호출됩니다.
_setHeight();
}
})();
// --></mce:script>

www.chinaz.com, book.chinaz.com과 같은 다른 상위 페이지는 완전히 다른 도메인 이름을 갖습니다. 해결책은 프록시 페이지 www.chinaz.com/proxy.htm www.chinaz.com/index.htm 페이지를 사용하는 것입니다. 책 .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" 프레임border="0" 스크롤="아니요 " style="height:0;"></iframe>

다음 JS를 추가합니다.


  1. <mce:script type= "텍스트/자바스크립트" ><!--
  2. ( 기능 (){
  3.      /**
  4. * 현재 도메인을 얻으세요
  5. **/   
  6.      함수 _getDomain(){
  7.          var _hostname = window.location.hostname.toString();
  8.          var _hosts = _hostname.split( "." );
  9.          var _len = _hosts.length;
  10.          만약 (_len>2){
  11.              return _hosts[_len-2]+ ". "
  12. }
  13.          _호스트 이름을 반환합니다 .
  14. }
  15. document.domain = _getDomain();
  16. })();
  17. // --></mce:script>

2. www.chinaz.com/xxxx.htm의 키 코드:


<iframe 스크롤="아니요" 프레임경계="0" 스타일="표시: 없음;" mce_style="표시: 없음;" http://www.chinaz.com/proxy.htm#597" id="taobaoIframe">
</iframe>


<mce:script type="text/javascript"><!--
(기능(){
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">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<본문>
<mce:script type="text/javascript"><!--
(기능(){
/**
* 현재 도메인을 얻으세요
**/
함수 _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];
}
_호스트 이름을 반환합니다.
}
document.domain = _getDomain();
var 높이 = window.location.hash.substring(1);
노력하다{
var el = window.top.document.getElementById('J_selfAdapting');
만약(엘) {
el.style.height = 높이 + 'px';
}
}
잡기 (e) {}
})();
// --></mce:script>
</body>
</html>

관련 기사