我有一个简单的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>
    );
  }
}

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

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

UPDATE:

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

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

javascript iphone reactjs iframe google-chrome-devtools