How to open a page in a new tab without leaving the current page

Asked

Viewed 11,418 times

2

What I want is something that works like target="_blank", but I don’t want to leave the page where the link was clicked.

That is, when clicking on the link, apparently nothing would change, keeping the current page view, however, a new tab would open.

What code could you use to do this?

javascript jquery html

2 answers

4

New tab x New window

First, just to clarify: about opening in a "new tab". If you want to open only in a "new tab" and not in a "new window", this is not currently possible. CSS3 defines the property target-new to handle this, but it has not been implemented in any browser so far.

Okay, now on to the main theme:

Open link in the background

You can make a workaround emulating Ctrl+Click:

<a href="/questions/40573" id="link">Link para esta questão</a>
<button onclick="simulateClick(true, false, false);">Simulate Ctrl+Click</button>

var simulateClick = function (ctrl, shift, isMiddle) {
    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, ctrl, false, shift, false, isMiddle ? 1 : 0, null );
    document.getElementById('link').dispatchEvent(evt);
}

View a similar jsFiddle

However,

This is a browser behavior, user-configured. And should be like this and only like this. With reason, we do not want to open possibility to open links in the background without noticing while browsing the web! This is a user option!

More than that, until the target="blank" only finds support on certain occasions: when the user has something in progress that should not be lost with a local page redirect. An open link while playing a video, or an unsaved draft of an email in a web email client.

The idea of all this is that we should not change the natural behavior of the browser. If the user wants to open the link in the window itself, leave. If he wants to open in another, let it. If he wants to open in a tab in the background, let it. But if he wants to open in first, also let.

The focus of the web application on this should be on providing the best user experience through a good layout and a good flow, without limiting the user to choices he can in another application. This approach can even annoy the user.

1

You’ll need a code like this:

function openNewBackgroundTab(){
    var a = document.createElement("a");
    a.href = window.location.pathname;
    var evt = document.createEvent("MouseEvents");
    //the tenth parameter of initMouseEvent sets ctrl key
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                                true, false, false, false, 0, null);
    a.dispatchEvent(evt);
}

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(!is_chrome)
{
    var url = window.location.pathname;
    var win = window.open(url, '_blank');
} 
else 
{
    openNewBackgroundTab();
}

Source: https://stackoverflow.com/a/22858261/194717

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.