 |
Opening a New Browser Window in JavaScript
|
by: Amrit
Hallan
Sometimes you don't want the visitor to leave your current page. So when a link it clicked, instead of a new page loading on the same window, you can have the page in a new browser window. All you have to do is:
<a href="#" onClick=window.open("TheLink")>New Window</a>
This opens the link in a new browser window.
But this is a very simplistic approach, and the function window.open() has many parameters that can control the over-all appearance of your click-generated window to the world.
For example, you can have:
<a href="javascript:void(0);" onclick="window.open('TheLink', 'window name', 'location, menubar, height, width, status, resizable, scrollbar ')>Open Your Window To The World</a>
Note: you can use "javascript:void(0);" when you want nothing to happen for the href attribute of <a> tag.
Let us give proper regard to all the parameters one by one:
TheLink
Please don't take TheLink to be some keyword. In its place, you have to supply the actual link to the file you want to open in the new window, for instance, http://www.bytesworth.com.
Window Name
If you plan to use this window in one of your JavaScripts, you'll need to refer to it. So this name acts as a pointer. You often don't need the name.
Location
Location is the place in the browser window where you type the URL of a site you want to go to. If you have location=no, then the new window does not have the location bar.
Menubar
You can get rid of the menu bar by mentioning menubar=no.
Height, width
Self-explanatory. You can specify the height and width of the window to wrap around a specific text or image.
Status
the parameter - status - has nothing to do with some sort of status symbol of society. It's the bar you see at the bottom of every programs window. In your browser, the status bar often shows how many images are being loaded, or the page is being opened, or you are on a secure server (the lock), etc. If you don't want to the status bar to be visible in your new browser window, set status=no.
Resizable
The new browser window has a fixed size if you set resizable=no, and the user can manipulate the size if resizable=yes.
Scrollbar
You can make the scrollbar (the horizontal bar on the right side of your screen that has a square or a rectangular apparatus to help you move the page up and down with you mouse or some other pointing device) disappear by scrollbar=no.
So finally we can have a window like this:
<a href="javascript:void(0);" onclick="window.open('world.asp', 'location=no, menubar=no, scrollbar=no, status=no, resizable=no, height=150, width=200')>Your Window To The World</a>
Click the link below for a Demo:
Your Window To The World
About the Author
Amrit Hallan is a freelance web designer. For all web site development and web promotion needs, you can get in touch with him at amrit@bytesworth.com
. For further details, visit http://www.bytesworth.com You
can subscribe to his newsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricks
by sending a blank email at bytesworth-subscribe@topica.com.
Related Links
 Oracle Magazine contains technology strategy articles, sample code, tips, Oracle and partner news, how to articles for developers and DBAs, and more. Oracle (NASDAQ: ORCL) is the world's largest enterprise software company.
Subscribe Free! |
|
