Как получить scrollTop для iframe - PullRequest
Новая
       12

Как получить scrollTop для iframe

18 голосов
/ 05 декабря 2009

jQuery scrollTop возвращает ноль, когда window является iframe. Кто-нибудь смог выяснить, как получить scrollTop для iframe?

больше информации:

мой скрипт выполняется в самом iframe, родительское окно находится в другом домене, поэтому я не могу получить доступ к идентификатору iframe или чему-то в этом роде

Ответы [ 8 ]

25 голосов
/ 17 января 2011 
$('#myIframe').contents().scrollTop()
23 голосов
/ 19 октября 2010

Я нашел этот вопрос, пытаясь установить SET scrollTop внутри iframe ... не совсем ваш вопрос (вы хотели получить), но вот решение внутри iframes для людей, которые также заканчивают здесь пытаться установить.

Если вы хотите прокрутить до верхней части страницы , это НЕ будет работать внутри фрейма: 

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

Однако это будет работать: 

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

Или эквивалент с jQuery: 

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

Для этой разметки (содержится внутри iframe): 

<html>
  <body>
    <div id="wrapper">
      <!-- lots of content -->
    </div>
  </body>
</html>
10 голосов
/ 05 декабря 2009

Вы можете установить scrollTop с помощью этой настройки: 

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

Так что вы можете попробовать получить это так: 

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

Поскольку разные браузеры устанавливают scrollTop для разных элементов (body или html).

Из плагина scrollTo:

Но это, вероятно, все еще не получится в некоторых браузерах. Вот соответствующий раздел из исходного кода плагина scrollTo Ариэля Флешера для 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;
  });
};

Затем вы можете запустить: 

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

Чтобы определить, насколько далеко прокрутился iframe.

5 голосов
/ 09 ноября 2010

Старый добрый javascript: 

scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;
2 голосов
/ 12 ноября 2013 
$('#myIframe').contents().scrollTop(0);

Работает только с «0» в качестве параметра

0 голосов
/ 07 ноября 2018

Я пытаюсь 

$('#myIframe').contents().scrollTop(0);

и 

 let scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;

первая функция успешной работы в настольном браузере. не работает в мобильном браузере. поэтому я использую другую функцию с scrollIntoView 

$("#ButtonId").click(function() {
        var win = document.getElementById(IFRAMEID).contentWindow;
        var scrollTop = win.document.documentElement.scrollTop || win.pageYOffset || win.document.body.scrollTop;
        // scrollTop can getted
        if (scrollTop) {
            win.document.documentElement.scrollTop = 0;
            win.pageYOffset = 0; // safari
            win.document.body.scrollTop = 0;
        } else {
            win.document.body.scrollIntoView(true); // let scroll to the target view 
        }
    });

scrollIntoView() просмотр в scrollIntoView - MDN

0 голосов
/ 29 сентября 2016

Я знаю, что опоздал на игру, но я пытался выяснить это для длинного списка на мобильном телефоне. scrollTop () не работал для меня из-за междоменных конфликтов (и у меня не было доступа к родительскому окну), но изменение высоты сделало: 

$('#someClickableElementInIFrame').on('click', function(e){
      $("html body").animate({
      'height' : "0"
    }, {
        complete: function(){
          $("html body").css({
            'height' : "auto"
            })
          }
      })
});
0 голосов
/ 17 июня 2013

или используйте этот 

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%'
    });
}
};
...