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

iframe 프레임 페이지는 적응력 높이 솔루션을 구현합니다

저자：Eve Cole 업데이트 시간：2025-02-05 14:05:58

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_selfatting"src = "http://www.chinaz.com/xxx.htm"mce_src = "http://www.chinaz.com/xxx.htm"frameborder = "0"scrolling = "no "style ="높이 : 0; "> </iframe>

페이지는 다음과 같이 추가됩니다.

<MCE : script type = "text/javaScript"> <!-
(기능(){
/**
* 현재 도메인을 얻으십시오
**/
함수 _getDomain () {
var _hostname = window.location.hostname.toString ();
var _hosts = _hostname.split ( ".");
var _len = _hosts.length;
if (_len> 2) {{
_hosts [_len-2]+"를 반환합니다."+_ 호스트 [_len-1];
}
return_hostname;
}
document.domain = _getDomain ();
}) ();
// -> </mce : 스크립트>

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) {{
_hosts [_len-2]+"를 반환합니다."+_ 호스트 [_len-1];
}
return_hostname;
}

Window.onload = function () ()
{{
// 어린이 페이지의 도메인을 설정합니다
document.ndsain = _getDomain ();
함수 _setheight ()
{{
if (window.parent! = 창)
{{
노력하다
{{
// 부모의 높이를 설정합니다
parent.document.getElementById ( "j_selfadapting"). style.height = document.body.scrollheight+ 'px';
}
캐치 (e)
{{
}
}
// 페이지 페이지를로드 한 후 주로 높이를 변경하기 위해 2를 설정합니다.
settimeout (_setheight, 2000);
}
// 하위 페이지를로드 한 후 한 번 호출하십시오
_setheight ();
}
}) ();
// -> </mce : 스크립트>

www.chinaz.com, book.chinaz.com과 같은 다른 부모 -레벨 페이지는 완전히 다릅니다. htm. 1. www.chinaz.com/index.htm의 키 코드의 키 코드 :


<iframe id = "j_selfatting"src = "http://www.chinaz.com/xxxx.htm"mce_src = "http://www.chinaz.com/xxxx.htm"frameborder = "0"Scrolling = "no "style ="높이 : 0; "> </iframe>

다음과 같이 js를 추가하십시오.


  1. <MCE : script type = "text/javaScript" > <!-

  2. ( 기능 () {)

  3. /**

  4. * 현재 도메인을 얻으십시오

  5. **/

  6. 함수 _getDomain () {

  7. var _hostname = window.location.hostname.toString ();

  8. var _hosts = _hostname.split ( "." );

  9. var _len = _hosts.length;

  10. if (_len> 2) {{

  11. _hosts [_len-2] + " + _hosts [_len-1] ;

  12. }

  13. return_hostname ;

  14. }

  15. document.domain = _getDomain ();

  16. }) ();

  17. // -> </mce : 스크립트>

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


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


<MCE : script type = "text/javaScript"> <!-
(기능(){
var pageheight = document.body.scrollheight;
getElementById ( 'taobaoiframe').
}) ();
// -> </mce : 스크립트>

3. 프록시 페이지의 모든 코드는 다음과 같습니다. 다음과 같습니다.


<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gbk" />
</head>
<body>
<MCE : script type = "text/javaScript"> <!-
(기능(){
/**
* 현재 도메인을 얻으십시오
**/
함수 _getDomain () {
var _hostname = window.location.hostname.toString ();
var _hosts = _hostname.split ( ".");
var _len = _hosts.length;
if (_len> 2) {{
_hosts [_len-2]+"를 반환합니다."+_ 호스트 [_len-1];
}
return_hostname;
}
document.domain = _getDomain ();
var height = window.location.hash.substring (1);
노력하다{
var = window.top.document.getElementById ( 'j_selfadapting');
if (el) {{
el.style.head = height + 'px';
}
}
캐치 (e) {}
}) ();
// -> </mce : 스크립트>
</body>
</html>

관련 기사