Java Script - handling multiple browser windows - onfocus

 

Very often when we are developing web applications there is a requirement to open additional Windows, typically named as popups or dialogbox. Many modern frontend libraries provides mechanisms to implement this kind of requirement using a combination of CSS and HTML components to create a graphical effect to provide a user experience similar to a new window.

But actually the native JS programming contains mechanisms to open additional browser Windows, and to keep to keep the control of the opened Windows.

This is the goal of this tutorial, to demonstrate how to open new windows and keep the track of these objects, aiming to implement a few typical requirements regarding the user interface.

First, to open a new window, we basically have use the method window.open. This method will open a new window: however, modern web browsers typically opens this window as a new tab, so if you want to have that opened in a popup/dialog box effect you should use the additional method parameters: first informing it has to be opened in a “_blank” target, and also specify its height and width properties. The method has a return value, which is a reference to the opened window. You can see an example of the open method in the block of code below.

        let newWindow =  null;
        function openNewWindowSingleInstance(){
            //.closed: a boolean attribute the informs if the window was closed or not
            if(newWindow !== null && !newWindow.closed){
                //.focus(): if the window is minimized, it becomes visible again
                newWindow.focus();
            }else{
                // the .open method returns a reference to the opened window
                newWindow = window.open(URL,"_blank","width=500,height=750");
            }
        }

 

In this example once the window was opened the variable newWindow keep the tracking of this object. The we can access its attributes, such as “closed” which is a boolean attribute which indicates the window still opened of already has been closed. This attribute is important, because somethings there is a functional requirement to keep just one instance of a window opened. In a certain way, it is like the Singleton design patter which aims to ensure that a certain class will just have an object instance of that.

Beyond the close attribute this example make usage of the .focus() method, which will make the referenced window visible to user, independently if it was minimized. It is important when you want to make visible an already existing window object, instead of create new ones.

 

You can download the how source code of this example here:

 https://github.com/rafaelqg/code/blob/main/multiple_windows_onfocus.html

You may watch a video class demonstrating how this code works in a live example:



Comments

Post a Comment

Popular posts from this blog

HASHLIB: Using HASH functions MD5 and SHA256

Image
  The usage of hash functions in python is quite simple. Basically we can use the native library hashlib, which give us the possibly to create message digest based on several algorithms, such as MD5 or SHA256. Using this library we may create a hash of some content and then retrieve its binary output or transform that in hexadecimal strings to easy the data transfer in different medias. The library can be imported with the following instruction: import hashlib   If you want to encode strings, it is necessary to encode that with UTF-8, and it can be done using the encode method of a string object: myPassword= "python3.x" myPasswordEncoded=myPassword.encode( 'utf-8' )       The n, the hashlib module has a md5 function which receives as parameter the the we would like to generate the hash. And then return the hash object. hashObject=hashlib.md5(myPasswordEncoded)   The hashObject already contains the ...
Read more

Spread Operator

Image
  The spread operator can be utilized both on arrays and objects. For arrays it will transform the array in a plain list of objects/variables, which can be utilized as input to functions that accept a list of arguments (example: array.push(el1, el2, el3). In This example if we have one array named array01 with options [1,2,3] and we want to add these values to another array, named array02, then we can do array02.push(…array01). Performing that, using the spread operator (…) actually the array02 will have a copy of all elements that are inside array01. Without using the spread operator , for example, array02.push(array01), the array02 will contains one single object that is the array01 itself, and only inside array01 that the values will be found. Another applicability for spread operator is for objects itself. When we want to have a new object with contains a copy of all attributes an existing object already have, in addition to new attributes, we can use the spread operator. L...
Read more

Dart: implementing Object Oriented Programming (OOP)

Image
The object oriented programming provides several benefits for system design. It makes the code easier to maintain, easier to extends, and also implements several well-know design patterns. Using the Dart programing language classes can be simple defined utilizing the class keyword, followed by the class name, and then delimitated the class body with the key brackets {}, like in the example below, presenting one class with two methods. class ProgrammingLanguage {   void compile (){     print( "Compiling..." );   }   void execute (){     print ( "Executing..." );   } } When we need to add new features to this class, it is possible to use the inherence concept, defining a new class that will receive all implementation this ProgrammingLanguage class already has done. And this inherence is done using the extends keywork, like in the example below, which the Dart class has the compile() and the execute() methos from its superclass...
Read more