当window是iframe时，jQuery的scrollTop返回null。有谁能弄清楚如何获取 iframe 的scrollTop 吗？
更多信息：
我的脚本在 iframe 本身中运行，父窗口位于另一个域中，因此我无法访问 iframe 的 ID 或类似的内容
我在尝试在 iframe 内设置滚动顶部时发现了这个问题...不完全是你的问题（你想要获取），但这里有一个 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>
$('#myIframe').contents().scrollTop()
您可以使用以下设置来设置
scrollTop$("html,body").scrollTop(25);
所以你可以尝试这样得到它：
$("html,body").scrollTop();
因为不同的浏览器在不同的元素（body 或 html）上设置
scrollTop来自scrollTo插件：
但是在某些浏览器中这可能仍然会失败。以下是 Ariel Flesher 的 jQuery 滚动To 插件源代码中的相关部分：
// 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 向下滚动了多远。
scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;
$('#myIframe').contents().scrollTop(0);
仅适用于“0”作为参数
$('#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
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%'
});
}
};
$('#someClickableElementInIFrame').on('click', function(e){
$("html body").animate({
'height' : "0"
}, {
complete: function(){
$("html body").css({
'height' : "auto"
})
}
})
});
阅读此处了解更多
在子视图（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
);
第 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);
}
})
this.myIframe.contentWindow.document.addEventListener('scroll', (event) => {
console.log('scrollTop: ', event.target.body.scrollTop);
}, false);