How to fire a function on page load with javascript the right way?

Question

Checked quite a lot of info also on stackoverflow, like in here How do I call a JavaScript function on page load?

but still I get problems firing the function on load. I have this one:

Code is in here: http://jsbin.com/agopuv/2/edit

Edited: Added the HTML+JS codes Here is the js code:

function toggleFullScreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
       (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {  
      document.documentElement.requestFullScreen();  
    } else if (document.documentElement.mozRequestFullScreen) {  
      document.documentElement.mozRequestFullScreen();  
    } else if (document.documentElement.webkitRequestFullScreen) {  
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
    }  
  } else {  
    if (document.cancelFullScreen) {  
      document.cancelFullScreen();  
    } else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();  
    } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
    }  
  }  
} 

$(document).on('pageinit', function () {
    setTimeout(toggleFullScreen,1000);
});

And Html code:

<input type="button" id="button" value="click to toggle" onclick="toggleFullScreen()">

and it actually works only when pressed on the button, but I did not succeeded in any ways to fire the function on page load.

Any advices regarding this? Thanks.

score 2 · Answer 1 · edited May 23 '17 at 10:25

Requesting full screen outside a user action is not permitted by the browser's security policy

Read the Mozilla UA Policy

The specification intentionally gives UAs great freedom in policy, because no one policy can fit all users, devices, and user interface designs. However, here is a policy that should be acceptable for conventional desktop browsers.

requestFullScreen while the window is already in the full-screen state is approved.

Otherwise, requestFullScreen outside a user action (e.g. a non-synthesized input event handler) is denied.

Otherwise, requestFullScreen without the ALLOW_KEYBOARD_INPUT flag is approved.

Otherwise, passive confirmation UI is presented and requestFullScreen is approved if and when the user approves it.

Also see a similar question

How to fire a function on page load with javascript the right way?

1 Answers1