Open link with javascript in new tab

Javascript — Open Link in New Tab (SAME WINDOW)

I realize there are a couple questions already on SO for this topic, but they all seem to be quite old. just trying to get an up-to-date answer for this: Is the standard way of opening a new tab (within the same browser window) still:

window.open('url', '_blank'); window.focus(); 

. Also, I’ve read that it is dependent on the users config of their browser (whether the new page opens in a new tab or a new window, and also whether the new tab/window gets the focus). I would like the focus to remain on the original tab, but I am more concerned with it opening a tab in the same browser window (keeping focus is just a bonus). So is there a way to read/get this setting in new browsers? (chrome, ff, ie) And possibly notify the user to change their settings if they have it set to open in a new window?

2 Answers 2

I have had great success with

Using target=»_blank» is favourable.

eg. in Chrome, anchors with target=»_blank» open a new tab, however, window.open opens a whole new window.

I tried a few experiments to replace window.open with target=»_blank» .

Blocked by popup blocker

// create an anchor, add to body, trigger click var a = document.createElement('a'); a.setAttribute('href', 'http://google.com'); a.setAttribute('target', '_blank'); document.body.appendChild(a); a.click(); // hijack first anchor, change href, trigger click var a = document.getElementsByTagName('a')[0]; a.setAttribute('href', 'http://google.com'); a.setAttribute('target', '_blank'); a.click(); // hijack first anchor that has target=_blank, change href, trigger click var a = $('a[target="_blank"]')[0]; a.setAttribute('href', 'http://google.com'); a.click(); 

Allowed by popup blocker

// hijack first anchor that has target=_blank, change href, next document click triggers it var a = $('a[target="_blank"]')[0]; a.setAttribute('href', 'http://google.com'); $(document).click(function()< $('a[target="_blank"]')[0].click(); >); // create an anchor, add to body, next document click triggers it var a = document.createElement('a'); a.setAttribute('href', 'http://google.com'); a.setAttribute('target', '_blank'); document.body.appendChild(a); $(document).click(function()< a.click(); >); 

It seems as long as the popups are triggered by a user interaction, the popup blocker allows it.

Mozilla’s documentation on window.open :

Источник

Javascript — Open a given URL in a new tab by clicking a button

I would like to have a button that redirects to a given URL and opens in a new tab. How can this be done?

14 Answers 14

Worked for me and it will open an actual new ‘popup’ window rather than a new full browser or tab. You can also add variables to it to stop it from showing specific browser traits as follows:

onclick="window.open(this.href,'popUpWindow','height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no'); return false;" 

@wong2 Might want to change answer to this one. The one currently selected is far to wordy to be efficient.

Adding target=»_blank» should do it:

I see, sorry I’ve missed that. Well, you could style the link to look and feel like a button. If you’re using jQuery UI just use button to do so.

+1 because you gave a good solution to those looking for a simple «open link in new tab» answer, if they aren’t using a button.

+1, if something opens a page in new tab, it is logically a link, so tag is appropriate. Styles should be used to make it look like a button.

You can forget about using JavaScript because the browser controls whether or not it opens in a new tab. Your best option is to do something like the following instead:

This will always open in a new tab regardless of which browser a client uses due to the target=»_blank» attribute.

If all you need is to redirect with no dynamic parameters you can use a link with the target=»_blank» attribute as Tim Büthe suggests.

Источник

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

window.open('https://support.wwf.org.uk', '_blank'); 

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

@Alex meh. not really the «right» answer. Trying this in Firefox, where I prevent pop-up windows, this code fails.

window.open('https://support.wwf.org.uk', "_blank") || window.location.replace('https://support.wwf.org.uk'); 

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

I would avoid this solution because window.open in some cases could return null (but still open a new window as expected) while also triggering location.replace on the current tab resulting in two open tabs with the new url. Using a try/catch described in this answer may be a better solution stackoverflow.com/a/27725432/811533.

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.

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

function navigate(href, newTab) < var a = document.createElement('a'); a.href = href; if (newTab) < a.setAttribute('target', '_blank'); >a.click(); > 

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.

Источник

How to Open URL in New Tab using JavaScript?

While we are working in HTML, we can put the “_blank” value to the target attribute and the URL link will be opened in a new tab. But how to achieve this job when you are using JavaScript. We will talk about how to open a URL in a new tab using JavaScript in this write-up.

Opening URL in a new tab using HTML

A traditional method to get this job done is as follows:

Now, if you click on the link “Linuxhint Website”, the “linuxhint.com” will open up in the new tab.

This was a traditional way to open a link in a new tab.

Now we are going to have a look at how we can achieve this by using JavaScript

Opening URL in a new tab using JavaScript

To open a URL in a new tab using JavaScript, the window.open() method can be utilized.

The technique is pretty simple. We just have to pass two arguments to the window.open() method. One is the URL of the web page. The second argument is the same as the target attribute in the anchor tag in which we specify where we want to open up the URL e.g. “_blank”.

Let’s think of an example, in which we want to open the “linuxhint.com” website in a new tab with the click of the button.

After creating a button in HTML, we have called a function named “newTab()”.

Let’s define it in our JavaScript code where we will use the window.open() method and provide it the URL of the “linuxhint.com” website and “_blank” value for opening the website in a new tab.

JS

Let’s execute the code and see the results.

When we click on the button “Click” it opens the “linuxhint.com” in a new browser tab.

Additional Methods

Here are some additional properties that you can attach while opening a URL:

• _blank: The URL is opened in a new tab.
• _parent: The parent frame is loaded with the URL.
• _self: The current page is replaced when this property is called
• _top: Any loaded framesets are replaced by the URL name – the widow’s name.

Conclusion

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.

RELATED LINUX HINT POSTS

Linux Hint LLC, editor@linuxhint.com
1309 S Mary Ave Suite 210, Sunnyvale, CA 94087
Privacy Policy and Terms of Use

Источник