How To Change The Browser To Fullscreen with JavaScript

Fullscreen Window

How to use JavaScript to view an element in fullscreen mode.

Click on the button to open the video in fullscreen mode:

Try it Yourself »

Video

fullscreen_native

Note: This feature is only available for TinyMCE 5.5 and later.

Note: The fullscreen_native option requires the Fullscreen plugin.

The fullscreen_native option allows the editor to use the browser full screen mode, rather than only filling the browser window when full screen mode is enabled. This functionality is the same as full screen mode for online videos.

Type: Boolean

Default Value: false

Possible values: true, false

Example: Using fullscreen_native

To use the browser-native full screen mode for the TinyMCE editor, set fullscreen_native to true. For example:

tinymce.init({ selector: ‘textarea’, // change this value according to your html plugins: ‘fullscreen’, fullscreen_native: true });

Limitations of the fullscreen_native option

The fullscreen_native option has the following limitations. When fullscreen_native is enabled:

  • The Escape keyboard key (Esc) will exit full screen mode. Default editor behavior of the Esc key will be overridden by browser and the Esc key will exit full screen mode instead of closing dialogs, menus, or moving focus from the editor UI to the editor content. This may lead to accessibility issues.
  • Firefox users – The full screen keyboard shortcut (Ctrl+Shift+F) cannot be used to repeatedly toggle the browser-native full screen mode on and off without interacting with the editor between on toggles. If the user does not interact with the editor between off and on toggles, the plugin will fall-back to filling the browser window.
  • Microsoft Internet Explorer 11 users – The full screen keyboard shortcut (Ctrl+Shift+F) will not activate the browser-native full screen. If the full screen shortcut is used, the plugin will fall-back to filling the browser window.
  • If the editor is initialized inside an iframe element, full screen mode will only fill the iframe on Firefox and Microsoft Internet Explorer 11.

Modal windows​

A modal window is a child window that disables parent window, to create a modal window, you have to set both parent and modal options:

const { BrowserWindow } = require('electron')

const child = new BrowserWindow({ parent: top, modal: true, show: false })
child.loadURL('https://github.com')
child.once('ready-to-show', () => {
child.show()
})

Showing the window gracefully​

When loading a page in the window directly, users may see the page load incrementally, which is not a good experience for a native app. To make the window display without a visual flash, there are two solutions for different situations.

Using the ready-to-show event​

While loading the page, the ready-to-show event will be emitted when the renderer process has rendered the page for the first time if the window has not been shown yet. Showing the window after this event will have no visual flash:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
win.show()
})

This event is usually emitted after the did-finish-load event, but for pages with many remote resources, it may be emitted before the did-finish-load event.

Please note that using this event implies that the renderer will be considered "visible" and paint even though show is false. This event will never fire if you use paintWhenInitiallyHidden: false

Setting the backgroundColor property​

For a complex app, the ready-to-show event could be emitted too late, making the app feel slow. In this case, it is recommended to show the window immediately, and use a backgroundColor close to your app's background:

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')

Note that even for apps that use ready-to-show event, it is still recommended to set backgroundColor to make app feel more native.

Full screen with key input

For security reasons, most keyboard inputs have been blocked in the fullscreen mode. However, in Google Chrome you can request keyboard support by calling the method with a flag:

docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

This does not work in Safari, and the method won’t be called.

With Firefox, we are discussing and looking into various ways of how we we could add keyboard input support without jeopardizing the end user’s security. One suggestion, that no one has implemented yet, is the requestFullscreenWithKeys method, which in turn would trigger certain notifications for the user.

How to open Microsoft Edge in Full Screen

Both Edge and Firefox require users to follow simi

Both Edge and Firefox require users to follow similar steps as taken in Google Chrome. You can press the F11, or do as follows:

  • Click on the setting icon, which is three dots aligned one next to the other, on the top-right corner of the screen.
  • You can use the keyboard shortcut Alt+F to open it.
  • In the ‘Zoom’ setting, you’ll see an option to maximize the screen.

Clicking on it will take you to the full-screen setting. You can revert back to a normal screen setting by pressing the F11 key.

Starting from Firefox version 73 Nightly

This kind of shortcut seems to let you easily launch the website in "Site Specific Browser" mode directly:

"C:\Program Files\Firefox Nightly\firefox.exe" --ssb https://www.google.com

Detecting fullscreen state change

The user could, for instance, exit fullscreen, something that might be good for you to know. For that we have a fullscreenchange event, that you can apply both to the element that requested fullscreen, but also to the document. Then we just detect the fullscreen state and take act accordingly, like this:

Fullscreen Document

To open the whole page in fullscreen, use the document.documentElement instead of document.getElementById("element"). In this example, we also use a close function to close the fullscreen:

Example

<script> /* Get the documentElement (<html>) to display the page in fullscreen */ var elem = document.documentElement; /* View in fullscreen */ function openFullscreen() {   if (elem.requestFullscreen) {     elem.requestFullscreen();   } else if (elem.webkitRequestFullscreen) { /* Safari */     elem.webkitRequestFullscreen();   } else if (elem.msRequestFullscreen) { /* IE11 */     elem.msRequestFullscreen();   } } /* Close fullscreen */ function closeFullscreen() {   if (document.exitFullscreen) {     document.exitFullscreen();   } else if (document.webkitExitFullscreen) { /* Safari */     document.webkitExitFullscreen();   } else if (document.msExitFullscreen) { /* IE11 */     document.msExitFullscreen();   } } </script>

You can also use CSS to style the page when it is in fullscreen mode:

Example

/* Safari */:-webkit-full-screen {  background-color: yellow;}/* IE11 */:-ms-fullscreen {  background-color: yellow;}/* Standard syntax */:fullscreen {  background-color: yellow;} Try it Yourself »

Your Answer

Sign up or log in Sign up using Google Sign up using Facebook Sign up using Email and Password

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock
detector
Go up