How to get scrollTop of an iframe
jQuery's scrollTop returns null when window is an iframe. Has anyone bee开发者_如何学Cn able to figure out how to get scrollTop of an iframe?
more info:
my script is running in the iframe itself, the parent window is on another domain, so I can't access the ID of the iframe or anything like that
I found this question while trying to SET scrollTop inside an iframe... not exactly your question (you wanted to GET) but here's a solution inside iframes for people that also end up here trying to SET.
If you want to scroll to the top of the page this will NOT work inside an iframe:
$("html,body").scrollTop(0);
However, this will work:
document.getElementById("wrapper").scrollIntoView();
Or the equivilent with jQuery:
$("#wrapper")[0].scrollIntoView();
For this markup (contained inside an iframe):
<html>
<body>
<div id="wrapper">
<!-- lots of content -->
</div>
</body>
</html>
$('#myIframe').contents().scrollTop()
You can set scrollTop by using this setup:
$("html,body").scrollTop(25);
So you could try getting it like this:
$("html,body").scrollTop();
Because different browsers set the scrollTop on different elements (body or html).
From the scrollTo plugin:
But that will probably still fail in certain browsers. Here is the relevant section from the source code of 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;
});
};
You may then run:
$(window)._scrollable().scrollTop();
To determine how far the iframe has scrolled down.
Good old javascript:
scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;
$('#myIframe').contents().scrollTop(0);
Only works with "0" as parameter
I have try to
$('#myIframe').contents().scrollTop(0);
and
let scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;
the first function work success in desktop browser. not working in mobile browser. so I use another function with 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() view in scrollIntoView - MDN
or use this one
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%'
});
}
};
I know I'm late to the game here, but I was trying to figure this out for a long list on mobile. scrollTop() wasn't working for me due to cross-domain conflicts(and I didn't have access to parent window), but changing the height did:
$('#someClickableElementInIFrame').on('click', function(e){
$("html body").animate({
'height' : "0"
}, {
complete: function(){
$("html body").css({
'height' : "auto"
})
}
})
});
Cause you using iFrame you will need to use it that way with windows "message" event
Read here for more Info
On Child View (Iframe)
window.top.postMessage(0 + '$' + 'form-iframe-top', "*");
On Parent View
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 );
**Note i used "*" as separator you can use anything
I have faced the same problem in my iframe. My whole website comming white iframe and scrolling not working So I used this code and it's work fine.
Step 1. put this code to your iframe
var offsettop = 120;
window.parent.postMessage({"setAnchor": offsettop}, "*");
Step 2. put this code where your call you iframe
window.addEventListener('message', function(event) {
if(event.data['setAnchor']>0) {
var offsetHeight =event.data['setAnchor'];
jQuery('html, body').animate({
scrollTop: offsetHeight
}, 200);
}
})
加载中,请稍侯......
精彩评论