Реакция прокрутки окна компонента iframe при загрузке в Chrome при эмуляции iPhone - PullRequest
Новая
       10

Реакция прокрутки окна компонента iframe при загрузке в Chrome при эмуляции iPhone

0 голосов
/ 26 октября 2018

У меня есть простой компонент IFrame, и я просто передаю ему src, height и onLoad. У родителя просто есть текст под iframe. Когда загружается iframe, родительский элемент прокручивается, показывая нижнюю часть страницы. Это происходит только в Chrome, когда эмулируемым устройством является iPhone (все версии); он работает на эмулируемых устройствах 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, но, конечно, это не кажется хорошим решением.

Любое понимание по этому вопросу будет оценено:)

UPDATE:

Я попытался загрузить общедоступный сайт, который может быть встроен в iframe (https://usatoday.com), и он не прокручивает родительский элемент. Так что, вероятно, это сторонний источник. Но, тем не менее, остается вопрос, почему это происходит только в эмулируемом iPhone при использовании Chrome.

Источник, который прокручивает родителя, имеет модальный Bootstrap, который всплывает и показывает счетчик / прогресс, а затем показывает содержимое документа. Это, вероятно, модал, который вызывает прокрутку, поскольку он прокручивает родителя ровно настолько, чтобы верхняя часть модала касалась верхней части страницы / родителя.

...