Компонент react iframe прокручивает окно при загрузке в chrome во время эмуляции iphone

У меня есть простой компонент 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, но, конечно, это не кажется хорошим решением.

Мы будем благодарны за любое понимание этого вопроса :)

Обновлено:

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

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

Можете ли вы привести легко воспроизводимый пример, чтобы поиграть с ним?

ffeast 31.10.2018 20:25

Не уверен, но это может быть связано: stackoverflow.com/questions/44082430/… PS: тоже проверьте комментарии

Fawaz 03.11.2018 21:00

@ffeast именно так, я попытался найти другие ресурсы с модами начальной загрузки, которые всплывают автоматически, но у них нет этой причуды прокрутки фоновой страницы.

dork 06.11.2018 03:54
5
3
611
0

Другие вопросы по теме