2009-12-05 50 views
16

scrollTop của jQuery trả về null khi cửa sổ là khung nội tuyến. Có ai đã có thể tìm ra cách để có được scrollTop của một khung nội tuyến? biết thêmCách lấy scrollTop của khung nội tuyến

:

kịch bản của tôi đang chạy trong iframe chính nó, cửa sổ cha mẹ là trên tên miền khác, vì vậy tôi không thể truy cập vào ID của iframe hoặc bất cứ điều gì như thế

+0

Bạn đang cố gắng để có được nó từ bên trong phụ huynh của 'iframe' hoặc từ bên trong' iframe' chính nó? –

+1

từ chính iframe. bị bệnh thêm thông tin thêm vào câu hỏi của tôi – mkoryak

Trả lời

10

Bạn có thể đặt scrollTop bằng cách sử dụng thiết lập này:

$("html,body").scrollTop(25); 

Vì vậy, bạn có thể thử nhận nó như thế này:

$("html,body").scrollTop(); 

Bởi vì các trình duyệt khác nhau đặt scrollTop trên các phần tử khác nhau (body hoặc html).

Từ plugin scrollTo:

Nhưng điều đó có lẽ sẽ vẫn thất bại trong trình duyệt nhất định. Dưới đây là phần có liên quan từ mã nguồn của Ariel Flesher's scrollTo plugin for jQuery:

// Hack, hack, hack :) 
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes) 
$.fn._scrollable = function(){ 
    return this.map(function(){ 
    var elem = this, 
     isWin = !elem.nodeName || $.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) != -1; 

    if(! isWin) { 
     return elem; 
    } 


    var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem; 

    return $.browser.safari || doc.compatMode == 'BackCompat' ? 
     doc.body : 
     doc.documentElement; 
    }); 
}; 

Sau đó bạn có thể chạy:

$(window)._scrollable().scrollTop(); 

Để xác định cách xa các iframe đã cuộn xuống.

+0

Cảm ơn người đàn ông. mà làm việc như một quyến rũ – mkoryak

+0

không làm việc cho tôi, nhưng cha mẹ. $ ('cơ thể'). scrollTop() đã làm công việc –

+0

Tôi đã phải thiết lập một giá trị cho scrollTop, do đó, một điều chỉnh nhỏ: '$ (" html, scrollTop (0); ' –

19

Tôi tìm thấy câu hỏi này trong khi cố gắng SET scrollTop bên trong iframe ... không chính xác câu hỏi của bạn (bạn muốn GET) nhưng đây là giải pháp bên trong iframes cho những người cũng kết thúc ở đây đang cố SET.

Nếu bạn muốn di chuyển đến phía trên cùng của trang này sẽ KHÔNG làm việc bên trong một iframe:

$("html,body").scrollTop(0); 

Tuy nhiên, điều này sẽ làm việc:

document.getElementById("wrapper").scrollIntoView(); 

Hoặc equivilent với jQuery :

$("#wrapper")[0].scrollIntoView(); 

Đối với đánh dấu này (chứa insi de an iframe):

<html> 
    <body> 
    <div id="wrapper"> 
     <!-- lots of content --> 
    </div> 
    </body> 
</html> 
+1

Cảm ơn điểm này @chris. Đối với Firefox, Chỉ có scrollIntoView DOM đã làm việc cho trang nằm trong iframe (Google Chrome hoạt động với chỉ $ ("body"). ScrollTop (0);). Đối với những người yêu thích jquery, nó là $ ("# wrapper") [0] .scrollIntoView(); – rsmoorthy

+0

chỉ cái này dường như hoạt động trong IE8 ... nhờ – handsomeGun

+1

rất đẹp. từ bên ngoài iframe 'document.getElementsByTagName ('iframe') [0] .contentWindow.document.getElementById ('myElementId'). scrollIntoView();' – billynoah

5

Tốt cũ javascript:

scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop; 
+0

Sẽ không hoạt động khi JS đang chạy bên trong khung nội tuyến. – mikemaccana

+2

Đối với javascript bên trong khung nội tuyến, hãy bỏ qua phần trả về iframe chính nó: 'scrollTop = document.body.scrollTop;' –

25
$('#myIframe').contents().scrollTop() 
+0

Không biết về OP nhưng điều này giải quyết nó cho tôi tất cả các cách. Tôi đã giao dịch với một khung nội tuyến và hoàn toàn quên áp dụng scrollTop() vào nội dung của nó. Duh! –

+0

Chúc mừng. THIS đã làm việc hoàn hảo cho trường hợp của tôi - một iframe chiếm 100% chế độ xem với một lớp/lớp phủ được tải trong đó. Cảm ơn! –

+0

không hoạt động, trả lại null –

0

hoặc sử dụng này một

sample.showLoader = function() { 
// show cursor wait 
document.getElementsByTagName('body')[0].style.cursor = 'wait'; 
var loader = $('#statusloader'); 
// check if we're runnign within an iframe 
var isIframe = top !== self; 
if (isIframe) { 
    var topPos = top.pageYOffset + 300; 
    // show up loader in middle of the screen 
    loader.show().css({ 
     top : topPos, 
     left : '50%' 
    }); 
} else { 
    // show up loader in middle of the screen 
    loader.show().css({ 
     top : '50%', 
     left : '50%' 
    }); 
} 
}; 
2
$('#myIframe').contents().scrollTop(0); 

Chỉ làm việc với "0" như tham số

+0

Nếu đối số '0' được cho, khung sẽ cuộn lên trên cùng (0 pixel từ trên cùng). Nếu không có đối số, số lượng pixel từ đầu sẽ được trả về => đó là câu hỏi này là gì! –

0

Tôi biết tôi đến trễ ở đây, nhưng tôi đã cố gắng tìm ra một danh sách dài trên di động. scrollTop() đã không làm việc cho tôi do xung đột cross-domain (và tôi không có quyền truy cập vào cửa sổ cha mẹ), nhưng thay đổi chiều cao đã làm:

$('#someClickableElementInIFrame').on('click', function(e){ 
     $("html body").animate({ 
     'height' : "0" 
    }, { 
     complete: function(){ 
      $("html body").css({ 
      'height' : "auto" 
      }) 
      } 
     }) 
}); 
Các vấn đề liên quan