关于jQuery：如何获取iframe的scrollTop

How to get scrollTop of an iframe

当window是iframe时，jQuery的scrollTop返回null。有谁能弄清楚如何获取iframe的scrollTop？

更多信息：

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

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

相关讨论

我在尝试在iframe内设置scrollTop时发现了这个问题...不完全是您的问题(您想获取GET)，但这是iframe内针对最终也尝试进行SET的人们的解决方案。

如果要滚动到页面顶部，则在iframe中将无法使用：

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

但是，这将起作用：

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

或者与jQuery等效：

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

对于此标记(包含在iframe中)：

1
2
3
4
5
6
7

相关讨论

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

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

所以您可以尝试像这样获得它：

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

因为不同的浏览器在不同的元素(正文或html)上设置了scrollTop。

从scrollTo插件中：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 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;
});
};

然后您可以运行：

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

确定iframe向下滚动的距离。

相关讨论

很好的旧javascript：

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

相关讨论

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

仅将" 0"用作参数

相关讨论

我尝试

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

和

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

第一个功能在桌面浏览器中成功运行。在移动浏览器中不起作用。所以我将另一个函数与scrollIntoView

1
2
3
4
5
6
7
8
9
10
11
12

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

我在iframe中也遇到了同样的问题。我的整个网站都出现白色iframe并无法滚动
所以我使用了这段代码，它工作正常。

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

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

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

1
2
3
4
5
6
7
8

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

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

在此处阅读更多信息

在子视图上(Iframe)

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

在父视图上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
);

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

我知道我在这里玩游戏迟到了，但是我试图在移动设备上找到一长串列表。
由于跨域冲突(并且我无权访问父窗口)，scrollTop()对我不起作用，但是更改高度却做到了：

1
2
3
4
5
6
7
8
9
10
11

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

或使用此

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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