CODEWITHSUNDEEP
javascript
Phillip Senn
Phillip Senn

Reputation: 47605

How to simulate target="_blank" in JavaScript

When a user clicks on a link, I need to update a field in a database and then open the requested link in a new window. The update is no problem, but I don't know how to open a new window without requiring them to click on another hyperlink.

<body onLoad="document.getElementById('redirect').click">
<a href="http://www.mydomain.com?ReportID=1" id="redirect" target="_blank">Report</a>
</body>

Upvotes: 197

Views: 440320

Answers (10)

Julesezaar
Julesezaar

Reputation: 3396

When the person is holding shift down and you programmatically want to open a new tab (not a new window) the solution is to wrap a timeout around it.

It depends on your browsers settings but default Chrome behaviour has a problem with "shift down + javascript's window.open()" combination.

someElement.addEventListener('click', (e) => {
    if (e.shiftKey) {
        // Shift down + window.open() requires a "timeout" wrapper
        // Else a "new window" opens instead of a new tab
        setTimeout(() => window.open(url, '_blank'))
    } else {
        // if shift is not down this will open a new tab
        window.open(url, '_blank')
    }
 }

Upvotes: 0

Alizain
Alizain

Reputation: 1

changes in js (href='#' target='_blank')

Upvotes: -1

Tommy Paul
Tommy Paul

Reputation: 19

This is how I do it on my website. Severa buttons call one javascript function, which always opens a new tab for each new web page.

<button type="button" onclick="newTab('http://google.com')">search</button>
<button type="button" onclick="newTab('http://amazon.com')">buy</button>
<button type="button" onclick="newTab('http://gmail.com')">read</button>
<script>
    function newTab(url) {
        window.open(url, '_blank');
    }
</script>

Upvotes: 1

radacina
radacina

Reputation: 87

This might help you to open all page links:

$(".myClass").each(
     function(i,e){
        window.open(e, '_blank');
     }
);

It will open every <a href="" class="myClass"></a> link items to another tab like you would had clicked each one.

You only need to paste it to browser console. jQuery framework required

Upvotes: 0

ChristopheD
ChristopheD

Reputation: 116157

<script>
    window.open('http://www.example.com?ReportID=1', '_blank');
</script>

The second parameter is optional and is the name of the target window.

Upvotes: 392

Jair Reina
Jair Reina

Reputation: 2915

This might help

var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    link.href = 'http://www.google.com';
    link.target = '_blank';
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': false,
        'cancelable': true
    });
    link.dispatchEvent(event);

Upvotes: 28

Jindra Helcl
Jindra Helcl

Reputation: 3736

This is how I do it with jQuery. I have a class for each link that I want to be opened in new window.

$(function(){

    $(".external").click(function(e) {
        e.preventDefault();
        window.open(this.href);
    });
});

Upvotes: 9

Zennethe Fuchs
Zennethe Fuchs

Reputation: 61

I personally prefer using the following code if it is for a single link. Otherwise it's probably best if you create a function with similar code.

onclick="this.target='_blank';"

I started using that to bypass the W3C's XHTML strict test.

Upvotes: 6

akamaozu
akamaozu

Reputation: 705

I know this is a done and sorted out deal, but here's what I'm using to solve the problem in my app.

if (!e.target.hasAttribute("target")) {
    e.preventDefault();     
    e.target.setAttribute("target", "_blank");
    e.target.click();
    return;
}

Basically what is going on here is I run a check for if the link has target=_blank attribute. If it doesn't, it stops the link from triggering, sets it up to open in a new window then programmatically clicks on it.

You can go one step further and skip the stopping of the original click (and make your code a whole lot more compact) by trying this:

if (!e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
}

If you were using jQuery to abstract away the implementation of adding an attribute cross-browser, you should use this instead of e.target.setAttribute("target", "_blank"):

    jQuery(event.target).attr("target", "_blank")

You may need to rework it to fit your exact use-case, but here's how I scratched my own itch.

Here's a demo of it in action for you to mess with.

(The link in jsfiddle comes back to this discussion .. no need a new tab :))

Upvotes: 19

treznik
treznik

Reputation: 8124

You can extract the href from the a tag:

window.open(document.getElementById('redirect').href);

Upvotes: 2

Related Questions