Opening Two Or Multiple Pages From One Hyperlink

Once in ever you may think that is it possible to open one or more pages from just a single click? And if you have only basic knowledge on HTML and web programming you may get confused right here. Opening more than multiple pages from just a single click might be very useful especially when you want to show two different information pages about a link.

We can get a hyperlink to open more than two pages via several methods. One of them might be creating a link to a page that will open a pop-up window from it. But this may not sound practical as most of the browser have pop-up blocker enabled in it. Using pop-up cannot be good idea to open multiple pages.

Another best method can be using iframes. Iframes enables us to add two or more different pages to a single page. We can create a single page with two iframes in it and hence can add two different pages in it. Again, this idea becomes flop because; the iframes are not commonly used. Plus, it adds confusion to the visitor because of multiple information in a single page.

If you have been trying to open two pages using hyperlink and searching around the web but unable to find then you are here at right place.

I am going to teach you how you can accomplish this by just a single careful and tricky step.

We all know JavaScript, it can do lots of magic that html cannot do. If you are déjà vu at JavaScripting then you I hope you started getting hint.

Yes, we’ll be using OnClick method and window.open() function.

The default code to open a link from html is:

Onclick=”window.open(‘http://www.google.com’)”

The above code is a JavaScript code that will open Google HomePage. This is a basic code for hyperlinking using javascript.

Now let’s see at the HTML version of hyperlinking:

<a href=”http://www.google.com”>Page link</a>

We all know what that does.

Now when we add onclick parameter to the above HTML hyperlink then we can do any JavaScript magic we want.

See the example below to know what I mean exactly.

 <a href=”http://www.example.com” onclick=”window.open(‘http://www.google.com’);”>Page link </a>

In above code, we added onclick parameter to <a> tag. This will enable Page link to carry multiple function. One is default HTML hyperlinking function and another is any javascript function. OnClick is event loader, i.e. when any part of the object between this tag, <a>, is clicked new event will be loaded which will be predefined.

In simple terms, it will load two different links.

Try the above code and play with it.

Not only can two you open unlimited number of different pages just by single click by applying this javascript tweak.

<a href=”#link1″ onclick=”window.open(‘#link2′); window.open(‘#link3′)”>Page link </a>

You can open multipage using the above pattern.

Hope this tutorial was helpful...