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?
This question is related to
javascript
jquery
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:
What's wrong with <a href="myurl.html" target="_blank">My Link</a>
? No Javascript needed...
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
You can also use the jquery prop() method for this.
$(function(){
$('yourselector').prop('target', '_blank');
});
Here's how to force the target inside a click handler:
$('a#link_id').click(function() {
$(this).attr('target', '_blank');
});
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/
this solution also considered the case that url is empty and disabled(gray) the empty link.
$(function() {_x000D_
changeAnchor();_x000D_
});_x000D_
_x000D_
function changeAnchor() {_x000D_
$("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here_x000D_
$(this).css("background", "none");_x000D_
$(this).css("font-weight", "normal");_x000D_
_x000D_
var url = $(this).attr('href').trim();_x000D_
if (url == " " || url == "") { //disable empty link_x000D_
$(this).attr("class", "disabled");_x000D_
$(this).attr("href", "javascript:void(0)");_x000D_
} else {_x000D_
$(this).attr("target", "_blank");// HERE set the non-empty links, open in new window_x000D_
}_x000D_
});_x000D_
}
_x000D_
a.disabled {_x000D_
text-decoration: none;_x000D_
pointer-events: none;_x000D_
cursor: default;_x000D_
color: grey;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>_x000D_
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>_x000D_
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>_x000D_
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>_x000D_
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>
_x000D_
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.
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.
Source: Stackoverflow.com