I have a simple IFrame component and I just pass a src, height, and onLoad to it. The parent just has some text below the iframe. When the iframe loads, the parent scrolls to show the bottom of the page. This only happens in Chrome when the emulated device is an iPhone (all versions); it works on emulated Android devices. I haven't tested in an actual device since I don't have an iPhone.
This is the IFrame component:
export class IFrame extends Component {
static propTypes = {
src: PropTypes.string.isRequired,
onLoad: PropTypes.func,
};
constructor(props) {
super(props);
this.iframe = React.createRef();
}
handleOnLoad = () => {
const { onLoad } = this.props;
window.scrollTo(0, 0);
if (onLoad) {
onLoad();
}
}
render() {
return (<iframe
ref={this.iframe}
src={this.props.src}
onLoad={this.handleOnLoad}
/>);
}
}
And this is how it's used.
class MyComponent extends Component {
static propTypes = {
iframeSrc: PropTypes.string.isRequired,
};
handleIframeLoad() {
// Do something. Or nothing.
}
render() {
return (
<Fragment>
<IFrame
src={this.props.iframeSrc}
onLoad={this.handleIframeLoad}
/>
<SomeOtherComponentThatOnlyRendersText />
</Fragment>
);
}
}
I tried putting window.scrollTo(0, 0); when the iframe loads but it doesn't work. It is called but when you log window.scrollY, it's 0. The iframe loads its content but it actually still does something else, I suppose? The source of the iframe is not mine so I have no control over it. I also tried putting a setTimeout before scrolling and the scrollTo gets called but of course that doesn't seem like a good solution.
Any insight regarding this issue will be appreciated :)
UPDATE:
I tried loading a public site that can be embedded in an iframe (https://usatoday.com) and it doesn't scroll the parent. So it probably is the third party source. But still, the question remains as to why it only happens in emulated iPhone when using Chrome.
The source that scrolls the parent has a Bootstrap modal that pops up and shows a spinner/progress and then shows the contents of the document. It's probably the modal that causes the scrolling since it scrolls the parent just enough to make the modal's top touch the top of the page/parent.
from React iframe component scrolls window on load in Chrome while emulating iPhone
No comments:
Post a Comment