DiggBar는 도메인에 없는 콘텐츠를 기반으로 iframe 높이의 크기를 어떻게 동적으로 조정합니까?

StackOverflow https://stackoverflow.com/questions/754519

  •  09-09-2019
  •  | 
  •  

문제

이미 누군가가 질문을 하더군요. DiggBar는 어떻게 작동하나요? 이전 질문에서.

누군가 괜찮은 답변을 제공했지만 한 가지 문제는 해결되지 않았습니다.

Digg는 다른 도메인의 사이트 내용에 따라 어떻게 iframe의 높이를 동적으로 크기로 조정합니까?

콘텐츠를 기반으로 iframe 높이를 동적으로 조정하기 위한 많은 질문과 답변이 여기에 있습니다(자바스크립트 사용). 프레임에 포함된 URL이 귀하의 도메인에 있는 한. 그러나 Digg는 모든 도메인의 웹사이트에서 이 문제를 해결한 것으로 보입니다.

SO 웹 프로그래머가 어떻게 이를 달성했는지 아는 사람이 있습니까?

메모:iframe은 단순히 높이를 100%로 설정하지 않습니다.iframe 태그는 그런 식으로 작동하지 않습니다.Google에서 '100% 높이 iframe'을 검색해 보면 무슨 뜻인지 알 수 있을 것입니다.

도움이 되었습니까?

해결책

당신이 보면 그들의 CSS, 그들은 사용합니다 height: 100% 에 대한 iframe:

iframe#diggiFrame {
    color: #666;
    width: 100%;
    height: 100%;
    z-index: 10;
    -webkit-box-sizing: border-box;    
}

그들은 DiggBar를 그 위에 높이를 두고 배치합니다. 46px, 그래서 iframe 남은 공간을 100% 차지합니다.그들은 사용한다 overflow: hidden 에 body 유지하는 요소 iframe 페이지가 스크롤되는 것을 허용하지 않고 완전히 페이지의 수직 높이 내에 위치하도록 합니다.이는 스크롤 막대가 iframe, 전체 페이지 대신.DiggBar가 수행하는 방식은 Firefox의 특수 모드에서만 작동합니다.표준 모드에서 수행하는 방법은 아래를 참조하세요.

body {
    padding: 46px 0 0 0;
    margin: 0;
    background: #fff;
    overflow: hidden; 
    color: #333;
    text-align: left;
}

#t {
    width: 100%;
    min-width: 950px;
    height: 46px;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    /* overflow: hidden; */
    border-bottom: 1px solid #666;
    background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
    line-height: 1;
}

편집하다:제 말을 믿지 못하시는 분들을 위해 여기 작은 예.전체 공간을 채우려면 테두리가 없도록 설정해야 하며 다음이 필요합니다. <body> 마진이 없도록.

편집 2:아, 죄송합니다. 무슨 말씀이신지 알겠습니다.당신은 overflow: hidden 에 body 스크롤 막대가 원하는 방식으로 작동하도록 하려면 태그를 사용하세요.

편집 3:Firefox에서 이 기능이 작동하려면 특수 모드에 있어야 하는 것 같습니다.당신이 <!DOCTYPE html> 표준 모드로 전환하는 선언 iframe 너무 작게 나옵니다.

편집 4:아, Firefox의 표준 모드에서도 가능합니다.답변을 얻었습니다 여기.높이를 설정해야 합니다. <html> 그리고 <body> 요소 100% 또한.(참고 <!DOCTYPE html> 에 대한 문서 유형입니다 HTML5, 이는 진행 중인 작업입니다.그러나 표준 모드를 ​​켜려면 모든 최신 브라우저에서 작동합니다.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="all">
    html, body {
      height: 100%
    }
    body {
      margin: 0;
      overflow: hidden;
    }
    #topbar {
      height: 50px;
      width: 100%;
      border-bottom: 1px solid #666
    }
    #iframe {
      height: 100%;
      width: 100%;
      border-width: 0
    }
  </style>
</head>
<body>
  <div id="topbar">
    <h1>This is my fake DiggBar</h1>
  </div>
  <iframe id="iframe" src="http://www.google.com/"></iframe>
</body>

다른 팁

HTML의 문제의 일부는 어떤 것의 요소를 100% 높이로 설정할 수 없으며 전체 창 공간을 차지할 수는 없습니다. 이 작업을 수행하는 한 가지 방법은 몸체에 창의 픽셀 높이를 갖고 신체 내부의 모든 것이 창 크기입니다.

기본적으로 Windows OnResize 이벤트에 연결되는 JavaScript를 만들고 창 크기로 바디를 크기로 조정하십시오.

다음은 jQuery를 사용하여 만든 예입니다

<script language="JavaScript" type="text/JavaScript">
    $(window).resize(function() {
        $('body').height(document.documentElement.clientHeight);
    });
</script>

이를 통해 DIV 또는 다른 요소를 설정하고 창의 전체 높이에서 작동하도록합니다.

iframe은 Quirks 모드에서 높이 100%를 가질 수 있습니다. Digg는 DocType를 제외하여 이것을 달성합니다.

iframe은 DIGG 웹 사이트에 대상 웹 사이트가 있으며 다른 방법은 아닙니다. Iframe은 폭과 높이로 설정됩니다.

Iframe의 100%는 선언 된 상위 공간의 100%%입니다. 예는 다음과 같습니다. 예는 다음과 같습니다. 예는 다음과 같습니다.

/* parent element */

html, body {
   width: 100%;
   height: 100%;
}

/* child element */
iframe {
  width: 100%; /* this is truly 100%, try it out */
  height: 100%; /* try it out */
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top