Kiểm soát chiều cao iframe bằng jQuery

Question

Tôi đang sử dụng jQuery để kiểm soát chiều cao của khung nội tuyến.

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

Điều này hoạt động khi chiều cao của iframe tăng. Khi chiều cao giảm nó không hoạt động. Nó chỉ trả về giá trị cũ. Tại sao chuyện này đang xảy ra?

Answer 1

Nó hoạt động cho tôi Nếu tôi đặt và truy xuất nó mà không cần sử dụng .contents(). Vui lòng xem ví dụ của tôi bên dưới.

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

EDIT: Nếu tôi hiểu đúng, bạn đang cố gắng để thoát khỏi các thanh cuộn bằng cách gọi tăng và trở lại chiều cao ban đầu bằng cách gọi giảm.

Sau khi thực hiện nhiều thử nghiệm trên các trình duyệt khác nhau. Đây là mã hoạt động trong FF, IE, Chrome, Safari và Opera.

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

Thay đổi heightIncrement bạn chức năng để sử dụng như sau:

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

Thay đổi heightDecrement chức năng của bạn để sử dụng sau đây:

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

Answer 2

Tại thời điểm bốc hàng tôi gọi chức năng này

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}); 
      } 
} 

nếu tôi sử dụng mà không có nội dung() thì trả về không.

Answer 3

i sử dụng sau đây và nó hoạt động hoàn hảo ...

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

tất nhiên chỉ khi nó được gọi là (không có "autoresize") ... nhưng nó hoạt động ngày càng tăng như giảm

Answer 4

Đây là cổ nhưng hy vọng nó sẽ giúp.

Có vẻ như Chrome (hoặc có thể tất cả webkit, không chắc chắn) có lỗi nơi scrollHeight có thể tăng nhưng không giảm (ít nhất là trong trường hợp nội dung trong khung nội tuyến). Vì vậy, nếu nội dung phát triển, sau đó co lại, scrollOffset vẫn ở mức cao hơn. Đó không phải là rất tốt đẹp khi bạn đang cố gắng để làm cho chiều cao của khung nội tuyến chỉ đủ lớn cho nội dung luôn thay đổi của nó.

Cách khắc phục sự cố là làm cho nó tính toán lại chiều cao bằng cách đặt chiều cao thành thứ gì đó đủ nhỏ để chiều cao khung nội tuyến nhỏ hơn nội dung của nó, sau đó scrollHeight được đặt lại.

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 

Điều này có thể gây ra một chút nhấp nháy nhưng thông thường không, ít nhất, nó hoạt động trên máy (tm) của tôi.

Answer 5

Tôi đã định lại kích thước và chiều rộng của iframe thành công khi được tải.về cơ bản bạn có thể làm điều này như dưới đây, và tôi cũng gửi một bài viết nhỏ trên blog của tôi: 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()) 

} 

); 

} 

} 

); 

Answer 6

Nếu nguồn iframe là một tên miền khác với cha mẹ của mình, sau đó có thể bạn sẽ cần phải sử dụng easyXDM.

Answer 7

tôi sử dụng này:.

$ ('# iframe') sống ('MouseMove', function (event) {

var theFrame = $ (this, parent.document.body) ;

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

Answer 8

Tôi không chắc liệu mọi người có hài lòng với phương pháp của họ hay không nhưng tôi đã viết một phương pháp rất đơn giản có vẻ hoạt động khá tốt đối với tôi, trong Safari, Chrome, IE9, Opera mới nhất và Firefox.

Tôi đã gặp sự cố khi đổi kích thước một iFrame đã cho lịch google vì vậy tôi vừa tạo kích thước mặc định theo kiểu iFrame: width = "600" và cài đặt chiều cao về cơ bản tối đa tôi muốn, 980 tôi tin, sau đó được bọc trong một container Div với chiều cao và chiều rộng là 100% và min-height và min-width tại 400px và 300px tương ứng, và sau đó thêm một số jQuery để chạy ở onload và 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()"> 

nên để làm rõ, chức năng thay đổi kích thước chạy onLoad vì tôi đang nhắm mục tiêu đặt điện thoại di động và máy tính bảng trong thiết kế đáp ứng, có chiều cao và chiều rộng của div lịch và đặt chiều cao và chiều rộng của khung nội tuyến (#googleCalendar), trừ 10 pixel cho một số đệm.

chỉnh sửa Tôi quên đề cập đến rằng tôi đã sử dụng caseWidth để đặt chiều cao của iFrame để giữ tỷ lệ bị ràng buộc và một nơi nào đó vuông.

này đã làm việc tốt cho đến nay, nếu có ai có bất kỳ ý tưởng tại sao nó có thể không được ổn định xin vui lòng tư vấn,

cổ vũ

Answer 9

Đây là một jQuery đơn giản mà làm việc cho tôi. Được thử nghiệm trong iExplorer, Firefox và Crome:

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

Tôi thêm 20 pixel chỉ để tránh bất kỳ thanh cuộn nào, nhưng bạn có thể thử giới hạn dưới.