iframe 높이를 jQuery로 제어하십시오.

jQuery를 사용하여 iframe의 높이를 제어하고 있습니다.iframe 높이를 jQuery로 제어하십시오.

jQuery("iframe",top.document).contents().height();

iframe의 높이가 높아질 때 작동합니다. 높이가 낮아지면 작동하지 않습니다. 이전 값만 리턴합니다. 왜 이런 일이 일어나는 걸까요?

출처

2009-06-01 Saravanan

@ José Basilio - 예, Iframe 내용의 높이를 찾고 Iframe으로 설정했습니다. – Saravanan

@porneL - Iframe의 개체 또는 기능을 찾는 방법을 설명 할 수 있습니까? – Saravanan

@Saravanan - 제 편집 된 게시물을 읽어주십시오. –

.contents()을 사용하지 않고 설정하고 검색하면 작동합니다. 아래 예제를 참조하십시오.

function changeFrameHeight(newHeight){ 
    jQuery("iframe",top.document).height(newHeight); 
    alert("iframe height=" + jQuery("iframe",top.document).height()); 
}

편집 : 내가 제대로 이해한다면, 당신은 증가를 호출하여 스크롤 막대의 제거를 얻을 수 및 감소를 호출하여 원래의 높이로 이동하려고.

다른 브라우저에서 여러 번 테스트를 수행 한 후. FF, IE, Chrome, Safari 및 Opera에서 작동하는 코드는 다음과 같습니다. 내가 전화를 로딩시

heightDecrement:function(){ 
jQuery("iframe",top.document).css({height:originalHeight}); 
}

출처

2009-06-01 11:11:55

다음 사용하도록 heightDecrement 기능을 변경

heightIncrement:function(){ 
var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight'); 
jQuery("iframe",top.document).css({height:heightDiv}); 
}

//first declare a variable to store the original IFrame height. 
var originalHeight = $("iframe",top.document).height();

는 다음 사용하도록 heightIncrement에게 기능을 변경

이 함수

heightIncrement:function(){  
      if($.browser.mozilla) 
      { 
      var heightDiv = jQuery("iframe",top.document).contents().attr("height")+"px";      
      jQuery("iframe",top.document).css({height:heightDiv}); 
      } 
      else if($.browser.opera || $.browser.safari || $.browser.msie) 
      {    
      var heightDiv = jQuery("iframe",top.document).height();     
      jQuery("iframe",top.document).css({height:heightDiv}); 
      } 
}

contents()없이 사용하면 0이 반환됩니다.

출처

2009-06-01 11:23:23 Saravanan

