Make a link open a new window (not tab) [duplicate]

Is there a way to make a link open a new browser window (not tab) without using javascript?

5 Answers 5

With pure HTML you can’t influence this — every modern browser (= the user) has complete control over this behavior because it has been misused a lot in the past.

HTML option

You can open a new window (HTML4) or a new browsing context (HTML5). Browsing context in modern browsers is mostly «new tab» instead of «new window». You have no influence on that, and you can’t «force» modern browsers to open a new window.

In order to do this, use the anchor element’s attribute target [1] . The value you are looking for is _blank [2] .

JavaScript option

Forcing a new window is possible via javascript — see Ievgen’s excellent answer below for a javascript solution.

(!) However, be aware, that opening windows via javascript (if not done in the onclick event from an anchor element) are subject to getting blocked by popup blockers!

_{[1] This attribute dates back to the times when browsers did not have tabs and using framesets was state of the art. In the meantime, the functionality of this attribute has slightly changed (see MDN Docu)}

_{[2] There are some other values which do not make much sense anymore (because they were designed with framesets in mind) like _parent , _self or _top .}

Using CSS to emulate tabbed windows

I currently have two divs that I’m trying to use to emulate a drop down tabbed window.

I have content where the grayed out areas are. The bigger div (the div containing the big gray area or the «window») has a position of absolute, but so does the little div (the tab). I can’t figure out how to move the tab so that I can add more tabs. When I do add more tabs, they just sit over the middle tab. I’ve looked at all the styling in the Elements dev tools, but there aren’t other properties that can «shift» the tab left or right. How can I move it over to the left by, say, 200 px?

1 Answer 1

It is hard to help you without knowing more about your situation and seeing the code. But I made a couple illustrations to try and help you.

This is how I would do it without position absolute. This way will keep the content area up top but will stack the tabs from left to right as you add more,

html

css

Output

This way is using position absolute and here is a jsfiddle.

Once an element has position absolute it can be moved around with directional rules. It starts in the top left corner. To move it now you can add a direction with an amount.

You can play with these values and watch the element move around the window.

Same html as example 1.

If this does not help you please add your code so I can better understand what you are trying to accomplish. From your question it sounds like you are having trouble using position asbsolute and creating tabs side by side of eachoter under the content. If so I have provided two examples. 1. using position absolute . 2. using display: inline-block .

javascript window.location in new tab

I am diverting user to some url through window.location but this url opens in the same tab in browser. I want it to be open in new tab. Can I do so with window.location? Is there another way to do this action?

7 Answers 7

I don’t think there’s a way to do this, unless you’re writing a browser extension. You could try using window.open and hoping that the user has their browser set to open new windows in new tabs.

The second parameter is what makes it open in a new window. Don’t forget to read Jakob Nielsen’s informative article 🙂

You can even use

This will open it on the same tab if the pop-up is blocked.

This works for me on Chrome 53. Haven’t tested anywhere else:

with jQuery its even easier and works on Chrome as well

Rather going for pop up,I personally liked this solution, mentioned on this Question thread JavaScript: location.href to open in new window/tab?

We have to dynamically set the attribute target=»_blank» and it will open it in new tab. document.getElementsByTagName(«a»)[0].setAttribute(‘target’, ‘_blank’)

If you want to open in new window, get the href link and use window.open

var link = document.getElementsByTagName(«a»)[0].getAttribute(«href»);

Don’t provide the second parameter as _blank in the above.

Open link in new tab or window [duplicate]

Is it possible to open an a href link in a new tab instead of the same tab?

4 Answers 4

You should add the target=»_blank» and rel=»noopener noreferrer» in the anchor tag.

Adding rel=»noopener noreferrer» is not mandatory, but it’s a recommended security measure. More information can be found in the links below.

It shouldn’t be your call to decide whether the link should open in a new tab or a new window, since ultimately this choice should be done by the settings of the user’s browser. Some people like tabs; some like new windows.

Using _blank will tell the browser to use a new tab/window, depending on the user’s browser configuration and how they click on the link (e.g. middle click, Ctrl +click, or normal click).

set the target attribute of your element to «_tab»

EDIT: It works, however W3Schools says there is no such target attribute: http://www.w3schools.com/tags/att_a_target.asp

EDIT2: From what I’ve figured out from the comments. setting target to _blank will take you to a new tab or window (depending on your browser settings). Typing anything except one of the ones below will create a new tab group (I’m not sure how these work):

How do I make a tabbed view in HTML?

When clicking on tab A, show content for tab A. Click on tab B, show content for tab B, and so on.

What’s the most simple and compatible way of constructing a HTML snippet?

I don’t mean to use any libraries here, so none of jQuery or any other libraries.

9 Answers 9

If you want to roll your own tab control, you could do something like this:

Here is a list of different types of tabs plus tutorials on how to build them

TabTastic is a good guide — it is accessible, and (when JavaScript is not available) fails very gracefully.

If you want to implement your own tab view, just do it like this:

Take a look at an example such as this (courtesy of a Google search for ‘tabbed view javascript’).

You can obviously use this with a little customisation, but it’s instructive to take it apart and determine what it’s doing. It’s basically enabling or disabling

If «simple and compatible» are your only two criteria, I’d suggest the jQuery UI Tabs plugin. Cross-browser, and a cinch to implement.

Depending on your ambitions, it could simply be a matter of an unordered list and a number of

Alternatively, you could have a look at this.

Edit: Not the only one linking to the jQuery site, it seems 🙂

The jQuery tabs widget works completely on the browser side — content for all tabs are sent on every request, or you could write JavaScript code that uses Ajax to load the tab contents dynamically.

But it might not be appropriate for your use. Consider if you need to control the tabs server-side (that is, a click on a tab sends a new page request to the server — the server constructs HTML that has the visual appearance of tabs).

If you’re open to using JavaScript, jQuery’s tab is pretty nice.