在模拟iPhone时,React iframe组件在Chrome中加载窗口

Question

我有一个简单的IFrame组件,我只是将src,height和onLoad传递给它.父母只在iframe下面有一些文字.加载iframe时,父级滚动显示页面底部.只有当模拟设备是iPhone(所有版本)时才会在Chrome中发生这种情况; 它适用于模拟的Android设备.我没有在实际设备中测试过,因为我没有iPhone.

这是IFrame组件:

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

这就是它的用法.

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

我尝试window.scrollTo(0, 0);在iframe加载时放置,但它不起作用.它被调用但是当你记录时window.scrollY,它就是0.iframe加载了它的内容,但实际上它仍然会做其他事情,我想？iframe的来源不是我的,所以我无法控制它.我也试过setTimeout在滚动之前放一个scrollTo被调用但当然这似乎不是一个好的解决方案.

任何关于这个问题的见解将不胜感激:)

更新:

我尝试加载一个可以嵌入iframe(https://usatoday.com)的公共站点,它不会滚动父项.所以它可能是第三方来源.但问题仍然是,为什么它只会在使用Chrome时在模拟的iPhone中发生.

滚动父项的源具有一个Bootstrap模式,该模式会弹出并显示一个微调/进度,然后显示文档的内容.它可能是导致滚动的模态,因为它滚动父项恰好足以使模态的顶部触摸页面/父项的顶部.