브라우저 검색보다는 객체/기능 검색을 사용해야합니다 (예 : 두 가지 방법 모두를 사용하여 높이를 읽고 어떤 것이 좋은 결과를 반환하는지 확인하십시오. – Kornel

@Saravanan - 높이를 검색 한 다음 다시 동일한 설정을 시도하는 것 같습니다. 그 맞습니까? –

오늘의 JQuery에서 $ (".. 대신 jQuery (".. .. 작동합니다.) – nottinhill

나는 다음을 사용하며

$("#frameId").height($("#frameId").contents().find("html").height());

가 (더 "자동 크기") 호출되지 그냥 물론

...하지만 그것은 감소로 증가 작품은

출처

2010-03-08 12:33:33 Tom

고맙습니다. 사용 해보고 효과적입니다. – ppumkin

이 도메인 간 작업이 가능합니까? – Jacques

** 교차 도메인에서 작동하지 않을 것이라고 생각합니다. **.이를 해결할 수 있다면 도와주세요. –

이 고대이다 ... 완벽하게 작동 그러나 잘하면 그것은 도움이됩니다.

Chrome (또는 모든 웹킷, 확실하지 않은 것)은 scrollHeight가 증가 할 수 있지만 감소하지 않는 버그가 있습니다 (적어도 iframe의 콘텐츠의 경우). 콘텐츠가 커지고 축소되면 scrollOffset이 더 높은 수준으로 유지됩니다. iframe의 높이를 항상 변화시키는 콘텐츠만큼 충분히 높이려는 시도는 그리 좋지 않습니다.

해킹을 피하는 방법은 iframe의 높이가 내용보다 작아 지도록 높이를 설정하여 높이를 다시 계산 한 다음 scrollHeight를 재설정하는 것입니다.

var frame = top.document.getElementById('iFrameParentContainer').getElementsByTagName('iframe')[0]; 
var body = frame.contentWindow.document.body; 
var height = body.scrollHeight; // possibly incorrect 
body.height = "1px"; 
height = body.scrollHeight; // correct

이 약간의 깜박 거림이 발생할 수 있지만 일반적으로, 적어도, 내 컴퓨터 (TM)에서 작동하지 않습니다.

출처

2010-06-19 00:46:59 InfinitiesLoop

높이를 1px로 설정하는 문제에 휩싸였습니다. 때로는 재 계산이 꺼지는 경우가있었습니다. 나는 [이 답변] (http://stackoverflow.com/a/11864824/385996)에 제안 된대로 '자동'시도하고 더 많은 경우에 작동하는 것 같습니다. 하지만 전체적으로 볼 때 Chrome을 사용하여 버그 (?)를 해결할 수있는 좋은 방법 인 것 같습니다. –

로드 할 때 iframe의 높이와 너비가 성공적으로 조정되었습니다.기본적으로는 다음과 같이이 작업을 수행 할 수 있고, 나 또한 내 블로그에 작은 기사를 게시 : http://www.the-di-lab.com/?p=280

 

$(".colorbox").colorbox(

{iframe:true, 

innerWidth:0, 

innerHeight:0, 

scrolling:false, 

onComplete:function(){ 

$.colorbox.resize(

{ 

innerHeight:($('iframe').offset().top + $('iframe').height()), 

innerWidth:($('iframe').offset().left + $('iframe').width()) 

} 

); 

} 

} 

);

출처

2010-07-30 02:50:50 XuDing

을 iframe이 소스가 부모가 아닌 다른 도메인 인 경우, 그때는 아마 easyXDM를 사용해야합니다.

출처

2011-12-06 03:31:21 dsjoerg

나는이 사용합니다.

$ ('#은 iframe')을 (였다면 'mousemove', 기능 (이벤트) {

VAR theFrame = $ (이, parent.document.body) 라이브 ;

this.height ($ (document.body) .height() - 350);
});

출처

2012-02-14 15:42:28

'자주 (mousemove)'가 너무 자주 실행되면 효과가 없습니까? –

사람들이 그들의 방법에 만족하는지 잘 모르겠지만 사파리, 크롬, IE9, 오페라 및 최신의 나에게 매우 잘 맞는 것처럼 보이는 매우 간단한 접근 방식을 작성했습니다. Firefox.

iFrame의 스타일로 기본 크기를 만들었으므로 Google 캘린더 피드의 크기를 조정할 때 문제가 발생했습니다. width = "600"및 높이 설정은 기본적으로 최대 980 개입니다. 그와 400 픽셀에서 300 픽셀 높이 및 폭이 100 % 및 최소 높이 및 최소 폭을 갖는 용기 사업부 각각 래핑하고 일부 JQuery와의 온로드와 실행을 첨가하여 onResize ...

 <script> 

     var resizeHandle = function(){ 
      var caseHeight = $('#calendarCase').height(); 
      var caseWidth = $('#calendarCase').width(); 
      var iframeWidth = $('#googleCalendar').width(caseWidth - 10); 
      var iframeHeight = $('#googleCalendar').height(caseWidth - 10);; 
     }; 


</script> 


<body id ="home" onLoad="resizeHandle()" onResize="resizeHandle()">

그래서 명확하게하기 위해 resize 함수는 onLoad를 실행합니다. 응답 디자인에서는 휴대 전화와 태블릿을 타겟팅하고 있기 때문에 calendarCase div의 높이와 너비를 사용하고 그에 따라 iframe의 높이와 너비 (#googleCalendar)를 10 빼기로 설정합니다. 약간의 패딩.

편집 비율을 제한하고 어딘가에 사각형을 유지하기 위해 caseWidth를 사용하여 iFrame의 높이를 설정했음을 잊어 버렸습니다. 누군가가 알려 주시기 바랍니다 안정되지 않는 이유 어떤 아이디어가있는 경우이 지금까지 잘 근무하고있다

환호

출처

2012-08-03 18:58:57 user482024

이 나를 위해 일한 간단한 jQuery를합니다. IEXPLORER, 파이어 폭스와 Crome 스에서 테스트 :

$('#my_frame').load(function() { 
     $(this).height($(this).contents().find("html").height()+20); 
});

난 그냥 어떤 스크롤 막대를 피하기 위해 20 개 픽셀을 추가 할 수 있지만 당신은 하한을 시도 할 수 있습니다.

출처

2013-04-03 15:54:05

iframe 높이를 jQuery로 제어하십시오.

답변

관련 문제