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

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

Дополнительная информация:

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

Ответ 1

Вы можете установить 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.

Ответ 2

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

Ответ 3

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

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

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

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

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

Или equivalent с jQuery:

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

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

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

Ответ 4

Хороший старый javascript:

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

Ответ 5

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

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

Ответ 6

Я пытаюсь

$('#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

Ответ 7

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

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

Ответ 8

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

$('#someClickableElementInIFrame').on('click', function(e){
      $("html body").animate({
      'height' : "0"
    }, {
        complete: function(){
          $("html body").css({
            'height' : "auto"
            })
          }
      })
});

Ответ 9

Поскольку вы используете iFrame, вам нужно будет использовать его с событием "сообщение" Windows

Подробнее читайте здесь Информация

С видом на ребенка (Iframe)

window.top.postMessage(0 + '$' + 'form-iframe-top', "*");

В представлении родителей

   window.addEventListener("message",function(e) {
       if (e && e.data && typeof e.data == "string" && e.data != undefined) {
         var data = e.data.split("$");
             if (data.length == 2) {
               var scroll_height = data[0], iframe_id = data[1];
               if(iframe_id=="form-iframe-top"){
                   window.scrollTo(0,scroll_height);
                   return;
                  }
               }
          }
         },
        false
      );

** Обратите внимание, я использовал "*" в качестве разделителя, вы можете использовать все, что угодно