javascript - 文件无效(Document is not active)

Question

Developing a Games Platform using Electron + React.

(使用Electron + React开发游戏平台。)

The games are loaded in an iframe and i'm forced to use a webview instead of an iframe due to cors issues.

(本场比赛被加载的iframe，我不得不使用webview而不是的iframe由于CORS的问题。)

And also i'm forced to use React v15.6.2 (no hooks)

(而且我也被迫使用React v15.6.2（没有钩子）)

The issue i'm trying to fix is exiting the fullscreen mode by loading a preload script (preload.js) to the webview that shoud capable of executing document.exitFullscreen() inside the iframe.

(我要解决的问题是通过将预加载脚本（preload.js）加载到应该能够在iframe中执行document.exitFullscreen()的Web视图中退出全屏模式。)

The is what happens when Escape is pressed in fullscreen mode:

(在全屏模式下按Escape时，会发生以下情况 ：)

I suspect it has to do with the fact that i'm using a Class component, because i was able to resolve this issue using functional component and hooks , but it's not an option in my project, so i will have to fix it without using React version 15.6.2

(我怀疑这与我正在使用Class组件有关，因为我能够使用功能组件和钩子解决此问题 ，但是这不是我的项目中的选择，因此我必须在不使用的情况下进行修复React版本15.6.2)

Play.js component:

(Play.js组件：)

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { remote } from 'electron';

import { StyledWebview } from './styled';

class Play extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isExpanded: false,
      height: 0,
    };
  }

  componentDidMount() {
    this.updateWindowDimensions();
    window.addEventListener('resize', this.updateWindowDimensions);
    const webviewTag = document.querySelector('webview');
    webviewTag.addEventListener("dom-ready", function(){
      webviewTag.openDevTools()
    });

    webviewTag.addEventListener('leave-html-full-screen', () => {
      this.setState({ isExpanded: false });
    });
    webviewTag.addEventListener('enter-html-full-screen', () => {
      this.setState({ isExpanded: true });
    });
    webviewTag.getWebContents().on('before-input-event', (e, i) => {
      console.log(i.key);
      if (i.key === 'Escape') {
        this.setState({ isExpanded: false });
        const mainWindow = remote.getCurrentWindow();
        if (mainWindow.isFullScreen()) {
          mainWindow.setFullScreen(false);
          webviewTag.send('exitFullscreen', {
            data: '[DesktopClient]: exit fullscreen from container',
          });
        }
      }
    });
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateWindowDimensions);
  }

  updateWindowDimensions = () => this.setState({ height: window.innerHeight });

  render() {
    const { computedMatch, accessToken, memberId, refreshToken } = this.props;
    const { height, isExpanded } = this.state;
    const gameId = computedMatch.params.id;
    const src = `https://.......`;

    return (
      <StyledWebview
        isExpanded={isExpanded}
        contentHeight={height}
        preload="./components/Play/Injection/preload.js"
        src={src}
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    accessToken: state.auth.userAuthDetails.accessToken,
    memberId: state.auth.userAuthDetails.memberId,
    refreshToken: state.auth.userAuthDetails.refreshToken,
  };
}

export default connect(mapStateToProps)(Play);

preload.js

(preload.js)

const { ipcRenderer } = require('electron');

console.log('injected........'); //this works

ipcRenderer.on('exitFullscreen', () => {
  console.log('document:', document); // this prints the document fine
  document.exitFullscreen(); // TypeError: Document not active <--------------------
});

  ask by Cristian Muscalu translate from so

Answer 1

等待大神答复