Windows navigation and pop-ups with JavaScript BOM

Navigation from one web page to another can happen through pop-ups generated by JavaScript.

Pop-ups are techniques that allow displaying zoom-in of an image or open a new browser with more information when a web page loads or user clicks a button …etc. Pop-ups actually show additional document to users. Popups are simple to add to sites and can have separate window and their own environment. There are several ways of adding a pop-up to a web page. The BOM method to add pop-up is discussed below:

window.open() – This method opens a new browser window on JavaScript events such as onload(), onclick()…etc.

Syntax

window.open(URL, name, specs, replace);

where:

URL – Specifies the URL of the page to be opened. If it is not specified blank window is opened.
name – Specifies target attribute or name of the window. Naming a window helps in manipulating it later in script. It is an optional parameter. It can have following values:
- _blank - is assigned to ‘name’ to open URL in new window. This is default value.
- _parent - is assigned to ‘name’ to open URL into parent frame.
- _self - is assigned to ‘name’ to replace current page.
- _top - is assigned to ‘name’ to replace framesets that may be loaded.
specs – Specification of the pop-up can be added here. All parameters given below are optional. It includes:
- channelmode - If it is set, it displays window in theater mode. Default is false.
- fullscreen - If it is set browsers are displayed in full screen mode. Default is false.
- height - Height of the popup window in pixels. Minimum is 100.
- left - Left position of window in pixels. (Negative values not allowed)
- location - If it is set, address field is displayed. It is used in opera browsers only.
- menubar - If it is set, menu bar is displayed.
- resizeable - If it is set, windows are resizeable. It is used in IE browsers only.
- scrollbars - If it is set, it displays scrollbars. It works for IE, firefox, opera browsers.
- status - If it is set status bar is added.
- titlebar - If it is set title bar is displayed.
- toolbar - If it is set browser toolbar is displayed. Used in IE and firefox browsers.
- top - The top position of window iset in pixels. Negative values are not allowed.
- width - Width of the window in pixels, with minimum value of 100.
replace – This is optional parameter which replaces current document in history list when set to true. It creates new entry in history list when set to false.

Example with windows.object method in JavaScript

<!DOCTYPE html>
<html>

<head>
<script>		
	function popFunc(){
		smallWin = window.open("", 'popWin', "resizable=yes, left=200, top=300, width=200, height=200");
		smallWin.document.write('<html><head><title>JS popup</title>');
		smallWin.document.write('</head><body><p>Using multiple popups in a webpage is nuisance to user</p>');
		smallWin.document.write('<p><a href="javascript:self.close()">close</a></p></body></html>');
	}
</script>
</head>

<body onload = "popFunc()">
    <p>Pop-ups are techniques which displays zoom-in of an image or open a new browser with more information when window onload(), onclick() &hellip;etc action occurs. Pop-ups show additional document to users. Popups are simple to add to sites and can have separate window and own environment. </p>
</body>

</html>

Popup Block and Security

Over-using of this method generating continuous pop-ups in a web-page may end up with an unpleasant experience to the user. Pop-ups are also one of the phishing techniques where users are convinced that an important message is delivered and are made to click a malware URL. Pop-ups are also a way to display ad which may not be essentially linked to the main site.

Hence modern browsers have option to block the automatically popping up windows. There are pop-up blocking software which can be installed in computers. When a new window or a tab is not requested by the user i.e. events such as onclick, onkeypress …etc, are not triggered, these popup blockers prevents the file from being opened. If a pop-up is blocked the window.open() function returns null. It can be assigned to a variable and checked if the pop-up is blocked or not and an alert can be given to user.

Example of a blocked pop-up window with JavaScript

In the example below, the return value can be checked for null and user can be alerted if there is a popup block:

var block=false; try{ smallWin = window.open("", 'popWin', "resizable=yes, left=200, top=300, width=200, height=200"); if(smallWin == null){ block =true; } }catch(ex){ block = true; } if(block){ alert(“A popup is blocked”); }

Pop-ups are effective when they are results of a user actions. Below example shows an effective use of a pop-up.

Example of an effective use of a pop-up with JavaScript

<!DOCTYPE html>
<html>

<body>

    <img onmouseover="bigDress(this)" onmouseout="normalDress(this)" src="../../../img/tutorials/js_bom_popup_dress.png" alt="dress" width="40" height="40">
    <p> Move the mouse over the image to get enhanced vision</p>
    <script>
        function bigDress(x){
            x.style.height = "200px";
            x.style.width = "200px";
        }
    
        function normalDress(x){
            x.style.height = "64px";
            x.style.width = "64px";
        }
    </script>
    
</body>

</html>

›› go to examples ››

Windows navigation and pop-ups with JavaScript BOM

Syntax

Example with windows.object method in JavaScript

Popup Block and Security

Example of a blocked pop-up window with JavaScript

Example of an effective use of a pop-up with JavaScript

Comments

About

Contact

Get Connected