javascript - React web app to launch and request fullscreen on load - edited - Stack Overflow

admin管理员组

文章数量:1323714

I've deiced to reword the question after more hours of attempting hacks and fixes, with no end result. I am using the SCREENFULL npm for this.

This web application is a fullscreen interactive UI for a menu system used by employee's. I desired to either have the app launch into fullscreen upon loading OR detect if fullscreen to display prompt button to enable fullscreen and launch the app. Neither seem to be doing the job at all.

My attempts included:

goFullScreen (){
  screenfull.request();
}
<button onClick={(e) => this.goFullScreen()}> enable full screen </button>

works fine. Goes full screen. Now to detect to display the app (loggin page, menu etc) or only the fullscreen button (that way the app can only be view in fullscreen).

screenfull.on('change', () => {
    if (screenfull.isFullscreen) {
      console.log("it freaken works");
      return ( 
        <h1> hi </h1>
      )
    } else if (!screenfull.isFullscreen) {
    // display button to go fullscreen
    }
});

Does not return the <h1> hi </hi> or any thing within return, but the console does log. Strange.

UPDATE:

I decided to try a DidComponentMount (along with javascript's "onLoad" events) :

ponentDidMount () {
  screenfull.request();
  console.log("request happened");
}

Well, the request did happen, but the fullscreen did not enable. After debugging an error checking I get a webkitfullscreen error using the screen error detector included in the package.

I have no idea why this won't work, even so why this is so difficult.

Is there a work around for this, or am I just making this a lot harder then it should be?

This web app is only running on a Android tablet and google chrome browser.

I've deiced to reword the question after more hours of attempting hacks and fixes, with no end result. I am using the SCREENFULL npm for this.

This web application is a fullscreen interactive UI for a menu system used by employee's. I desired to either have the app launch into fullscreen upon loading OR detect if fullscreen to display prompt button to enable fullscreen and launch the app. Neither seem to be doing the job at all.

My attempts included:

goFullScreen (){
  screenfull.request();
}
<button onClick={(e) => this.goFullScreen()}> enable full screen </button>

works fine. Goes full screen. Now to detect to display the app (loggin page, menu etc) or only the fullscreen button (that way the app can only be view in fullscreen).

screenfull.on('change', () => {
    if (screenfull.isFullscreen) {
      console.log("it freaken works");
      return ( 
        <h1> hi </h1>
      )
    } else if (!screenfull.isFullscreen) {
    // display button to go fullscreen
    }
});

Does not return the <h1> hi </hi> or any thing within return, but the console does log. Strange.

UPDATE:

I decided to try a DidComponentMount (along with javascript's "onLoad" events) :

ponentDidMount () {
  screenfull.request();
  console.log("request happened");
}

Well, the request did happen, but the fullscreen did not enable. After debugging an error checking I get a webkitfullscreen error using the screen error detector included in the package.

I have no idea why this won't work, even so why this is so difficult.

Is there a work around for this, or am I just making this a lot harder then it should be?

This web app is only running on a Android tablet and google chrome browser.

• javascript
• android
• reactjs
• fullscreen
• html5-fullscreen

Share Improve this question Follow edited Aug 27, 2018 at 21:21 Robolisk asked Aug 27, 2018 at 3:04 RoboliskRobolisk 1,79255 gold badges2828 silver badges5959 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The solution was simple. https://developers.google./web/fundamentals/native-hardware/fullscreen/

It was with the manifest json to get my exact desired result.

本文标签： javascriptReact web app to launch and request fullscreen on loadeditedStack Overflow