document.documentElement requestFullscreen - undefined не является объектом, мобильный IOS

Question

После этого урока я написал этот компонент реакции (упрощенный, чтобы показать только проблему):

import React, { Component } from "react";

class HeaderImages extends Component {

  //usage: getreqfullscreen().call(targetelement) // open full screen on targetelement
  getreqfullscreen = () => {
    var root = document.documentElement;
    return (
      root.requestFullscreen ||
      root.webkitRequestFullscreen ||
      root.mozRequestFullScreen ||
      root.msRequestFullscreen
    );
  };

  //usage: getexitfullscreen.call(document) //always pass document into it
  getexitfullscreen = () => {
    return (
      document.exitFullscreen ||
      document.webkitExitFullscreen ||
      document.mozCancelFullScreen ||
      document.msExitFullscreen
    );
  };

  getfullscreenelement = () => {
    return (
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.mozFullScreenElement ||
      document.msFullscreenElement
    );
  };

  toggleFullScreen = e => {
    if (this.getfullscreenelement() == null) {
      // if browser is currently not in full screen
      this.getreqfullscreen().call(e.target);
    } else {
      this.getexitfullscreen().call(document);
    }
  };

  render() {

    return (
      <div>
        <img
          src={url}
          className="header-image"
          alt="project-screenshot"
          onClick={this.toggleFullScreen.bind(this)}
        />
      </div>
    );
  }
}

export default HeaderImages;

Я хотел бы, чтобы при нажатии на изображение появлялось полноэкранное изображение. Это работает в любом браузере для настольного компьютера, с которым я тестировал, но когда я открываю приложение на мобильных версиях Chrome и Safari для ios, я получаю следующую ошибку:

TypeError: undefined не является объектом (оценивается как _this.getreqfullscreen(). Call')

Указывая на строку:this.getreqfullscreen().call(e.target);

Трассировка стека указывает на react-dom,

У меня проблемы с выяснением, что означает ошибка и как ее исправить - onClick Функция проходит узел DOM правильно и document.documentElement кажется, хорошо.

Спецификации Element.requestFullscreen() показывают, что эта функция доступна в мобильном Chrome.

Есть ли альтернативный способ сделать это?

Answer 1

Я думаю, что вы просто опечатка: webkitRequestFullscreen пытаться webkitRequestFullScreen а также msRequestFullscreen в msRequestFullScreen (экран => экран)

Изменить: я обнаружил здесь, что Chrome на IOS использует Safari и не поддерживает полноэкранный API, поэтому вам может понадобиться polyfill.

Answer 2

Этот код работал у меня:

      $("#fullsize").click(function (){
    polyfill();
});
function polyfill() {
    var interesting = document.getElementById("interesting");

    // Check if this browser support the fullscreen API
    if (typeof document.fullscreenEnabled !== undefined) {

        // Register a click handler for the <div>
        interesting.addEventListener("click", function() {

            // Toggle fullscreen
            if (document.fullscreenElement) {
                document.exitFullscreen();
            } else {
                this.requestFullscreen();
            }

        }, false);

    }