IFRAME로 100% 높이 자동으로

동적으로 표시 하는 내용으로 IFRAME 높이 만들기 위해 몇 가지 가능한 솔루션.

문제

자동 높이 IFRAME을 하자, 제시 하는 내용으로, 그것은 뭔가 더 간단 하 게 할 수 있습니다., 하지만 시대 아니다.. 일부 자바 스크립트 속성의 사용에 브라우저 호환성 문제는, 범위를 결정 하는 차이 포함 하 여 (픽셀), 예를 들어, P 태그. 제시 하는 솔루션 마지막 되지 않을 수 있습니다., 하지만 그것은 확실히 당신을 도울 것입니다..

코드는 인터넷 익스플로러에서 테스트 되었습니다. 9, 파이어 폭스 14.0.1 그리고 크롬 21.0.1180.8.

솔루션

아래 제시 하는 모든 경우에, 당신의 IFRAME이 같은 뭔가 해야:

1
2
3
4
  <바디>
    아래, 우리는 IFRAME<Br />
    <IFRAME id="iframe1" src="iframe.html" 너비="" 높이=""></IFRAME>
  </바디>

참고: 당신의 IFRAME 너비를 설정할 수 있습니다 특성을 사용 해야 합니다 “너비”. 그것은 또한 재미 있는, 응용 프로그램으로, 특성을 사용 하 여 frameborder =’0′ 그리고 스크롤 = ' 없음’, 즉 “테두리 없음” 그리고 “아니 스크롤 막대”, 각각.

옵션 1 – JQuery

이 경우, 원리, IFRAME의 SRC 함께 파일을 통해 로드에 제공, 동일한 서버 및 도메인, 그래서, 그것은 다른 도메인에 있는 페이지를 가리키는 아무 소용이. 검색 후, 내가 만든 스크립트는 인터넷에 발견의 일부와 조합, 게시물의 끝에 참조. 어쨌든, 특정 조건 하에서 작업의 보장 또는 페이지의 구조를 로드할 수.

나는 해결책을 찾기 위해 몇 가지 어려움을 했다, 방법. 로드 하기 때문에() Internet Explorer에서 제대로 작동 하지 않았다, 때문에 페이지 로드에 대 한 참조를 캐시 처럼 보였다. 이 번호는 URL의 끝에 추가 하는 장치를 사용 하 여 해결, getTime에 따라(), 그 이후 밀리초 수를 반환 합니다. 01/01/1970.

이 스크립트의 좋은만을 해야 하는 페이지의 헤드 태그 사이 그것을 넣어 어디 IFRAME. 물론, IFRAME에 대 한 ID를 변경 귀하, 예를 들어 전화에 “#iframe1” 그리고, 마지막으로, SRC 특성을 들고 있어 페이지 설정, 예를 들어 전화에 “iframe.html”. 초기에 JQuery에 대 한 호출을 note; 당신이 이미 그것을 한 경우, 생략할 수 있습니다..

1
2
3
4
5
6
7
8
9
10
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></스크립트>
  <스크립트 유형="text/javascript">
    $(문서).준비(함수() {
      myIframe = $("#iframe1").attr("src","iframe.html?" + 새로운 내용 날짜().getTime());
      $(myIframe).부하(함수() {          
        var myDoc = (myIframe.가져오기(0).문서) ? myIframe.가져오기(0).문서 : myIframe.가져오기(0).contentWindow.문서;
        myIframe.높이(myDoc.바디.ScrollHeight+10);
      });
    });
  </스크립트>

옵션 2 – CSS

또 다른 흥미로운 솔루션 InHosting, CSS의만 사용 하 고 어쩌면 당신은 하나의 IFRAME을 로드 하려는 경우를 봉사 할 수 있다. 불행 하 게도 매우 제한 되며, 다른 목적을 위해 제대로 작동 하지 않습니다.. 로드할 수 있습니다. (포함) 다른 도메인에서 페이지.

1
2
3
4
  <스타일 형식="text/css">
    HTML, 바디, div, IFRAME {여백:0; 패딩:0; 높이:100%}
    IFRAME {디스플레이:블록; 너비:100%; 테두리:없음}
  </스타일>

옵션 3 – 자바 스크립트

이 방법에서는, IFRAME에 표시 되는 파일의 소스 코드에 액세스할 수 있어야 합니다., 스크립트를 추가 하려면. 그것은 간단 하 고 그것은 잘 작동 하지만. 그래서, 이 프로세스는 두 부분으로 이루어집니다.:

(1) 당신은 당신의 IFRAME 정의, 같은 것:
index.html

1
2
3
4
5
...
  <바디>
    <IFRAME id="iframe1" src="iframe.html" 너비="" 높이=""></IFRAME>
  </바디>
...

(2) IFRAME의 SRC에 정의 된 파일 내에서 자바 스크립트 호출:
iframe.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<HTML>
  <머리>
    <스크립트 유형="text/javascript">
      창.OnLoad = 함수(){
         부모.문서.getElementById("iframe1").높이 = 문서.getElementById("myDoc").ScrollHeight + 35;
     }
    </스크립트>
  </머리>
  <바디>
    <div id="myDoc">
       <p>여기 당신의 텍스트</p>
       <p>텍스트</p>
       <p>텍스트</p>
       <p>텍스트</p>
       <p>텍스트</p>
       <p>텍스트</p>
       <p>텍스트</p>
       <p>텍스트</p>
       <p>텍스트</p>
       <p>텍스트</p>
       <p>텍스트</p>
       <p>텍스트</p>  
    </div>
  </바디>
</HTML>

참고: 그 getElementById에 당신의 IFRAME의 ID를 변경 하는 것을 잊지 마세요() 실패 하지 마십시오!

다른 더 효율적인 솔루션을 사용 하는 경우, 하시기 바랍니다, 공유!

글꼴

총 조회 수: 68495

20 에 대 한 의견 “IFRAME로 100% 높이 자동으로

  1. 쉐 인 고 말했다:

    테스트 여기 Firefox와 그것 일된 직선 화살표!! IE에서 10 activex 추가 기능을 실행 하 라는, 후 인공 지능 허용 페이지를 올바르게 표시 됩니다, 내용으로.
    이미 구글 크롬에 iframe은 아주 작은 하 고 조정할 수 없습니다.…
    옵션 사용 1 jQuery와 유일 하 게 변경 했다 너비와 페이지의 이름 =”700″.
    문제를 해결 하기 위해 어떤 팁?
    감사!!

  2. 다니엘 필리프 고 말했다:

    우리에 게 제시 하는 대작 남자, 나는 모든 시간을 로드 하는 페이지를 만들기 위해 jquery와 페이징 시스템을 찾고 하루 종일 (매우 복잡 하지만), 다이 php와 mysql만을 사용 하 여 프레임을 로드 하기만 하면 프레임 거기에 퍼 팅에 대 한 생각, 하지만 프레임의 높이를 맞았다. 정말 고마워요! 100%.

  3. 웨슬리 고 말했다:

    천재, 나는 코드 고 일된이 완벽에 대 한 검색 시간을 보냈다! 이제는 IFRAME 안에 PDF를 열 수 있고 책을 읽는 동안.zip 파일을 다운로드 하는 페이지에 리디렉션.

  4. 브루노 고 말했다:

    나는 어떤 방법으로 그것을 얻지 못했다..
    여전히 세로 스크롤 막대를 가져옵니다., 전혀 나오지 않습니다..

코멘트를 남겨 주세요

귀하의 이메일 주소가 게시 되지 것입니다.