IE7 - setAutoGrow không hoạt động - Thư viện tuyệt vời

Tôi đã tạo một ứng dụng facebook mà tôi đang sử dụng bên trong iFrame của một tab.IE7 - setAutoGrow không hoạt động

Tôi đang sử dụng hàm setAutoGrow của SDK Javascript để làm cho iFrame mở rộng cho đến khi kết thúc nội dung.

Từ quan sát của tôi, hàm setAutoGrow không hoạt động trong IE7 và tôi không thể hiểu tại sao. Tất cả các trình duyệt khác (bao gồm IE8 và 9) đều hoạt động chính xác.

Với mục đích thử nghiệm, tôi đã tạo ra một độ dốc cao 1500px.

Example gradient for testing purposed of 1500px height

Ví dụ: tôi sẽ đăng nội dung trong Chrome. Như bạn có thể thấy, gradient có thể được cuộn cho đến khi kết thúc (màu đỏ):

Gradient inside iFrame tab works as expected in normal browsers

Và bây giờ đến những gì xảy ra trong IE7. IFrame có chiều cao mặc định là 800px (như được xác định trong cài đặt ứng dụng). Bạn có thể thấy rằng nó dừng lại ở "màu ngọc lam", và hàm setAutoGrow không mở rộng nó đến độ cao mong muốn (1500px).

Gradient inside iFrame tab doesnt expand in IE7

Phần quan trọng của CSS của tôi trông như sau:

body, html { 
    overflow: hidden;   
    margin: 0; padding: 0; 
} 

    #wrapper { 
     margin: 0 auto; 
     width: 810px;  
    } 

     #content { 
      background: url(../img/bg.jpg) top left no-repeat; 
      height: 1500px; 
     }

Và đây là đoạn mã javascript tôi đã đặt ngay trước thẻ đóng body-tag và sau thẻ fb-gốc :

window.fbAsyncInit = function() { 

    FB.init({ 

     appId  : '...', 
     channelUrl : '...', 
     status  : true, 
     cookie  : true, 
     xfbml  : true 

    }); 

    FB.Canvas.setAutoGrow(); 

};

tôi đã tìm thấy một báo cáo lỗi rằng ngày trở lại vào ngày 01 Tháng Tám, đã được đóng bởi FB: https://developers.facebook.com/bugs/209607222498543?browse=search_5009002cb69058a73627413

Tôi đã đọc và áp dụng những gợi ý từ các chủ đề sau: Facebook iframe FB.Canvas.setAutoGrow does not auto grow after initial load?

... nhưng không dường như giải quyết vấn đề.

Có ai có gợi ý rõ ràng, điều gì đó tôi đã giám sát hoặc giải pháp/giải pháp dễ dàng cho vấn đề này không?

Trong khi tôi đang sử dụng IE7 DebugBar, tôi nhận thấy rằng đã xảy ra sự cố khi tải URL có tên là "dimension_context.php". Tôi sẽ đính kèm ảnh chụp màn hình.

IE7 DebugBar loading problem

Nguồn

2012-08-14 Marcel Kalveram

Được nhuộm màu. Radical, dude. –

Prolly sẽ không giúp đỡ nhưng đáng để thử ... đặt sau khi chứa nội dung: '

' –

Tôi nghĩ bạn nên đặt 'Chiều cao Canvas' thành' Chất lỏng', tuy nhiên tôi nghĩ cách tốt nhất là thiết lập chiều cao tĩnh - nó là ít rủi ro nhất :) –

Tôi đang sử dụng này có thể là nó giúp bạn

<html> 
<body> 
    <div id="fb-root"> 
    </div> 
    <script type="text/javascript" language="javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
    <script type="text/javascript" language="javascript"> 
     FB.init({ 
      appId: 'APPID', 
      status: true, // check login status 
      cookie: true, // enable cookies to allow the server to access the session 
      xfbml: true// parse XFBML 
     }); 
     window.fbAsyncInit = function() { 
      FB.Canvas.setSize(); 
     } 
     // FB.Canvas.setAutoResize(); 
     FB.Canvas.setAutoGrow(7); 
    </script> 
