Issue with HMTL5 Desktop Notifications in Google Chrome

Issue with HMTL5 Desktop Notifications in Google Chrome - javascript

I'm having problems adding basic desktop notifications to my wicket site. Based on the example code at https://developer.mozilla.org/en-US/docs/Web/API/Notification I've overridden the renderHead(IHeaderResponse) method in my page so that the following is added to the page:
<script type="text/javascript" id="desktopNotification-init">
/*<![CDATA[*/
function notifyMe(){
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}else if (Notification.permission === "granted") {
var notification = new Notification("You have a system notification");
}else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if(!('permission' in Notification)) {
Notification.permission = permission;
}
if (permission === "granted") {
var notification = new Notification("You have a system notification");
}
});
}
}
/*]]>*/
</script>
I then have a button that adds a call to the function when clicked:
public void onClick( AjaxRequestTarget p_target, WebMarkupContainer p_menuItemComponent ) {
if( p_target != null ) {
p_target.appendJavaScript( "notifyMe();" );
}
}
This works in Firefox but clicking the button has no effect in Chrome. It seems to be an issue with the permission request as it works correctly if I change settings to always allow notifications. Is there an issue with the javascript that I'm missing?

Related

Javascript disable chrome notifications

I need a page with a button that when pressed disables or blocks all push notifications enabled on chrome.
I tried this :
let dnperm = document.getElementById('dnperm');
dnperm.addEventListener('click', function(e){
e.preventDefault();
if(!window.Notification){
alert("Notification not supported!");
}else{
Notification.requestPermission().then(function(permission) {
console.log(permission);
if(permission === 'granted'){
permission = 'denied';
alert("you succesd");
}else if(permission === 'denied'){ alert("you fail");
permission = 'granted';
}
})
}
});
HTML :
<body>
block

