Chrome, Javascript, window.open in new tab

In chrome this opens in a new tab:

this opens in a new window (but I’d like this to open in a new tab as well:

Is this feasible?

8 Answers 8

You can’t directly control this, because it’s an option controlled by Internet Explorer users.

Opening pages using Window.open with a different window name will open in a new browser window like a popup, OR open in a new tab, if the user configured the browser to do so.

EDIT:

A more detailed explanation:

1. In modern browsers, window.open will open in a new tab rather than a popup.

2. You can force a browser to use a new window (‘popup’) by specifying options in the 3rd parameter

3. If the window.open call was not part of a user-initiated event, it’ll open in a new window.

4. A “user initiated event” does not have to the same function call – but it must originate in the function invoked by a user click

5. If a user initiated event delegates or defers a function call (in an event listener or delegate not bound to the click event, or by using setTimeout for example), it loses it’s status as “user initiated”

6. Some popup blockers will allow windows opened from user initiated events, but not those opened otherwise.

7. If any popup is blocked, those normally allowed by a blocker (via user initiated events) will sometimes also be blocked. Some examples…

Forcing a window to open in a new browser instance, instead of a new tab:

The following would qualify as a user-initiated event, even though it calls another function:

The following would not qualify as a user-initiated event, since the setTimeout defers it:

Open a new tab with javascript but stay on current tab using javascript [duplicate]

Is it possible to open a new tab in browser using the window.open(«http://www.google.com»); function, but open it in the background and remain on the current page? When i Click in hyperlink the page will same but link will open in new tab.

I try this solution but it work only in Firefox link but I want to do in all browsers.

4 Answers 4

As confirmed in both: source1 source2

there isn’t a function that works throughout all browsers. There are options for popups, but this isn’t a good idea as many use popup blockers.

To reiterate the first source, it’s a browser setting for each user to decide to open a new tab in the background, or not. And because users decide this in their browser settings you will get inconsistent experiences.

60 minutes on the topic of opening a non-focused new tab and this is the only true valid answer on this topic as of November 2017! – poitroae Nov 4 ’17 at 20:17

Try following may be helpful

Note: You can’t open tabs in the background using javascript because this is set in the user’s preferences in about:config, which you have no control over. The setting in about:config in Firefox is:

It is only possible if you will be generate the Click event with Already Pressed Control Key Dynamically.

Open a new tab/window and write something to it?

I’m using Execute JS to write and test Javascript code within Firefox. I want to open a new tab/window and write something to it and I tried

However I always get this error

[Exception. «The operation is insecure.» code: «18» nsresult: «0x80530012 (SecurityError)»

Is there any way to get through this exception?

3 Answers 3

Edit: As of 2018, this solution no longer works. So you are back to opening about:blank in a new window and adding content to it.

Don’t «write» to the window, just open it with the contents you need:

Top-level navigation to data URLs has been blocked in Chrome, Firefox (with some exceptions), IE, and Edge (and likely other browsers to boot). They are apparently commonly used for phishing attacks, and major browser vendors decided that the danger outweighed the value provided by legitimate use cases.

This Mozilla security blog post explains that Firefox will block

but will not block

• User explicitly entering/pasting «data:…» into the address bar
• Opening all plain text data files
• Opening «data:image/*» in top-level window, unless it’s «data:image/svg+xml»
• Opening «data:application/pdf» and «data:application/json»
• Downloading a data: URL, e.g. ‘save-link-as’ of «data:…»

As for how to actually open HTML in a new tab or window, this should be sufficient:

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.

Javascript Open New Tab Example

Posted by: Era Balliu in JavaScript February 8th, 2016 0 Views

One of the most simple and basic actions you find in websites or apps is being able to open a URL into a new tab or window. In most cases this is not only dependent of your code but also the settings of the browser that is used. Let’s see how to proceed in order to make this action possible!

1. Basic understanding

It happens often that we want to present our user with an external source without taking them away from our own page. In this case we add a functionality in our website that is pretty easy and basic. We can do this either by using the method window.open() , or by taking advantage of the target attribute of the anchor tag in HTML.

1.1 Using the Target Attribute

Let’s analyze them one by one, starting with the HTML method first. Take a look at the code snippet below:

The code you see above would be the only thing we would need to make out goal happen. As you can certainly see, except for all the main HTML structure that would go with any document, we have added an anchor tag which, when clicked, would take us to http://webcodegeeks.com by opening a new tab.

As you see we have added the attribute target and have given it the value _blank . This means that the URL will be opened in a new tab or window, depending on the default settings of your browser. However, you can also use it to open the link into another frame. The only thing you would have to change is the value of the target attribute. It would take the name of the frame you wish to open the link into instead.

Moreover, if you are navigating in a frame, and want to open the external link into the entire tab, you can do that by assigning the attribute the value _top . By doing this you will have performed what is called “frame breaking”, which basically means going from a frame to the main tab. Note that we are assuming your default setting to be opening external links in new tabs, and not windows, but that is entirely in the users’ preference, as nothing would change in the code.

1.2 Using the window.open() method

window.open() , by definition, is a method that loads a resource into another (or the same, depending on the specified parameters) browsing context. It’s syntax would go like below:

As you see, the method takes three parameters. The first one, URL , specifies the URL to be loaded in the newly opened tab. It can be a document, image file or any other resource supported by the browser. The next one would be windowName and contains the name of the new window, which can be used by the target attribute later on. It shouldn’t contain any whitespaces. The third one is an array of features of the window we’re creating such as size or position etc. Let’s see it in more detail by seeing how this method behaves in real life.

2. Opening a new tab using Window.open()

We already explained the basic syntax of using window.open() to open a new tab. Let’s see how we would use that exactly according to the syntax. See the code snippet below:

As you can see, the arguments we have assigned to the method are pretty self-descriptive. We have given it http://www.webcodegeeks.com/ as a URL, WebCodeGeeks as a name in case we need to reference it later, and also added some features to it as the third argument.

The method will open a new window, similarly to opening a new window manually, but it will also redirect you to a certain URL. However, if the URL is not specified, a new blank window will be opened. The URL will not be loaded immediately, firstly, the code block that was being executed will finish that, and then the URL will be fetched. This means that the creation of the window and the actual loading of the URL are done asynchronously.

If there already exists a window with the windowName we have specified, the URL will be loaded into that window and the window features we specified will be thus ignored. That can also be used as a way to open an already existing window, while setting the first parameter to a empty string. Meanwhile, you can open a new blank window by setting the second parameter to _blank .

The third parameter is an optional one that contains features of the newly opened window. However, after a window has been opened, it cannot be changed anymore by Javascript. If it is not specified, the secondary window will take the features of the main window. Also, if the parameter is specified, but no size values are given to it, the new window will follow the most recently rendered one. However, if the feature that is not specified is position , the width and length of the newly opened window will be 22px smaller than the main one, to help the user understand that a new window has been opened.

Now you are fully able to use either HTML or Javascript to open a new tab or window according to your own requirements.

3. Download the source code

This was an example of Opening a New Tab in Javascript.