<form></form> 

</body> 
</html>

Nguồn

2012-08-17 12:24:10

Cảm ơn, đã thử nó nhưng nó không giúp –

apps.facebook.com/onlinesocialguru/ i m sử dụng mã trên foy ứng dụng của tôi làm việc của nó .. –

Cũng trong Internet Explorer 7? –

Bạn có thể thấy here tab đó tôi đang làm việc trên IE7:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script> 
</head> 
<body style="overflow:hidden"> 
<div id="fb-root"></div> 
<!-- YOUR HTML --> 
<script type="text/javascript"> 
window.fbAsyncInit = function() { 
     FB.init({ 
      appId: 0000000000000, // App ID 

      status: true, // check login status 
      cookie: true, // enable cookies to allow the server to access the session 
      oauth: true, // enable OAuth 2.0 
      xfbml: true // parse XFBML 
     }); 

     FB.Canvas.setAutoGrow(); 
     FB.Canvas.setSize({ width: 810, height: 1417 }); 

    }; 



    // Load the SDK Asynchronously 
    (function (d) { 
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } 
     js = d.createElement('script'); js.id = id; js.async = true; 
     js.src = "//connect.facebook.net/en_US/all.js"; 
     d.getElementsByTagName('head')[0].appendChild(js); 
    } (document)); 
</script> 
</body> 
</html>

cài đặt ứng dụng của tôi:

Chiều rộng tab trang: 810px
Canvas Chiều rộng: Fixed
Canvas Chiều cao: Cố định tại 1147px

Nếu bạn muốn tab của bạn để thích ứng với độ cao khác nhau thử điều này trong mỗi trang:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script> 
</head> 
<body style="overflow:hidden"> 
<div id="fb-root"></div> 
<!-- YOUR HTML --> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId: 0000000000000, // App ID 

      status: true, // check login status 
      cookie: true, // enable cookies to allow the server to access the session 
      oauth: true, // enable OAuth 2.0 
      xfbml: true // parse XFBML 
     }); 

     FB.Canvas.setAutoGrow(); 
     FB.Canvas.setSize({ width: 810, height: $(document).height()}); 

    }; 



    // Load the SDK Asynchronously 
    (function (d) { 
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } 
     js = d.createElement('script'); js.id = id; js.async = true; 
     js.src = "//connect.facebook.net/en_US/all.js"; 
     d.getElementsByTagName('head')[0].appendChild(js); 
    } (document)); 

}); 
</script> 
</body> 
</html>

Check-out một ví dụ:

https://www.facebook.com/pages/Vpascoal/215529398504982?sk=app_105369212942645 (nhấp vào hình ảnh)

Nguồn

2012-08-17 15:52:54 vpascoal

Tôi đã thử nghiệm cả hai trang, nhưng nó hiển thị thanh cuộn, khi chiều cao nội dung vượt quá chiều cao iFrame, xem tại đây: [IE7 iframe test 1] (https://www.dropbox.com/s/h01ttvg9v7hpdi3/ie7-iframe1.png) và ở đó [IE7 iFrame test 2] (https://www.dropbox.com/s/ezzmt47e1o3qrun/ie7-iframe2.png). Có lẽ nó có một cái gì đó để làm với thực tế là tôi đang chạy IE7 hầu như trong Virtual Box? Bạn có thể xác nhận thanh cuộn này không xuất hiện trong trường hợp của bạn không? –

Xin chào! Tôi quên để đặt này trong mã của tôi: thử nó và bây giờ bạn sẽ không thấy bất kỳ thanh cuộn nào trong IE7 – vpascoal

Bạn đã thử sử dụng bộ nhớ cache của all.js bằng cách thêm một tham số GET ngẫu nhiên er với nó? Ngoài ra, tôi sẽ viết lại phần http: // thành // để tệp javascript sẽ tải đúng trong trường hợp facebook ở chế độ https.

<script type="text/javascript" language="javascript" src="//connect.facebook.net/en_US/all.js?v1"></script>

Nguồn

2012-08-21 13:04:51

IE7 - setAutoGrow không hoạt động

Trả lời

Các vấn đề liên quan