You can`t change Notification.permission via browser API, it can be done only via native browser propt

IOS10 fullscreen safari Javascript

I'm trying to make a div go fullscreen, when a user clicks a button on a website.
Only thing is, every browser seems to want to work except for Safari on IOS.
What will I need to do to be able to make it fullscreen? I've tried researching, but unable to find anything.
Heres my current code:
<script type="text/javascript">
function goFullscreen(id) {
var element = document.getElementById(id);
var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
var docElm = document.documentElement;
if (!isInFullScreen) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>

As mentioned on many posts, there is no way to switch to fullscreen on IOS >=10 in Safari and Chrome. It is because the Fullscreen API is not supported:
Can I Use Full Screen API
open webpage in fullscreen in Safari on iOS
Full screen api HTML5 and Safari (iOS 6)
You have two possible tricks:
Inform the user to switch to landscape mode. Indeed, you can't hardcode this and iOS Chrome can't do this too (Prevent orientation change in iOS Safari).
if your webpage is exported in a web app and you configure the meta balizes correctly (Optimizing Full Screen Mobile Web App for iOS).

Remove HTML5 notification permissions

You can prompt a user to allow or deny desktop notifications from the browser by running:
Notification.requestPermission(callback);
But is it possible to remove that permission by code? We want our users to have the option to toggle notifications. Can this be achieved by JavaScript or do we need to save that option elsewhere?

Looking at the documentation on Notification at MDN and WHATWG, there does not seem to be a way to request revocation of permission. However, you could emulate your own version of the permission using localStorage to support that missing functionality. Say you have a checkbox that toggles notifications.
<input type="checkbox" onChange="toggleNotificationPermission(this);" />
You can store your remembered permissions under the notification-permission key in local storage, and update the permission state similar to:
function toggleNotificationPermission(input) {
if (Notification.permission === 'granted') {
localStorage.setItem('notification-permission', input.checked ? 'granted' : 'denied');
} else if (Notification.permission === 'denied') {
localStorage.setItem('notification-permission', 'denied');
input.checked = false;
} else if (Notification.permission === 'default') {
Notification.requestPermission(function(choice) {
if (choice === 'granted') {
localStorage.setItem('notification-permission', input.checked ? 'granted' : 'denied');
} else {
localStorage.setItem('notification-permission', 'denied');
input.checked = false;
}
});
}
}
You could retrieve the permission as:
function getNotificationPermission() {
if (Notification.permission === 'granted') {
return localStorage.getItem('notification-permission');
} else {
return Notification.permission;
}
}
When you want to display a notification, check your permission:
if (getNotificationPermission() === 'granted') {
new Notification(/*...*/);
}

No, there is no way for your script to programmatically relinquish permission to show notifications. The API specification does not have any permission-related functions aside from requestPermission. (Of course, a browser may have an options menu that allows the user to revoke permission for a domain, but that's a browser-level option, not a site-level option. For example, in Chrome, you can see this options menu by clicking the icon in the left of the address bar.)
If you don't want to show notifications, simply don't call new Notification.
You can either wrap all your calls to new Notification inside conditions:
if(notifications_allowed) {
new Notification(...);
}
Or you can rewrite the Notification constructor to contain a contiditional and call the original Notification as appropriate:
(function() {
var oldNofitication = Notification;
Notification = function() {
if(notifications_allowed) {
oldNotification.apply(this, arguments);
}
}
})();
If you use vendor-prefixed constructors or functions (e.g., webkitNotifications.createNotification), then you'll need to rewrite each of those as well to be conditional on your options variable.

Javascript Game Design - force screen to fullscreen - FAUX native App for touchscreens [duplicate]

How can I make a visitor's browser go fullscreen using JavaScript, in a way that works with IE, Firefox and Opera?

In newer browsers such as Chrome 15, Firefox 10, Safari 5.1, IE 10 this is possible. It's also possible for older IE's via ActiveX depending on their browser settings.
Here's how to do it:
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);
The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)
Read more: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

This code also includes how to enable full screen for Internet Explorer 9, and probably older versions,
as well as very recent versions of Google Chrome. The accepted answer may also be used for other browsers.
var el = document.documentElement
, rfs = // for newer Webkit and Firefox
el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {
wscript.SendKeys("{F11}");
}
}
Sources:
Chrome Fullscreen API (note, however, that
requestFullscreen "only works during" "[m]ost UIEvents and MouseEvents, such as click and keydown, etc.", "so it cannot be used maliciously".)
How to make browser full screen using F11 key event through JavaScript

This is as close as you can get to full screen in JavaScript:
<script type="text/javascript">
window.onload = maxWindow;
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
</script>

Here is a complete solution to get in and out of full screen mode (aka cancel, exit, escape)
function cancelFullScreen() {
var el = document;
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen||el.webkitExitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false
}
function toggleFullScreen(el) {
if (!el) {
el = document.body; // Make the body go full screen.
}
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen();
} else {
requestFullScreen(el);
}
return false;
}

You can use The fullscreen API
You can see an example here
The fullscreen API provides an easy way for web content to be
presented using the user's entire screen. This article provides
information about using this API.

The new html5 technology – fullscreen API gives us an easy way to
present a web page content in full-screen mode. We are about to give
you detailed information about the fullscreen mode. Just try to
imagine about all possible advantages which you can get using this
technology – full-screen photo albums, videos, and even games.
But before we describe this new technology, I have to note that this technology is experimental, and supported by all major Browsers.
You can find the full tutorial here : http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
Here is working Demo : http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Simple example from: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

I've used this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
}
// End -->
</script>
</head>
<body>
<h1 style="text-align: center;">
Open In Full Screen
</h1>
<div style="text-align: center;"><br>
<a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
Open Full Screen Window
</a>
</div>
</body>
</html>

Create Function
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
$scope.topMenuData.showSmall = true;
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 {
$scope.topMenuData.showSmall = false;
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
In Html Put Code like
<ul class="unstyled-list fg-white">
<li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
<li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
</ul>

Try screenfull.js. It's a nice cross-browser solution that should work for Opera browser as well.
Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.
Demo.

This function work like a charm
function toggle_full_screen()
{
if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen))
{
if (document.documentElement.requestFullScreen){
document.documentElement.requestFullScreen();
}
else if (document.documentElement.mozRequestFullScreen){ /* Firefox */
document.documentElement.mozRequestFullScreen();
}
else if (document.documentElement.webkitRequestFullScreen){ /* Chrome, Safari & Opera */
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
else if (document.msRequestFullscreen){ /* IE/Edge */
document.documentElement.msRequestFullscreen();
}
}
else
{
if (document.cancelFullScreen){
document.cancelFullScreen();
}
else if (document.mozCancelFullScreen){ /* Firefox */
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen){ /* Chrome, Safari and Opera */
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen){ /* IE/Edge */
document.msExitFullscreen();
}
}
}
To use it just call:
toggle_full_screen();

Luckily for unsuspecting web users this cannot be done with just javascript. You would need to write browser specific plugins, if they didn't already exist, and then somehow get people to download them. The closest you can get is a maximized window with no tool or navigation bars but users will still be able to see the url.
window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">
This is generally considered bad practice though as it removes a lot of browser functionality from the user.

Now that the full screen APIs are more widespread and appear to be maturing, why not try Screenfull.js? I used it for the first time yesterday and today our app goes truly full screen in (almost) all browsers!
Be sure to couple it with the :fullscreen pseudo-class in CSS. See https://www.sitepoint.com/use-html5-full-screen-api/ for more.

This may support
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function max()
{
window.open("", "_self", "fullscreen=yes, scrollbars=auto");
}
</script>
</head>
<body onload="max()">
<form id="form1" runat="server">
<div>
This is Test Page
</div>
</form>
</body>
</html>

Can you Try:
<script type="text/javascript">
function go_full_screen(){
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
</script>
Full Screen / Compress Screen

This will works to show your window in full screen
Note: For this to work, you need Query from http://code.jquery.com/jquery-2.1.1.min.js
Or make have javascript link like this.
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="demo-element">
<span>Full Screen Mode Disabled</span>
<button id="go-button">Enable Full Screen</button>
</div>
<script>
function GoInFullscreen(element) {
if(element.requestFullscreen)
element.requestFullscreen();
else if(element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if(element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
else if(element.msRequestFullscreen)
element.msRequestFullscreen();
}
function GoOutFullscreen() {
if(document.exitFullscreen)
document.exitFullscreen();
else if(document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if(document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if(document.msExitFullscreen)
document.msExitFullscreen();
}
function IsFullScreenCurrently() {
var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
if(full_screen_element === null)
return false;
else
return true;
}
$("#go-button").on('click', function() {
if(IsFullScreenCurrently())
GoOutFullscreen();
else
GoInFullscreen($("#demo-element").get(0));
});
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
if(IsFullScreenCurrently()) {
$("#demo-element span").text('Full Screen Mode Enabled');
$("#go-button").text('Disable Full Screen');
}
else {
$("#demo-element span").text('Full Screen Mode Disabled');
$("#go-button").text('Enable Full Screen');
}
});</script>

Try this script
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>
For calling from script use this code,
window.fullScreen('fullscreen.jsp');
or with hyperlink use this
<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');">
Open in Full Screen Window</a>

In Firefox 10, you can make the current page go fullscreen (real fullscreen with no window chrome) using this javascript:
window.fullScreen = true;

A Q&D way to go full screen, if you are in a "kiosk" situation, is to feed an F11 to the browser window after it's up and running. This is not pretty starting up and the user might be able to poke a touch screen at the top and get a semi-full-screen view, but feeding the F11 might do in a pinch or just to get started on a project.

Here is my full solution for Full Screen and Exit Full Screen both (many thanks to help from tower's answer above):
$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
var element = document.body;
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$.is_fs = true;
$(calr).val('Exit Full Screen');
}
$.cancel_fs = function(calr)
{
var element = document; //and NOT document.body!!
var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$(calr).val('Full Screen');
$.is_fs = false;
}
$.toggleFS = function(calr)
{
$.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}
});
//
CALLING:
<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />

function fs(){plr.requestFullscreen();document.exitFullscreen()}; or function fs(){(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()}
<!DOCTYPE html><html><head>
<style>
body{background:#000}
#plr{position:relative;background:#fff;width:360px}
#vd{width:100%;background:grey}
button{width:48px;height:48px;border:0;background:grey}
</style>
</head><body>
<div id="plr">
<video id="vd" src="video.mp4"></video>
<button onclick="(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()">fs</button>
<button onclick="plr.requestFullscreen();document.exitFullscreen()">fs2</button>
</div>
</body></html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open the video in fullscreen mode.</p>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<video width="100%" controls id="myvideo">
<source src="rain.mp4" type="video/mp4">
<source src="rain.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var elem = document.getElementById("myvideo");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
</body>
</html>
Source:https://www.w3schools.com/howto/howto_js_fullscreen.asp

Full screen window either jquery or javascript for all browser? [duplicate]

How can I make a visitor's browser go fullscreen using JavaScript, in a way that works with IE, Firefox and Opera?

In newer browsers such as Chrome 15, Firefox 10, Safari 5.1, IE 10 this is possible. It's also possible for older IE's via ActiveX depending on their browser settings.
Here's how to do it:
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);
The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)
Read more: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

This code also includes how to enable full screen for Internet Explorer 9, and probably older versions,
as well as very recent versions of Google Chrome. The accepted answer may also be used for other browsers.
var el = document.documentElement
, rfs = // for newer Webkit and Firefox
el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {
wscript.SendKeys("{F11}");
}
}
Sources:
Chrome Fullscreen API (note, however, that
requestFullscreen "only works during" "[m]ost UIEvents and MouseEvents, such as click and keydown, etc.", "so it cannot be used maliciously".)
How to make browser full screen using F11 key event through JavaScript

This is as close as you can get to full screen in JavaScript:
<script type="text/javascript">
window.onload = maxWindow;
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
</script>

Here is a complete solution to get in and out of full screen mode (aka cancel, exit, escape)
function cancelFullScreen() {
var el = document;
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen||el.webkitExitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false
}
function toggleFullScreen(el) {
if (!el) {
el = document.body; // Make the body go full screen.
}
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen();
} else {
requestFullScreen(el);
}
return false;
}

You can use The fullscreen API
You can see an example here
The fullscreen API provides an easy way for web content to be
presented using the user's entire screen. This article provides
information about using this API.

The new html5 technology – fullscreen API gives us an easy way to
present a web page content in full-screen mode. We are about to give
you detailed information about the fullscreen mode. Just try to
imagine about all possible advantages which you can get using this
technology – full-screen photo albums, videos, and even games.
But before we describe this new technology, I have to note that this technology is experimental, and supported by all major Browsers.
You can find the full tutorial here : http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
Here is working Demo : http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Simple example from: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

I've used this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
}
// End -->
</script>
</head>
<body>
<h1 style="text-align: center;">
Open In Full Screen
</h1>
<div style="text-align: center;"><br>
<a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
Open Full Screen Window
</a>
</div>
</body>
</html>

Create Function
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
$scope.topMenuData.showSmall = true;
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 {
$scope.topMenuData.showSmall = false;
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
In Html Put Code like
<ul class="unstyled-list fg-white">
<li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
<li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
</ul>

Try screenfull.js. It's a nice cross-browser solution that should work for Opera browser as well.
Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.
Demo.

This function work like a charm
function toggle_full_screen()
{
if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen))
{
if (document.documentElement.requestFullScreen){
document.documentElement.requestFullScreen();
}
else if (document.documentElement.mozRequestFullScreen){ /* Firefox */
document.documentElement.mozRequestFullScreen();
}
else if (document.documentElement.webkitRequestFullScreen){ /* Chrome, Safari & Opera */
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
else if (document.msRequestFullscreen){ /* IE/Edge */
document.documentElement.msRequestFullscreen();
}
}
else
{
if (document.cancelFullScreen){
document.cancelFullScreen();
}
else if (document.mozCancelFullScreen){ /* Firefox */
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen){ /* Chrome, Safari and Opera */
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen){ /* IE/Edge */
document.msExitFullscreen();
}
}
}
To use it just call:
toggle_full_screen();

Luckily for unsuspecting web users this cannot be done with just javascript. You would need to write browser specific plugins, if they didn't already exist, and then somehow get people to download them. The closest you can get is a maximized window with no tool or navigation bars but users will still be able to see the url.
window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">
This is generally considered bad practice though as it removes a lot of browser functionality from the user.

Now that the full screen APIs are more widespread and appear to be maturing, why not try Screenfull.js? I used it for the first time yesterday and today our app goes truly full screen in (almost) all browsers!
Be sure to couple it with the :fullscreen pseudo-class in CSS. See https://www.sitepoint.com/use-html5-full-screen-api/ for more.

This may support
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function max()
{
window.open("", "_self", "fullscreen=yes, scrollbars=auto");
}
</script>
</head>
<body onload="max()">
<form id="form1" runat="server">
<div>
This is Test Page
</div>
</form>
</body>
</html>

Can you Try:
<script type="text/javascript">
function go_full_screen(){
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
</script>
Full Screen / Compress Screen

This will works to show your window in full screen
Note: For this to work, you need Query from http://code.jquery.com/jquery-2.1.1.min.js
Or make have javascript link like this.
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="demo-element">
<span>Full Screen Mode Disabled</span>
<button id="go-button">Enable Full Screen</button>
</div>
<script>
function GoInFullscreen(element) {
if(element.requestFullscreen)
element.requestFullscreen();
else if(element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if(element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
else if(element.msRequestFullscreen)
element.msRequestFullscreen();
}
function GoOutFullscreen() {
if(document.exitFullscreen)
document.exitFullscreen();
else if(document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if(document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if(document.msExitFullscreen)
document.msExitFullscreen();
}
function IsFullScreenCurrently() {
var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
if(full_screen_element === null)
return false;
else
return true;
}
$("#go-button").on('click', function() {
if(IsFullScreenCurrently())
GoOutFullscreen();
else
GoInFullscreen($("#demo-element").get(0));
});
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
if(IsFullScreenCurrently()) {
$("#demo-element span").text('Full Screen Mode Enabled');
$("#go-button").text('Disable Full Screen');
}
else {
$("#demo-element span").text('Full Screen Mode Disabled');
$("#go-button").text('Enable Full Screen');
}
});</script>

Try this script
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>
For calling from script use this code,
window.fullScreen('fullscreen.jsp');
or with hyperlink use this
<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');">
Open in Full Screen Window</a>

In Firefox 10, you can make the current page go fullscreen (real fullscreen with no window chrome) using this javascript:
window.fullScreen = true;

A Q&D way to go full screen, if you are in a "kiosk" situation, is to feed an F11 to the browser window after it's up and running. This is not pretty starting up and the user might be able to poke a touch screen at the top and get a semi-full-screen view, but feeding the F11 might do in a pinch or just to get started on a project.

Here is my full solution for Full Screen and Exit Full Screen both (many thanks to help from tower's answer above):
$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
var element = document.body;
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$.is_fs = true;
$(calr).val('Exit Full Screen');
}
$.cancel_fs = function(calr)
{
var element = document; //and NOT document.body!!
var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$(calr).val('Full Screen');
$.is_fs = false;
}
$.toggleFS = function(calr)
{
$.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}
});
//
CALLING:
<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />

function fs(){plr.requestFullscreen();document.exitFullscreen()}; or function fs(){(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()}
<!DOCTYPE html><html><head>
<style>
body{background:#000}
#plr{position:relative;background:#fff;width:360px}
#vd{width:100%;background:grey}
button{width:48px;height:48px;border:0;background:grey}
</style>
</head><body>
<div id="plr">
<video id="vd" src="video.mp4"></video>
<button onclick="(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()">fs</button>
<button onclick="plr.requestFullscreen();document.exitFullscreen()">fs2</button>
</div>
</body></html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open the video in fullscreen mode.</p>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<video width="100%" controls id="myvideo">
<source src="rain.mp4" type="video/mp4">
<source src="rain.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var elem = document.getElementById("myvideo");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
</body>
</html>
Source:https://www.w3schools.com/howto/howto_js_fullscreen.asp

Develop Reference

JavaScript is the programming language of the Web.

Issue with HMTL5 Desktop Notifications in Google Chrome - javascript

Related

Javascript disable chrome notifications

IOS10 fullscreen safari Javascript

Remove HTML5 notification permissions

Javascript Game Design - force screen to fullscreen - FAUX native App for touchscreens [duplicate]

Full screen window either jquery or javascript for all browser? [duplicate]

Categories

Resources