CODEWITHSUNDEEP
javascriptjquery
Chris
Chris

Reputation: 27394

How can I open a link in a new window?

I have a click handler for a specific link, inside that I want to do something similar to the following:

window.location = url

I need this to actually open the url in a new window though, how do I do this?

Upvotes: 95

Views: 320203

Answers (10)

Scott 混合理论
Scott 混合理论

Reputation: 2332

this solution also considered the case that url is empty and disabled(gray) the empty link.

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>

Upvotes: 1

Michaja Broertjes
Michaja Broertjes

Reputation: 612

What's wrong with <a href="myurl.html" target="_blank">My Link</a>? No Javascript needed...

Upvotes: 0

Dramoth
Dramoth

Reputation: 71

I just found an interesting solution to this issue. I was creating spans which contain information based on the return from a web service. I thought about trying to put a link around the span so that if I clicked on it, the "a" would capture the click.

But I was trying to capture the click with the span... so I thought why not do this when I created the span.

var span = $('<span id="something" data-href="'+url+'" />');

I then bound a click handler to the span which created a link based on the 'data-href' attribute:

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

This successfully allowed me to click on a span and open a new window with a proper url.

Upvotes: 3

dhanesh s.r
dhanesh s.r

Reputation: 21

Microsoft IE does not support a name as second argument.

window.open('url', 'window name', 'window settings');

Problem is window name. This will work:

window.open('url', '', 'window settings')

Microsoft only allows the following arguments, If using that argument at all:

  • _blank
  • _media
  • _parent
  • _search
  • _self
  • _top

Check this Microsoft site

Upvotes: 0

adriandorin
adriandorin

Reputation: 41

This is not a very nice fix but it works:

CSS:

.new-tab-opener
{
    display: none;
}

HTML:

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

Javascript:

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

Live example: http://jsfiddle.net/7eRLb/

Upvotes: 0

user2618825
user2618825

Reputation: 1

Be aware if you want to execute AJAX requests inside the event handler function for the click event. For some reason Chrome (and maybe other browsers) will not open a new tab/window.

Upvotes: 0

Usha
Usha

Reputation: 156

You can also use the jquery prop() method for this. 

$(function(){
  $('yourselector').prop('target', '_blank');
});

Upvotes: 5

chadwackerman
chadwackerman

Reputation: 825

Here's how to force the target inside a click handler:

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});

Upvotes: 34

Sarfraz
Sarfraz

Reputation: 382909

You can like:

window.open('url', 'window name', 'window settings')

jQuery:

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

You could also set the target to _blank actually.

Upvotes: 209

Amr Elgarhy
Amr Elgarhy

Reputation: 69042

you will need to use window.open(url);

references:
http://www.htmlcodetutorial.com/linking/linking_famsupp_120.html
http://www.w3schools.com/jsref/met_win_open.asp

Upvotes: 16

Related Questions