Iframe-resizer: Parent pages scroll position problem

Created on 3 Jul 2018  路  11Comments  路  Source: davidjbradshaw/iframe-resizer

Hello David

Thank you for creating the iframe resizer script.

I seem to be having the occasional issue with a few of our websites. Once the iframe source has changed to a new source the page position keeps being thrown to the bottom of the page.

Just wondering if anyone else has had an issue like this? Please see example here: https://goo.gl/icHEBF

Please follow through to the last page which requires users details. Any thoughts would be appreciated.

Most helpful comment

I used

$(document).ready(function () {
  $("iframe").load(function () {
       $("html, body").animate({scrollTop: 0}, "slow");
  })
})

All 11 comments

Hello I have the same problem. It seems it remembers the vertical position of the last loaded page, and new loaded page is displayed in the same position - usually if the new page has no content there it just looks like a white screen.

It makes perfect sense that every time new page loads, vertical position is set to 0. No idea how to do this.

Same problem here. Anyone figured out how to solve this problem?

@davidjbradshaw Wouldn't it be a great solution to set y-scroll on every new iframe page load to 0?

You could call scrollTo(0,0) in the onReady event in the page you are loading

@davidjbradshaw
We already call parentIFrame.scrollTo(0,0), but it passes a negative y-value:
[iFrameSizer][Host page: iFrameResizer0] Reposition requested from iFrame (offset x:8 y:-544)

So the parent site doesn't scroll to top when the iframe page loads a new page.

That looks like you are calling scrollToOffset(), rather than
scrollTo().

@davidjbradshaw No, we simply call:

if ('parentIFrame' in window) {
  parentIFrame.scrollTo(0,0)
}

Can I reach you for private (paid) support? It would be great to have this problem solved.

The first step would be to put a simple example of the issue online somewhere that I can look at it.

I used

$(document).ready(function () {
  $("iframe").load(function () {
       $("html, body").animate({scrollTop: 0}, "slow");
  })
})

Try using parentIFrame.scrollTo() within the onReady event, in the page that is loaded in the iframe. Something like this:

window.iFrameResizer = {
  onReady: function () {
    if( 'parentIFrame' in window ) {
      window.parentIFrame.scrollTo(0, 0);
    }
  }
};

This seems to work in my situation. Hope it helps someone!

@sandrab you can reduce your example to this:

window.iFrameResizer = {
  onReady: function () {
     window.parentIFrame.scrollTo(0, 0)
  }
}

Calling window.parentIFrame.scrollTo(0, 0) on "onReady" event is in-turn calling window.scrollTo(x,y) inside this library; but this seems to have no impact for me in the UI.

But this workaround worked for me:

  1. Passed a message to parent from iframe using window.parentIFrame.sendMessage({...}) when onReady
  2. Capturing that message in parent
  3. Called scrollto in jquery way like - $("#iFrameWrapperDiv")[0].scrollIntoView();
Was this page helpful?
0 / 5 - 0 ratings

Related issues

amangeot picture amangeot  路  8Comments

Fanvaron picture Fanvaron  路  4Comments

wei2go picture wei2go  路  3Comments

premedios picture premedios  路  5Comments

frederic117 picture frederic117  路  4Comments