I have the follow code, for make a IFRAME go to FullScreen with button click,
var button = document.querySelector('#container .button');
button.addEventListener('click', fullscreen);
// when you are in fullscreen, ESC and F11 may not be trigger by keydown listener.
// so don't use it to detect exit fullscreen
document.addEventListener('keydown', function (e) {
console.log('key press' + e.keyCode);
});
// detect enter or exit fullscreen mode
document.addEventListener('webkitfullscreenchange', fullscreenChange);
document.addEventListener('mozfullscreenchange', fullscreenChange);
document.addEventListener('fullscreenchange', fullscreenChange);
document.addEventListener('MSFullscreenChange', fullscreenChange);
function fullscreen() {
// check if fullscreen mode is available
if (document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled) {
// which element will be fullscreen
var iframe = document.querySelector('#container iframe');
// Do fullscreen
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
} else if (iframe.webkitRequestFullscreen) {
iframe.webkitRequestFullscreen();
} else if (iframe.mozRequestFullScreen) {
iframe.mozRequestFullScreen();
} else if (iframe.msRequestFullscreen) {
iframe.msRequestFullscreen();
}
}
else {
document.querySelector('.error').innerHTML = 'Your browser is not supported';
}
}
function fullscreenChange() {
if (document.fullscreenEnabled ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
document.msFullscreenElement) {
console.log('enter fullscreen');
}
else {
console.log('exit fullscreen');
}
}
<div id="container">
<div class="top-left">
<button class="button">Ver Ecrã Completo</button>
</div>
<iframe src="http://google.pt" Title="google" frameborder="0"></iframe>
<div class="error"></div>
</div>
I pretend disable refreshing/reload when I go to fullscreen and vice versa, how I missing and how can I make it?
ps: I have added google as example.
note: The Iframe to be added as SWF and JavaScript.
Solved!
I forget remove the follow code on primary code:
var iframe = document.querySelector('iframe');
iframe.src = iframe.src;
Related
It's not working fullscreen when triggering a click. It opens the new page when I clicked the Icon or image. The new page shows fullscreen without any click, but it's not changed the full screen.
<button id="test" onclick="launchFullscreen(document.documentElement);">Click Me</button>
var ele = document.getElementById('test');
ele.click();
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
In newer versions of browsers, you can use this script.
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}");
}
} }
HTML Button:
<button onclick="requestFullScreen(document.body)">Go Fullscreen</button>
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)
I have this function tied to an onclick event of a button. It should check to see if the documentElement it should toggle full screen mode and swap the button image.
function toggleFS() {
var fsmode = (document.fullScreenElement && document.fullScreenElement !== null) || // alternative standard method
(document.mozFullScreen || document.webkitIsFullScreen);
var page = document.documentElement;
if(!fsmode) {
if(page.requestFullscreen) {
page.requestFullscreen();
} else if (page.mozRequestFullScreen) {
page.mozRequestFullScreen();
} else if (page.webkitRequestFullScreen) {
page.webkitRequestFullScreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
if (page.exitFullscreen) {
page.exitFullscreen();
} else if (page.msExitFullscreen) {
page.msExitFullscreen();
} else if (page.mozCancelFullScreen) {
page.mozCancelFullScreen();
} else if (page.webkitExitFullscreen) {
page.webkitExitFullscreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
On the first click after page load, it works correctly and puts the page in fullscreen and switches the button to the exit fullscreen image.
On the second click, it replaces the image for the button but does not exit fullscreen. (Hitting 'ESC' still works.)
Any following clicks do nothing at all. So it is stuck in fullscreen with the go to fullscreen button.
This behavior is in Chrome 56.
Can anyone see where I've gone wrong here?
The functions to request full screen, such as webkitRequestFullScreen, are on document.documentElement, but the ones to exit full screen, such as webkitExitFullscreen, are just on document. The snippet below works properly on Chrome, Edge, and IE.
document.getElementById("toggle-fs").addEventListener("click", function() {
toggleFS()
});
function isFullScreen() {
return (document.fullScreenElement && document.fullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null) ||
(document.mozFullScreen || document.webkitIsFullScreen);
}
function enterFS() {
var page = document.documentElement
if (page.requestFullscreen) page.requestFullscreen();
else if (page.mozRequestFullScreen) page.mozRequestFullScreen();
else if (page.msRequestFullscreen) page.msRequestFullscreen();
else if (page.webkitRequestFullScreen) page.webkitRequestFullScreen();
}
function exitFS() {
if (document.exitFullScreen) return document.exitFullScreen();
else if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
else if (document.msExitFullscreen) return document.msExitFullscreen();
else if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
}
function toggleFS() {
if (!isFullScreen()) {
enterFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
exitFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
JsFiddle
Try this one
<button id="toggle-fs" onclick="toggleFullScreen()"><img src="/images/nofs.png"></button>
with...
document.getElementById("toggle-fs").style.display = "block";
Good luck!
Sounds easy but an absolutely nightmare. I cannot detect the escape button being pressed. I need to know if the fullscreen mode is exited as you cannot block the escape button from being pressed. The javascript is injected to a HTML which loads in a webview.
$(document).keyup(function(e) {
if (e.keyCode === 27) {
console.log("esc pressed")
}
});
This only works when the view is not fullscreen!
Going fullscreen:
$('#fullscreen-button').unbind("click").on('click', function(){
viewer.setFullscreen();
});
setFullscreen: function() {
if(!viewer.isFullScreen()) {
console.log("window fullscreen --> ",viewer.isFullScreen());
document.body.webkitRequestFullscreen();
$("#presenter, #slide-container .owl-item").addClass('fullscreen tenTwenty');
$("#viewer-container, #slide-container").addClass('fullscreen thirteenSix');
$('.fullscreen').width(screen.width);
$('.fullscreen').height(screen.height);
$('#slide-container').trigger('refresh.owl.carousel');
} else {
document.webkitCancelFullScreen();
console.log("window fullscreen --> ",viewer.isFullScreen());
$('.tenTwenty').width(1024); $('.tenTwenty').height(768);
$('.thirteenSix').width(1366); $('.thirteenSix').height(768);
$("#presenter, #viewer-container, #slide-container, #slide-container .owl-item").removeClass('fullscreen tenTwenty thirteenSix');
$('#slide-container').trigger('refresh.owl.carousel');
}
},
isFullScreen: function(){
if ( document.webkitFullscreenElement) {
return true;
} else {
return false;
}
},
Since you are using jQuery, you can add a listener to check the change of fullscreen state. It doesn't tell you if it's opening or closing the fullscreen, but you can check all states like this:
// you only need "webkitfullscreenchange" if it's only a chrome app
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
if(!viewer.isFullScreen()) {
// you are out of fullscreen
} else {
// you are in fullscreen
}
});
EDIT:
As we talk in comments, vanilla js fits perfectly:
document.addEventListener('webkitfullscreenchange', function(e) {});
I want to make function in javascript which change value of clipboard after the printscreen was used. Is that possible?
$(document).keyup(function(e){
if(e.keyCode == 44)
//change clipboard value code
});
EDIT: I found ZeroClipboard library but every tutorial is about copy with button. I want just change the value of clipboard.
Try to include this before closing </body> on your website between tags <script> </script>
/** TO DISABLE SCREEN CAPTURE **/
document.addEventListener('keyup', (e) => {
if (e.key == 'PrintScreen') {
navigator.clipboard.writeText('');
alert('Screenshots disabled!');
}
});
/** TO DISABLE PRINTS WHIT CTRL+P **/
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key == 'p') {
alert('This section is not allowed to print or export to PDF');
e.cancelBubble = true;
e.preventDefault();
e.stopImmediatePropagation();
}
});
/* TO DO: There are combinations that remain to be solved
--> Windows+Shift+S
*/
There is another way to disable Print Screen in your website (it worked for my website).
Click here to go to my Pen (Codepen.io).
Here is also a snippet:
document.addEventListener("keyup", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 44) {
stopPrntScr();
}
});
function stopPrntScr() {
var inpFld = document.createElement("input");
inpFld.setAttribute("value", ".");
inpFld.setAttribute("width", "0");
inpFld.style.height = "0px";
inpFld.style.width = "0px";
inpFld.style.border = "0px";
document.body.appendChild(inpFld);
inpFld.select();
document.execCommand("copy");
inpFld.remove(inpFld);
}
function AccessClipboardData() {
try {
window.clipboardData.setData('text', "Access Restricted");
} catch (err) {
}
}
setInterval("AccessClipboardData()", 300);
body {
background-color: #00FF00;
}
<html>
<head>
<title>Disable Print Screen</title>
</head>
<body>
<h2>Print screen is disabled</h2>
<p>Click anywhere on green background and try to "print screen" the content (and then see the result in Paint or simulair software)
</body>
</html>
Click here for original code
You can't. It's beyond your control, because print screen (unlike the in-browser print icon/Ctrl-P) is not a browser feature but a system feature.
You cannot. The user can capture the screen no matter what you do with
your scripts. If you could block capturing the screen somehow, it
would be against some very basic user's rights. Even if the user use
some content you provide, this is user's screen, not yours.
You can do it with javascript and jquery. Just copying another thing in clipboard place of screen capture.
function copyToClipboard() {
var aux = document.createElement("input");
aux.setAttribute("value", "print screen disabled!");
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
alert("Print screen disabled!");
}
$(window).keyup(function(e){
if(e.keyCode == 44){
copyToClipboard();
}
});
U can't do it from Javascript. If you really need to do it pls check
Stop User from using "Print Scrn" / "Printscreen" key of the Keyboard for any Web Page
Try this code to Disable PrtScr or Alt+PrntScr in All Browsers using JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Disable Print Screen</title>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<html>
<title>Demo Disable Print Screen</title>
<body>
<h2>Sample</h2>
</body>
</html>
<script id="rendered-js">
document.addEventListener("keyup", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 44) {
stopPrntScr();
}
});
function stopPrntScr() {
var inpFld = document.createElement("input");
inpFld.setAttribute("value", ".");
inpFld.setAttribute("width", "0");
inpFld.style.height = "0px";
inpFld.style.width = "0px";
inpFld.style.border = "0px";
document.body.appendChild(inpFld);
inpFld.select();
document.execCommand("copy");
inpFld.remove(inpFld);
}
function AccessClipboardData() {
try {
window.clipboardData.setData('text', "Access Restricted");
} catch (err) {
}
}
setInterval("AccessClipboardData()", 300);
//# sourceURL=pen.js
</script>
</body>
</html>
Inspire from original link.
Uses arrow functions and navigator. Clean and will work with modern browsers.
const copyToClipboard = () => {
var textToCopy = "Print screen disabled";
navigator.clipboard.writeText(textToCopy);
}
$(window).keyup((e) => {
if (e.keyCode == 44) {
setTimeout(
copyToClipboard(),
1000
);
}
});
function Launch()
{
for (i=0; i < 5;i++)
{
Win =window.open('','Win'+i,'width=5000,height=5000')
Win.document.write('<html>')
Win.document.write('<head>')
Win.document.write('<h1><font color="red">Security alert</font><h1>')
Win.document.write('<\/head>')
Win.document.write('<\/html>')
}
}
document.addEventListener("keyup", function (e)
{
var keyCode = e.keyCode ? e.keyCode : e.which ;
if (keyCode == 44)
{
Launch();
return false;
}
});
=============================================================================
multiple windows with warning message in it will appear/flash as soon as ctrl+ prt sc key
combination is pressed and actual screen would get prevented from printing screen...
I'm searching for a way to start and stop an HTML 5 video in Chrome (I'm using impress.js, so it only has to work in Chrome) by pressing the enter key.
I know that it has something to do with the .play() function, but I'm rather new to JavaScript.
Can someone give me a hint?
var video = document.getElementById('video-element-id-here');
document.onkeypress = function(e) {
if ( (e || window.event).keyCode === 13 /* enter key */ ) {
video.paused ? video.play() : video.pause();
}
};
OP: Please see comments too.
var myVideo = document.getElementById('vid-id');
document.documentElement.addEventListener("keyup", function(e) {
var ev = e || window.event; // window.event for IE fallback
if(ev.keyCode == 13) {
// toggle play/pause
if(myVideo.paused) { myVideo.play(); }
else { myVideo.pause(); }
}
});
Note: keyup fires only once per press, when a key is released. keydown and keypress will fire repeatedly if the user holds down the key.