2 second HTML help Please

Can someone tell me how to make a link popup in a new window using HTML

Thanks

 

If you use Dreamweaver, it has a "behavior" called "Open Browser Window". It is javascript that allows you define the window size, navigation button, re-sizeable or not, etc.

 

If you want to use valid html 4.01 or xhtml 1.0,

<p><a href="some.html"
      onclick="return !window.open(this.href);"> click me</a></p>

Code (markup):

The target attribute is no longer a part of html. If you choose to use it, you should use a transitional/loose DTD, which is saying, "if it ever was valid, I'm using it, even if it's not valid now."

cheers,

gary

 

<a href="" title="" target="_blank">Link</a>

This is how I form my hyperlinks that pop up in new windows, to those of you who use different methods - this is just my own style, please do not holler at me.. I haven't hollered at you

 

exactly how these guys already said good answers.. best luck

 

The TARGET attribute is part of the HTML 4.01 specification as of
December 24, 1999. This attribute was intended to be used in
connection with frames, and the value "_blank" causes the target page
to be opened in a new browser window.

 

I re-iterate, it is not a part of html 4.01 strict. You must use the html 4 loose DTD. It's use is for indicating the 'target' frame. Its use to open a new window is deprecated.

See http://www.w3.org/TR/html4/present/frames.html#adef-target

The method I demonstrated above is fully valid html4.01 or xhtml1.0 strict, and is considered best practice.

cheers,

gary

 

gary (kk5st) is definitely right on this one. The TARGET attribute is NOT part of HTML 4.01 Strict or XHTML 1.0 Strict. See proof.

However, as gary said you can still use it with HTML 4.01 Transitional or XHTML 1.0 Transitional...

HTML 4.01 Transitional

or ...

XHTML 1.0 Transitional

If you do decide to use the TARGET attribute here all the different possible values that it could be...

_blank
Opens the link in a new, unnamed window.
_self
Opens the link in the same frame as the link.
_parent
Opens the link in the parent of the frame its currently in.
_top
Opens the link in the topmost window (canceling all other frames).

There's also something else you can do.

If you're using a Transitional doctype and you want all of the links on a page to open up in a new window you can put this after your <title></title> tag...

And of course, replace xyz.com with your own site. By putting the TARGET attribute in the BASE element it affects all of the links on your page.

Or if you're using a Strict doctype, you can do it via Javascript in one of two ways...

For single links, you can do as kk5st said above..

In this case, kk5st is using the window.open() function to open up a new window. He's passing the window.open() function this.href. You may be wondering, what is this.href? Well, this is a special value used to refer to the current element (in this case, the <a> element) and .href is an attribute of that element (in this case "test.html"). So the new window opens to "test.html", but why is the exclamation point (!) there then? Well, kk5st is smart, he knows that if the onclick event handler returns false nothing will happen on the current page (which is what he wants). If the onclick event handler didn't return false, the browser would update the current window as well as opening up the new window. When the window.open() function fires it returns a reference pointing to the newly created window. Since this newly created reference is not false (or zero), Javascript interprets it as being true, and if we put the ! (NOT) operator before that, it turns it into false. So the onclick event handler returns false it makes the current page stay where it is. He could have also said...

but I have to agree his current way is better...

because it accomplishes the same thing in less code.

If you want all of the links on your page to open up in a new window you can add this snippet of javascript to the top of your page...

<script type="text/javascript">
 window.onload = update_all_links;
 function update_all_links() {
  if (document.getElementsByTagName) {
   var all_links = document.getElementsByTagName('a');
   for (var i=0;i<all_links.length;i++) {
    all_links[i].onclick = "return !window.open(this.href)";
   }
  }
 }
</script>

Code (markup):

Then you can keep your links like this...

and they will still open up in a new window.

 

More importantly it tests the function for success. If you hardcode the "return false;", the html link will fail if the window.open() method fails. With this version, a failed window.open() returns false which is negated to true, trigering the html link to fire. The linked page will open in the existing window, but it will, at least, open.

Somewhere along the line, I was taught always to test for success. I can't/won't/don't always manage, but it's always a good plan. I see you've done it;

if (document.getElementsByTagName)

Code (markup):

cheers,

gary

 

Very good information, kk5st and brian94. Thanks!