如何在新窗口中打开链接?

我有一个点击处理程序为一个特定的链接,内部,我想做一些类似如下:

window.location = url

我需要在一个新窗口中打开 URL,我该怎么做呢?

312086 次浏览

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.

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

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

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

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

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

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.

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/

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.

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

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>