22

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

更多信息：

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

4

10 回答 10

30

我在尝试在 iframe 中设置 scrollTop 时发现了这个问题......不完全是你的问题（你想 GET），但这里有一个 iframe 内部的解决方案，供人们最终在这里尝试设置。

如果你想滚动到页面顶部，这在 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>
于 2010-10-19T03:44:42.090 回答
25 
$('#myIframe').contents().scrollTop()
于 2011-01-17T19:52:37.887 回答
12

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

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

所以你可以尝试像这样得到它：

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

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

从 scrollTo 插件：

但这在某些浏览器中可能仍然会失败。这是Ariel Flesher 的 jQuery 的 scrollTo 插件源代码中的相关部分：

// 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 向下滚动的距离。

于 2009-12-05T15:56:19.867 回答
6

好旧的javascript：

scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;
于 2010-11-09T04:11:04.700 回答
3 
$('#myIframe').contents().scrollTop(0);

仅适用于“0”作为参数

于 2013-11-12T11:19:45.657 回答
1

我已经尝试

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

于 2018-11-07T09:44:53.563 回答
0

或使用这个

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%'
    });
}
};
于 2013-06-17T10:17:47.773 回答
0

我知道我在这里玩游戏迟到了，但我试图在移动设备上找出一个很长的列表。由于跨域冲突，scrollTop() 对我不起作用（而且我无权访问父窗口），但改变高度确实：

$('#someClickableElementInIFrame').on('click', function(e){
      $("html body").animate({
      'height' : "0"
    }, {
        complete: function(){
          $("html body").css({
            'height' : "auto"
            })
          }
      })
});
于 2016-09-29T18:11:10.847 回答
0

因为您使用 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
      );

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

于 2019-09-10T11:18:23.970 回答
0

我在 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);
  } 
})
于 2020-04-17T11:29:42.127 回答