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>
<script>
window.open('http://www.example.com?ReportID=1', '_blank');
</script>
The second parameter is optional and is the name of the target window.
window.open does what target="_blank" does - it opens the URL in a new window.
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);
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 :))
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);
});
});
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.
You can extract the href from the a tag:
window.open(document.getElementById('redirect').href);
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>
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
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')
}
}
changes in js (href='#' target='_blank')
target="_top"does not open in a new window -target="_blank"does.