Detect browser window "Maximized" / "Minimized "with JavaScript
When the user clicks the "Maximized"/"Restore" or "Minimized" buttons of the browser window, is there a way to keep track of these events with JavaScript? Are there any appropriate event or property to use?
I want that when th开发者_如何转开发e user clicks the "Maximized" button at the top-right of the window, the webpage should stretch to a specific width and when the browser is in the resizable mode, the webpage is resizable.
Please can someone help me in this? I don't mind either JavaScript or jQuery.
Thanks in advance.
It sounds like what you want is a layout that resizes when the browser is resized but only up to a maximum width.
If that's the case you can either do it in CSS or in JavaScript.
Imagining that your content is in an element like:
<div class="container"> -content here- </div>
My preferred option would be to use CSS as follows:
.container{
max-width: 1200px;
width: 100%;
}
If you need to support IE6 (which doesn't support max-width) you can try using an expression in the IE6 CSS:
.container{
width:expression(document.body.clientWidth > 1200 ? "1200px" : "100%" ); /*IE6*/
}
If you want to use JavaScript: you could just resize your elements in the window's resize event:
$(window).bind('resize', function() {
// resize $('.container').width() based on $(window).width()
});
You could initially trigger that logic using
$(window).trigger('resize');
As far as I know, there isn't a sure fire way to detect if a browser window is minimized, but if you want to detect for the maximized state, try:
function CheckWindow() {
var A = screen.availWidth;
var AA = window.outerWidth;
var B = screen.availHeight;
var BB = window.outerHeight;
if (A == AA && B == BB) {
// Window is maximized
}
else {
// Window is not maximized or in full screen
}
}<body onresize = "CheckWindow();" onload = "CheckWindow();">This takes into consideration the browser toolbar, and works for me in Chrome and Edge on my PC. I have not tried it in the other browsers or on mobile devices. Hope it helps.
Nowadays, it is relatively easy to do in modern browsers such as Edge, Chrome and Opera. IE and Firefox need more cumbersome workarounds. FF also can't show minimized state.
Feel free to check it in your browser via snippet below. Compatibility is limited by its support of window.outerWidth and window.screenX functions (IE9+, Opera 12, Chrome 1), earlier browsers still can handle it, but it takes major work giving minor usability.
The check is intentionally performed in timed-out onCheck() function, 3 seconds after the button is clicked. This allows you to click the button, minimize browser, and then restore it to see the result. This works at any zoom level. Note that in fullscreen mode it shows normal state. If your device/OS supports split screen (Windows 7+ etc), we can check it as well (little bonus). Please kindly test it in your browser, and leave some comments below.
function onCheck() {
if (isMaximized()) window.alert('MAXIMIZED');
else if (isMinimized()) window.alert('MINIMIZED');
else if (isSplitScreen()) window.alert('SPLIT SCREEN');
else window.alert('NORMAL');
}
function isMaximized() {
return (window.screenX === 0) && (window.screenY === 0) &&
(window.outerWidth === window.screen.availWidth) &&
(window.outerHeight === window.screen.availHeight);
}
function isMinimized() {
return (window.screenX < -window.screen.availWidth) &&
(window.screenY < -window.screen.availHeight);
}
function isSplitScreen() {
return (window.screenY === 0) &&
((window.screenX === 0) || (window.screenX === window.outerWidth)) &&
(window.outerWidth === window.screen.availWidth / 2) &&
(window.outerHeight === window.screen.availHeight);
}<button onclick="window.setTimeout(onCheck,3000)">Check</button>
<p>Click the button and minimize, maximize or split (Win7+) the window.<br>
The result pops up in 3 seconds.</p>
加载中,请稍侯......
精彩评论