2

I want the functionality to open all links in a website to a new background tab by default when a user clicks on the link. I have checked all over but none of them provide a solution that works on all browsers. I have referred the following two links to write my code:

Working example in chrome

Suggested modifications for ie

I have the following code:

<html>
<head>
<style type="text/css">
.link{ color: #0055ff; cursor: pointer; text-decoration: underline; }
</style>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".link").on('click', function(event){
var $this = $(this);
    var a = document.createElement("a");

    a.href = $this.href;


    if( document.createEvent ) {
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                            true, false, false, true, 1, a);
        a.dispatchEvent( evObj );

    } else if( document.createEventObject ) {
        var evObj = document.createEventObject();
        evObj.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                            true, false, false, true, 1, a);
        a.fireEvent( 'onclick', evObj );
    }
});
});
</script>
</head>
<body>
<span class="link" data-href="http://www.google.com">Go to Google</span>
</body>
</html>
Community
  • 1
  • 1
Bharat
  • 21
  • 1
  • 3
  • possible duplicate of [javascript window.location in new tab](http://stackoverflow.com/questions/7554108/javascript-window-location-in-new-tab) – Andy Feb 25 '14 at 10:38
  • 1
    google for window.open – Aamir Afridi Feb 25 '14 at 10:39
  • triggering mouse events programatically on a link will trigger the browser's popup blocker. Just do a plain `window.open` if the link is clicked. – Christoph Feb 25 '14 at 10:41
  • Note, from that dupe link, the document will only load in a new tab if the user has expressly chosen that option in their browser. – Andy Feb 25 '14 at 10:43
  • please note that I want to open the new tab as a background tab i.e., the user should still remain in the current tab from where the link is clicked. Moreover, I also want it to be cross browser. – Bharat Feb 26 '14 at 08:54
  • A middle mouse click on an ordinary anchor tag will perform the requested behavior. This isn't an answer to your question, but a workaround. – kas Jul 01 '18 at 03:21

1 Answers1

2

jQuery (will be stopped by popup blockers)

<html>
<head>
<style type="text/css">
.link{ color: #0055ff; cursor: pointer; text-decoration: underline; }
</style>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".link").on('click', function(event){
var $this = $(this);

    window.open($this.href, '_blank');

});
});
</script>
</head>
<body>
<span class="link" data-href="http://www.google.com">Go to Google</span>
</body>
</html>

Javascript (will NOT be stopped by popup blockers)

<html>
<head>
<style type="text/css">
.link{ color: #0055ff; cursor: pointer; text-decoration: underline; }
</style>
</head>
<body>
<span class="link" onclick="window.open('http://www.google.com', '_blank')">Go to Google</span>
</body>
</html>

A comment though, based on the topic of the question:

People make a choice how their browser should act and it's not meant for us developers to override that... a much better approach would be to offer them a way, by asking if they want to open in a new tab/window or not in the first place... and secondly, to inform them of why they should do as you like and the benefits of doing so on your site. That might get you where you want

Asons
  • 84,923
  • 12
  • 110
  • 165
  • your code will open the new link as a foreground tab and not as a background tab i.e., I want the user to remain on the current tab from where the link is clicked and the new link must load in the background. – Bharat Feb 26 '14 at 08:58
  • 1
    Thats a browser setting which is set by the user. You can't decide that with javascript. – Asons Feb 26 '14 at 09:02