Javascript Popup

javascript

How can we maximize a window?

top.window.resizeTo(screen.availWidth,screen.availHeight);

What is the difference between .parent and .opener?

.parent is used in a frames context where the code in the child frame need to access a variable or invoke a function that was defined in the parent / container frame or document. .opener is used when a pop-up is created via window.open. The code in the pop-up window can access a variable or invoke a function that is defined in the previous window by using the .opener property.

What is the syntax to open a popup window?

var popupWindow = window.open("URL", "popupWindowName" [, "popupWindowFeatures"])

The popupWindowFeatures parameter is optional. It is one string, consisting of a comma-separated list of assignment expression. If you omit this parameter, the popup window has all the toolbars and buttons. If you specify an empty string, the toolbars and buttons are not displayed.

Attribute Value Description
toolbar Boolean "Back", "Forward", and other buttons in the row
location Boolean The address bar
directories Boolean "What's New" and other buttons in the row
status Boolean Status bar at the bottom of the window
menubar Boolean Menu bar at top of window
scrollbars Boolean Displays scrollbars if document is larger than window
resizable Boolean Allow the user to resize the popup window
copyhistory Boolean Duplicate the Go menu history for the new popup window
width pixelCount The popup window outer width in pixels
height pixelCount The popup window outer height in pixels

Boolean values for true can be either yess, or 1. Boolean value for false can be either no or 0. If you omit any boolean attributes, they are treated as false.

How can we test to see if the popup window was created successfully?

The window.open method returns a reference to the popup window. To test to see if the popup was successfully created:

var popupWindow = window.open("","");
if (popupWindow != null) {
    popupWindow.document.write("<html><head><title>Popup Test</title></head><body>Some content</body></html>");
    popupWindow.document.close();
}

How can code in the old window manipulate the content or invoke functions in the new popup window?

In the old window, we have:

popupWindow = window.open("URL","popupWindowName","popupWindowFeatures");
if (popupWindow != null) {
    ...
}

function callFunctionInsidePopup() {
    popupWindow.functionName();
}

// After some time has passed, and the popup window is fully loaded
callFunctionInsidePopup();

How can code in the new popup window invoke a function in the old window?

Code inside the new popup window can invoke a function in the old window via the .opener property:

window.opener.functionName();

If we open a new popup window, how can the code in the old window be notified when the new popup window is fully loaded and rendered?

If we have control of the code that is to be loaded into the popup window, we can modify it to use the onload event:

<html>
    <head>
        <title>...</title>
        <script type="text/javascript">
            function notifyOpener() {
                window.opener.popupLoaded();
            }
        </script>
    </head>
    <body onload="notifyOpener();">
        ...
    </body>
</html>

How can we maximize a popup window?

use the screen.availWidth and screen.availHeight properties:

f_open_window_max = function(aURL, aWinName) {
   var wOpen;
   var sOptions;

   sOptions = 'titlebar=0, location=0, status=1, scrollbars=1,resizable=1, menubar=0';
   sOptions = sOptions + ',width=' + (screen.availWidth).toString();
   sOptions = sOptions + ',height=' + (screen.availHeight).toString();
   sOptions = sOptions + ',screenX=0,screenY=0,left=0,top=0';

   wOpen = window.open( '', aWinName, sOptions );
   wOpen.location = aURL;
   wOpen.focus();
   wOpen.moveTo( 0, 0 );
   wOpen.resizeTo(screen.availWidth,screen.availHeight);
   return wOpen;
}

How can we position a popup?

Use the moveTo method.

How can we move the window?

top.moveTo(0,0);

How can we resize the window?

top.resizeTo(screen.availWidth, screen.availHeight);
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License