Saturday 14 January 2012

Open a new browser window using javascript

Hi friends,
   Here I am discuss about open a new browser window when click a button
using javascript
.Have you see pop up windows containing advertisements?
We can create like one very easily.
  
   The javascript function used for pop up a new window is window.open().
The syntax for window.open is :
window.open('http://www.google.com','window_name','width=400,height=200');

   In this function first parameter is the URL of the website to be loaded
in the poped up window opened.Here I am use the address of  Google.com.

   The second parameter of open() function is the name of the window.We
can use this name to access the window later.

   The third parameter is using to set the dimensions of the window which is poped up.

Code of a simple form pop up the Google in a new window:

<FORM>
<INPUT type="button" value="Click Me" onClick="window.open('http://www.google.com','Google','height=600,width=600')">
</FORM>



  Here the window.open() function is called in the onclick event of the button in the form.When click in the button , a pop up window with 600 pixel height and 600 pixel width is opened and google.com will load in it in no time.

  In the third parameter we can include more options like the position of the window.We can use the top and left parameters to set the top and left of the window.

<FORM>
<INPUT type="button" value="Click Me" onClick="window.open('http://www.google.com','Google','height=600,width=600,left=0,top=100')">
</FORM>


This code will open a window with 600 pixels height and width and the top left of the window will be (0,100).
But one thing to be noted is that all these are belongs to the third parameter so these are within a single inverter comma('').


We can also specify that which tool bars will appear in our new window just like this
window.open ("http://www.javascript-coder.com", "mywindow","status=yes,toolbar=no");
By this code I am allowing the status bar and disallow toolbar.

  The other values set in the third parameter is as follows :


status     :     The status bar at the bottom of the window.
toolbar    :     The standard browser toolbar, with buttons such as Back and Forward.
location   :     The Location entry field where you enter the URL.
menubar    :    The menu bar of the window
directories:     The standard browser directory buttons, such as What’s New and What’s Cool
resizable  :    Allow/Disallow the user to resize the window.
scrollbars :    Enable the scrollbars if the document is bigger than the window


   windows.close() can be used to close the opened window.
Another thing to be noted is that many browsers block the opening of pop up windows.So inorder to work  the code above explained please unblock the pop up windows in your browser's settings.

I am including a screen shot :


















Thank you to my dear friends.
You can read :-

Facebook like pop up window using jquery


By Sukesh B R

No comments:

Post a Comment

Search This Blog