Question

当window是iframe时，jQuery的scrollTop返回null。有没有人能够弄清楚如何获得iframe的scrollTop？

更多信息：

我的脚本在iframe中运行，父窗口在另一个域上，所以我无法访问iframe的ID或类似的内容

Answer 1

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

Answer 2

我在尝试在iframe中设置scrollTop时发现了这个问题...不完全是你的问题（你想要获取）但是这里的iframes解决方案也适用于那些也试图设置SET的人。

如果您想在iframe中滚动到页面顶部，这将无效：

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

然而，这将有效：

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

或者与jQuery等效：

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

对于此标记（包含在iframe中）：

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

Answer 3

您可以使用以下设置设置scrollTop：

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

所以你可以试试这样：

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

因为不同的浏览器在不同的元素（body或html）上设置scrollTop。

来自scrollTo插件：

但在某些浏览器中，这可能仍会失败。以下是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;
  });
};

然后您可以运行：

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

确定iframe向下滚动的距离。

Answer 4

好旧的javascript：

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

Answer 5

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

仅适用于“0”作为参数

Answer 6

或使用此

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

Answer 7

我知道我在这里游戏的时间已经很晚了，但是我试图在移动设备上列出一长串清单。由于跨域冲突（我无法访问父窗口），scrollTop（）并没有为我工作，但改变了高度：

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

Answer 8

我已经尝试

$('#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中的视图

Answer 9

由于您使用的是iFrame，因此需要在Windows“消息”事件中使用它

在此处阅读更多Info

在子视图（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
      );

**请注意，我使用“ *”作为分隔符，可以使用任何东西

Answer 10

我在iframe中也遇到了同样的问题。我的整个网站都出现白色iframe并无法滚动所以我用了这段代码，效果很好。

第1步。将此代码放入您的iframe

var offsettop =  120;
window.parent.postMessage({"setAnchor": offsettop}, "*");

第2步。将此代码放在您调用iframe的位置

window.addEventListener('message', function(event) {
  if(event.data['setAnchor']>0) {
    var offsetHeight =event.data['setAnchor'];
    jQuery('html, body').animate({
      scrollTop: offsetHeight
    }, 200);
  } 
})

如何获取iframe的scrollTop

10 个答案: