Using IE11, if I enter fullscreen mode from the button on the toolbar, then leave full screen mode by pressing F11, the viewer continues to fill the browser window until you press the leave fullscreen button.
I am looking to implement a custom UI, which doesn't have a leave fullscreen button, so want to fix the MSFullscreen event handler.
I think the problem is that when leaving full screen mode, ScreenModeDelegate.prototype.fullscreenEventListener() calls inFullscreen() which returns true.
if ("webkitIsFullScreen" in document) return document.webkitIsFullScreen;
return !!(document.mozFullScreenElement ||
document.msFullscreenElement ||
document.fullscreenElement ||
document.querySelector(".viewer-fill-browser")); // Fallback for iPad
IE11, so no webkitIsFullScreen. msFullscreenElement is null, but the document.querySelector fallback for iPad is true, because .viewer-fill-browser hasn't been removed yet. '.viewer-fill-browser' then isn't removed, we appear to still be in full screen mode.
On Chrome it just returns webkitIsFullScreen, which is false.
Is there a workaround for IE11?
As a workaround it should be possible to patch the default implementation with a fixed version (code below is not tested, it might contain errors)
<script src="path/to/viewer3D.min.js?v=2.12"></script>
<script type="text/javascript">
Autodesk.Viewing.inFullscreen = function() {
if ("fullscreenElement" in document) return document.fullscreenElement;
if ("webkitIsFullScreen" in document) return document.webkitIsFullScreen;
if ("mozFullScreenElement " in document) return document.mozFullScreenElement;
if ("msFullscreenElement" in document) return document.msFullscreenElement;
return !!(document.querySelector(".viewer-fill-browser")); // Fallback for iPad
}
</script>
<script type="text/javascript">
// your code
</script>
I guess you could use a tool for the viewer which doesn't require patching the viewer3D.js source yourself.
In the handleKeyDown handler you check for F11 being pressed and remove the .viewer-fill-browser selector from the DOM ...
this.handleKeyDown = function(event, keyCode) {
console.log('-------------------');
console.log('Tool:handleKeyDown(event, keyCode)');
console.log(event);
console.log(keyCode);
return false;
};
Hope that helps
FYI, this issue is fixed in v2.15.
Related
I am programming web page with Google map on it and some markers (points). Markers have some InfoWindows, in InfoWindow is a link to a <div> tag on the same page. Something like
var infowindow = new google.maps.InfoWindow({
content: 'See info'
});
In this way, the user can display InfoWindow on the map, and then the user can display additional information below on the web page.
It works fine. BUT if the map is in FullScreen mode, the link does not work.
If user clicks on the link in the full screen mode, I would like to
Exit full screen mode, and
Scroll to the anchored <div
id="info">
Can somebody help?
I have tested, that if the link goes to another web page, then it works fine even in the FullScreen mode. The problem is only in linking the same page (via #id).
I tweaked my original solution:
I muset set onClick listener to link ant this listener has to handle the two steps: 1) exit full screen mode and 2) scroll to given tag
Exiting full screen mode is done by i) Checking if document is in full screen mode and if yes, then ii) Exit full screen mode.
This must be done for different webkits
function onClickListener(id) {
// Exit Full Screen Mode
if (document.fullscreenElement ) {
document.exitFullscreen();
} else if (document.mozFullScreenElement ) {
document.mozCancelFullScreen();
} else if (document.webkitFullscreenElement ) {
document.webkitExitFullscreen();
} else if (document.msFullscreenElement ) {
document.msExitFullscreen();
}
// Scroll to #id - using jQuery
$('html,body').animate({scrollTop:$('#'+id).offset().top}, 700);
return false;
}
I created a JSFiddle to showcase the behavior. I've observed IE11/Edge behaves one way and Chrome and Firefox behave another way and I'm not sure which one is of the two cases is a bug or design flaw.
https://jsfiddle.net/vuprp9k9/
HTML:
<div id="output">placeholder</div>
<button id="addEvtPopup">Add Event to Pop-up Window</button>
<button id="removeEvtPopup">Remove Event from Pop-up Window</button>
<button id="popupBtn">Open Pop-up Window</button>
JavaScript:
var output = document.getElementById("output");
var addEvtPopupBtn = document.getElementById("addEvtPopup");
var removeEvtPopupBtn = document.getElementById("removeEvtPopup");
var popupBtn = document.getElementById("popupBtn");
var popupWin = null;
function myHandler(evt) {
output.innerHTML = output.myParam;
}
popupBtn.onclick = function() {
// Observe the variable referencing the pop-up Window
popupWin = window.open("", "myPopupWin", "width=100px, height=100px, top=500px, left=-1000px");
};
addEvtPopupBtn.onclick = function() {
popupWin.addEventListener("unload", myHandler, false);
output.innerHTML = "Pop-up Event added";
output.myParam = "Pop-up Event unloaded";
popupBtn.eventEnabled = true;
};
removeEvtPopupBtn.onclick = function() {
// Chrome and Firefox: With pop-up closed, popupWin still has reference to closed pop-up window
// IE11 and Edge: With pop-up closed, popupWin has no reference to closed pop-up window
// As a result, the next line will error out in the latter browsers but not in the former browsers
// In both cases, typeof popupWin evaluates to "object"
popupWin.removeEventListener("unload", myHandler, false);
output.innerHTML = "Pop-up Event removed";
popupBtn.eventEnabled = false;
};
What's happening here is I open a pop-up window and add an event listener to it. I close the pop-up window and then I remove its event listener.
In Chrome and Firefox, popupWin.removeEventListener("unload", myHandler, false); proceeds as normal because even though the pop-up window is closed, popupWin still is referencing the pop-up window. With IE11 and Edge, the line throws an error because popupWin is not referencing the pop-up window.
Please understand I'm not looking for an answer of "don't do it that way, do it this way." I'm trying to understand why Chrome and Firefox still contain a reference to the pop-up window, after it has been closed, while IE11/Edge loses the reference. Which of the two cases are handling the reference to the pop-up window correctly?
Update
FYI: The above was tested in a Windows 10 VM with Microsoft Edge version 12.10240. The VM was provided by Microsoft, via their Dev Center.
https://dev.windows.com/en-us/microsoft-edge/tools/vms/windows/
As such, at least on my end, I have not confirmed that other versions of Edge, i.e. 12.x and 13.x, exhibit this issue of losing the reference.
As a member of the Edge team at Microsoft, this is just a bug on us. I have created an issue internally, and at some point in the (hopefully) not too distant future it will be fixed
Add the 3rd param may helps.
.addEventListener("unload", myHandler, true);
It works on IE11 in my project.
e.g.
window.addEventListener('scroll', function (){ console.log(152) }, true);
I'm researching and using html5 full-screen API with FireFox, I have a local html file, name 'SamplePlayer.html'. If I launched this file and clicked 'Full' button to make one element in to fullscreen mode like:
function launchFullScreen (element) {
if (typeof(element) == "undefined")
element = document.documentElement;
if (element.requestFullScreen) {
element.requestFullScreen();
}
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
return true;
}
FireFox shows a dialog(maybe something else)'Press ESC to exit fullscreen, allow fullscreen, allow, reject', my question is , How can I detect user click 'allow' button and this dialog disappear? not merely element come into full mode and the dialog still exist.
I' ve test with:
document.addEventListener('webkitfullscreenchange', adjustElement, false);
document.addEventListener('mozfullscreenchange', adjustElement, false);
document.addEventListener('fullscreenchange', adjustElement, false);
function adjustElement() {
//alert("change");
//var tmp = fullscreenElement();
var tmp = fullscreen();
alert(tmp);
}
function fullscreenElement() {
return document.fullscreenElement ||
document.webkitCurrentFullScreenElement ||
document.mozFullScreenElement ||
null;
}
function fullscreen() {
return document.fullscreen ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
false;
}
But while user request fullscreen, whether user clicked 'allow' button or not, all those function return true, how can I detect whether user clicked 'allow' button and allow full-screen mode with FireFox?
You cannot detect if the "Allow" button was clicked, and you're not supposed to detect it or be able to detect it either. It is a user decision and implementation detail.
Should there be some "hack" to detect it, it would be an implementation detail that is subject to change at any time, and there is a good chance it will change simply to close this information leak.
What you are able to detect and supposed to work with is entering/existing full screen mode state changes, via the mozfullscreenchange event. See the Using fullscreen mode documentation.
could someone please tell me how to turn on fullscreen mode when using video tag? I am using following typescript:
var vid = <HTMLVideoElement> document.getElementById('video1');
I would like to play video in fullscreen in window.onload event.
It seems typescript does not support requestFullscreen, or other "webkitFullscreen" mode. I search other questions on stackflow, and they seem bit outdated.
You can add those to the interface:
// Add the missing definitions:
interface HTMLVideoElement{
requestFullscreen();
webkitRequestFullscreen();
}
// now the following should work
var vid = <HTMLVideoElement> document.getElementById('video1');
if (vid.requestFullscreen){
vid.requestFullscreen();
}else if (vid.webkitRequestFullscreen){
vid.webkitRequestFullscreen();
}
I tried this but does not work.
I am looking to play fullscreen video from window.onload event. If I add a button on the page and add hook up the code you mentioned, then it works. code Click Me To Go Fullscreen!
Also, IE10 does not seem to support any of these modes. Is that expected?
Opening a video in full screen requires a synchronous user interaction, i.e. the user must click on a button, and only then the click handler can request full screen mode.
Please try this then
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
For documentation Document
We are using window.location.href to navigate the user to a page.
Also, we have configured the window.onbeforeunload event to alert users in case there are any unsaved changes.
window.onbeforeunload = confirmBeforeClose;
function confirmBeforeClose() {
if (jwd.global.inEditMode)
return "Your changes will not be saved :) and you will be punished to death";
}
In places where there are unsaved changes, and I try to use window.location.href to navigate the user, I get the alert message.
It works fine if I click OK on the popup. However, if I click CANCEL, the JS throws an unspecified error at window.location.href.
Any help is appreciated.
I was also experiencing this issue (in IE7 and above, not in IE6 however).
The only solution that I could find was wrapping the window.location.href call in a try/catch block.
The below is a complete example that reproduces the problem. If you uncomment out the try/catch then it works as desired in all browsers.
JavaScript (in HTML head):
window.onbeforeunload = confirmBeforeClose;
function confirmBeforeClose( )
{
return 'You have made changes on this page that will be lost if you navigate away without saving.';
}
function leavePage( )
{
// try {
window.location.href = "http://www.example.com";
// } catch( e ) { }
}
HTML:
<body>
Leave this page
</body>