We Keep Coding

Disable Iframe Reload in FullScreen

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;

Enter and exit fullscreen in browser using javascript

I'm working with chrome and I want a simple task. exiting fullscreen using code, not F11 key press.
Here are some documentations about how to implement it:
https://www.w3schools.com/jsref/met_element_exitfullscreen.asp
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
None of the above methods work. And also lots of non-working answers on Stackoverflow. Please help I really need to solve this.
Here is CodePen.
Here is the code I'm trying:
const button = document.getElementById('exitId');
button.addEventListener("click", function(){
// Javascript Code To Exit Fullscreen Goes Here
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
});
<button id="exitId">Exit Fullscreen</button>

A simple function to toggle fullscreen in JavaScript. It work well on Firefox and Webkit browsers.
JavaScript Function
/**
* Toggle fullscreen function who work with webkit and firefox.
* #function toggleFullscreen
* #param {Object} event
*/
function toggleFullscreen(event) {
var element = document.body;
if (event instanceof HTMLElement) {
element = event;
}
var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;
element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function() {
return false;
};
document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function() {
return false;
};
isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}
<button onclick="toggleFullscreen();">Full Screen</button>

Note that in order to exit full screen using javascript - you have to also enter the fullscreen mode using javascript. If fullscreen was based on F11 - it will not be possible to exit it using javascript.
The reason is that when you enter fullscreen using javascript you actually moving specific part of your document into fullscreen (and not the entire application), while when you are in application-full screen mode - the entire application is in fullscreen.
If you are in fullscreen (application-wise) you still see other tabs. If you are in document/element fullscreen mode - there are no tabs/url/bookmarks bar etc.
Check the following code:
<div id="container">
<button id="toggle">Toggle Fullscreen</button>
</div>
====
button.addEventListener("click", function() {
if (document.fullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (container.requestFullscreen) {
container.requestFullscreen();
}
else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
}
else if (container.webkitRequestFullScreen) {
container.webkitRequestFullScreen();
}
else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
}
}
}
});
You can see a working solution here: https://jsfiddle.net/zpdwL8gt/4/
Checked on firefox & chrome # MacOS

How to remove press esc to exit full screen in firefox and chrome?

I used this JavaScript code to full screen the page:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="border:1px solid red;height:100px;width:100px;background-color:red;" onclick="requestFullScreen(document.body)"></div>
<div style="border:1px solid red;height:100px;width:100px;background-color:blue;" onclick="exitFullScreen(document.body)"></div>
<script>
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}");
}
}
}
</script>
<script>
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
</script>
</body>
</html>
but it show "press esc to exit full screen" in full screen mode.
How to remove "press esc to exit full screen" in firefox and chrome?

It's super easy in Firefox:
In the URL bar enter about:config
Agree to the security risks
Search for the entry browser.fullscreen.exit_on_escape
Double click on true to change it to false
You're done! Enjoy :-)

You can't. It's a security feature designed to not let malicious sites mislead or trap a user - it's not something you can remove.

ExitFullScreen not working + anyway to keyboard press on button click?

My Browser: Google Chrome Version 33.0.1750.154 m
Script:
function exitFullscreen() {
var element = document.documentElement;
if (element.mozCancelFullScreen) {
element.mozCancelFullScreen();
} else if (element.webkitExitFullScreen) {
element.webkitExitFullScreen();
} else if (elem.exitFullScreen) {
element.exitFullScreen();
} else if (elem.msExitFullScreen) {
element.msExitFullScreen();
}
}
HTML:
<div class="menubutton" style="width: 100px;" onclick="exitFullscreen();">
<span class="menubuttontext">EXIT FULLSCREEN</span>
</div>
but when I press that div in fullscren mode nothing happens, did I do a typo, wrote the code totally wrong or is it not possible?
Alternate Soultion? If that div button onclick can trigger a keyboard press escape key it can exit fullscreen too, or is this not possible?

There is a typo in (though it won't solve the issue)
} else if (elem.exitFullScreen) { // should be element
element.exitFullScreen();
} else if (elem.msExitFullScreen) {
element.msExitFullScreen();
}
But the exitFullscreen should be called on document object only
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
DEMO

HTML5 drag and drop not working on IE11

Got HTML5 native drag and drop applied, drop is no working with IE, working well with chrome and firefox.
the dragging appears to be working but drop isnt happaning on IE.
another small question - in IE i got a half transparent square around my draggable element, but its background is transparent(the image is done like that), and on chrome/firefox i dont have that square and the image look without any background while dragging.
this is the drop area:
<div id="4x2" class="dropArea" draggable="false" ondragenter="drag_enter(event); return false;" ondrop="drag_drop(event); return false;" ondragover="return false" ondragleave="drag_leave(event); return false;" data-droppable="true" onmouseover="return mouseOver(this); return false;" onclick="return movePlayer(this); return false;" onmouseout="return mouseOut(this); return false;">
</div>
this is the draggable element:
<div id="player1" draggable="true" ondragstart="drag_start(event); return false;" ondragend="drag_end(event); return false;" data-droppable="false" onclick="return selectPlayer(this); return false;" data-selectable="true"></div>
function drag_start(e)
{
e.dataTransfer.effectallowed = 'copy';
e.dataTransfer.dropEffect = 'copy';
e.dataTransfer.setData("text/plain", e.target.getAttribute('id'));
}
function drag_enter(e) {
if (e.target.getAttribute('data-droppable') == 'true') {
e.target.style.backgroundImage = "url(images/board_cell_background_highlight.png)";
}
function drag_leave(e) {
if (e.target.getAttribute('data-droppable') == 'true') {
e.target.style.backgroundImage = "url(images/board_cell_background.png)";
}
function drag_drop(e) {
var element = e.dataTransfer.getData("Text"); // the player
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
if (e.target.getAttribute('id') == "player1" || e.target.getAttribute('id') == "player2") {
alert("invalid Move");
return false;
}
e.target.style.backgroundImage = "url(images/board_cell_background.png)";
moveHandler(element, e.target.getAttribute('id'));
}
function drag_end(e) {
e.dataTransfer.effectallowed = 'copy';
alert("drop end")
}
}
}
I remove some code of printing stuff to make the code more shorter.

IE10/11 uses Text as the data string and it breaks if you use text/plain.
If you use Text, it breaks in Firefox.
I get around this by doing something like this in whatever drag and drop functions I need to write:
var setDataString = 'text/html';
// We need to change the setDataString type for IE since IE doesn't support setData and getData correctly.
this.changeDataStringForIe = (function() {
var userAgent = window.navigator.userAgent,
msie = userAgent.indexOf('MSIE '), //Detect IE
trident = userAgent.indexOf('Trident/'); //Detect IE 11
if (msie > 0 || trident > 0) {
setDataString = 'Text';
return true;
} else {
return false;
}
})();
I'd love to know of a solution that doesn't use userAgent sniffing.

You are setting data of type text/plain, but retrieving data of type Text. While some browsers might understand them to be one and the same, others may not. In this case, it seems Internet Explorer is being pedantic while Chrome and Firefox are being lax.
Personally, I'd suggest using Text. It might be old, but that's what would make it work fine, even as far back as IE5, if memory serves, given some small adjustments to the event handling.

If someone does not drag and drop in IE 8.1 W at 11 just in the Internet Options Security tab and remove the check mark box protected mode or run IE as administrator

The problem is the browser defaults to pan actions rather than touch actions...look at http://msdn.microsoft.com/en-us/library/ie/dn265022(v=vs.85).aspx for information on how to control default action in css.