With this in mind, I started to look into exactly what's required to make a web application accessible on all web browsers. There's plenty of blog posts on just this issue but most of them deal with differences in layout engines. In this post, I want to talk about window management namely because different browsers handle this issue completely differently and it's caught me out.
window.focus()
If your application launches new windows, maybe to show a data entry screen then at some point, you're probably going to use window.focus() in order to bring the new window to the front.
In Internet Explorer, this isn't the problem. Take the following code as an example:
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function windowFocus(){
var wnd = window.open('','','width=200,height=100')
window.onfocus = function(){ wnd.focus(); };
}
//-->
</script>
</head>
<body>
<a href="javascript: windowFocus();">Launch Window</a>
</body>
</html>
The above code is pretty simple. When you click on the link, a new window should open. Should you try and navigate back to the original window then the new window should re-focus and be put back on top.This can be a handy function, if you absolutely need your user to respond to an event in the popup window, then you can force them too (or the user closes the window, which is responding in a way...).
The problem is this doesn't work in Chrome. And it's not a bug. It's by design. I should add it does work in Safari so it's not a WebKit issue. Essentially, Google argue that you, the developer, should not be able to play around with windows on the desktop. That's something that should only be performed by a user. Personally, I don't agree. To see the actual bug report, check here and here.
If anyone does find a way of getting this to work on Chrome, then it'd be great to hear from you. I unfortunately wasn't able to find a way.
window.open() and resizable
As it goes, the application that I'm working on does open new windows. These windows act as data entry screens and all of these windows are set to be a specific width and height. The reason for this is that we use absolute positioning on all the form controls in order to display them on screen. If we let the browser set the size of the window then it's more than likely that it'll set the size to something that'll either be too small, so scroll bars will be needed to see all of the controls, or, the window will be too large and there will be massive amounts of blank space shown. So, we set the width and height specifically to avoid these issues and then we disable the users ability to re-size the window.
To do this, when we call window.open, we use specific features that set up the window as describe, specifically we set the width, height and set the resizeable attribute to false. (See W3Schools for the window.open definition).
Here is a good example:
window.open('http://www.google.com','','resizable=0,width=200,height=100');
Again, in Internet Explorer, this all behaves exactly as you'd expect. However, in Chrome, Safari and Firefox, we have a different story. And again, it's not a bug, it's by design.
In Chrome, Safari and Firefox it's impossible to make a window non-resizeable. There's no way round this, it's just not possible. The argument is that by making a window non-resizeable, it's possible that the developer has some how messed up their screen layout, making it impossible for the user to see things that aren't on the screen. If you make the screen resizeable then you avoid this possible complication and if everything does render correctly then the user just doesn't have to resize the window and then it's no skin off off of anyone's nose. So, these browsers just ignore the resizable attribute.
I can see where the browser vendors are coming from, their argument does make sense, but, I also think it looks unprofessional if the content of a screen doesn't resize accordingly with a window resize. This then means this functionality needs to be built in to the application to maintain a professional looking user interface.
For more on this issue, check out Firefox's bug report on it found here: https://bugzilla.mozilla.org/show_bug.cgi?id=177838
Window Height
As I said before, this web application opens up windows of a specific width and height. This is achieved by using the width and height attributes of the window.open e.g.
window.open('http://www.google.com','','width=1000,height=700');
In Internet Explorer, the window opens at the specified width and height. In Chrome and Firefox, the same is true but in Safari, it's a different story. For some unknown reason, when the window opens, it opens with a height of 780px. Odd. No other browser behaves like this.
If you try to use window.resizeTo to fix the size, e.g.
window.resizeTo(1000, 700);
Once this is run, the window changes to a height of 620px. So it still doesn't behave as it should. This only seems to occur on Safari 5.1 (I haven't tested on any earlier versions). After a bit of research, I found that this is a bug, check here for more info: https://discussions.apple.com/thread/3341535?start=0&tstart=0
I find it absolutely amazing that a browser that is so recognized and so widely used suffers from such a simple bug. Again, annoyingly, there's nothing we can really do to solve this. In theory, you could loop over different parameters to window.resizeTo until the window is set to the height you require but it's far from an ideal solution. Hopefully, Apple will address this issue shortly and this problem will go away. But I wouldn't like to put money on it.
Anyway, those are a few of the experiences I've had with window management for web applications across differing web browsers. If I come across any more then I'll be sure to post them.
Enjoy.
