Home arrow HTML arrow Page 4 - Uses of the New Window Command for Web Sites
HTML

Uses of the New Window Command for Web Sites


This article talks about opening new windows on a web page. There are a number of reasons why we might want to do this. So let's think about why we need to open a link in a new window.

Author Info:
By: Stephen Davies
Rating: 4 stars4 stars4 stars4 stars4 stars / 2
February 26, 2008
TABLE OF CONTENTS:
  1. · Uses of the New Window Command for Web Sites
  2. · Approaches to opening a link in a new window
  3. · BASE tag
  4. · Examples of common new window uses
  5. · Advanced Usage

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Uses of the New Window Command for Web Sites - Examples of common new window uses
(Page 4 of 5 )

Take a look at the code below for the file test.html:


test.html


<html>

<head>

<title>Uses of the New Window command demonstration</title>

<script type="text/javascript">

function testOpen() {

window.open('http://www.amazon.com/','_blank');

}

</script>

</head>

<body>

<h1>window.open() demo</h1>

<a href="#" onclick="testOpen();">go to Amazon</a>

</body>

</html>


Picture 4: window.open() demonstration 1


Look at the screenshot. When you click the link, a new common window is opened.

As you saw in the <a href="#" onclick="testOpen();">go to Amazon</a> link, we did not specify the target URL in the href attribute, but added an onclick attribute. A literal JavaScript string is declared as the event handler. When the user clicks the link, the CLICK event is fired and the content in the onclick attribute will be evaluated, so the testOpen() function is invoked. In the testOpen() function, it uses the window.open() to open http://www.amazon.com/ in a new blank window.

b) Open a customized window

You can add some feature options using the open() method.


window.open('http://www.amazon.com', '_blank', 'width=200, height=200,
menubar=no, toolbar=no, location=no, scrollbars=no, status=no, resizable=no');


Picture 5: window.open() demonstration with customized new window

When you click the link, a new 200*200 window will be opened without the menu bar, toolbar, location, scrollbars, and status bar. And the window size is unchangeable. It sounds cool, right? Try it.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials