www.webdeveloper.com
Results 1 to 4 of 4

Thread: Trying to get Google Chrome to open a new tab instead of a new window using JS

  1. #1
    Join Date
    Jul 2008
    Location
    Bristol
    Posts
    77

    Trying to get Google Chrome to open a new tab instead of a new window using JS

    Hi everyone,

    Haven't been here in a while - but I've been searching for an answer to this for ages and to no avail, so anyone who can help I'll be most grateful!

    My client's site includes links which need to open a new tab in the browser, and although I can get this to work in Firefox, Safari and IE, Chrome won't play along. After a simple Ajax call, it grabs the website that is required and then runs the following:

    Code:
    window.open(website,'_newtab');
    where 'website' is the returned hyperlink. I've also been told _blank will work, but I found that _newtab seems to be fine in every other browser but Chrome. I know that Chrome has limited options for tab preferences and I've read solutions such as "right click and select new tab" or "install an extension" but bear in mind we're talking about user interaction here and they are not going to want to install extensions and they may not always read a line that says "Oh, don't forget to right click and choose new tab!" because this will bypass my ajax call.

    Hope that's clear! I tend to ramble a lot, so if anyone wants me to clarify something please ask.

    Any help much appreciated!

    Thank you
    Michael

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by memerson View Post
    After a simple Ajax call, it grabs the website that is required and then runs the following:

    Code:
    window.open(website,'_newtab');
    Presumably you're calling window.open in a readystatechange handler. If so it is not treated as a user-requested action. so presumably you have disabled the popup blocker, allowing the window to open as a popup.

    I can't see any setting in Chrome to determine how a user-requested window.open is treated, so I presume it always opens in a new tab. If so I suggest that you change the algorithm to:

    • Call window.open on click, specifying current URL. (treated as user-action)
    • Run server request.
    • Apply returned URL to opened window.

    Here's a proof of concept.

    You'll need to create 'urlfile.txt' containing just a URL, say http://bing.com

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TEST</title>
    </head>
    
    <body>
    
    <a href='#' id='lnk1'>Click</a>
    
    <script language="JavaScript" type="text/JavaScript">
    
    document.getElementById( 'lnk1' ).onclick = function( event )
    {
      var rq = new XMLHttpRequest(), 
          link = this,
          win = window.open( location.href );
     
      rq.onreadystatechange = function()
      {
        if( this.readyState == 4 )
          win.location.href = this.responseText;
      }
      
      rq.open( 'get', 'urlfile.txt', true );
      
      rq.send( null ); 
        
      event.preventDefault();
    }
    
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Jul 2008
    Location
    Bristol
    Posts
    77
    Quote Originally Posted by Logic Ali View Post
    Presumably you're calling window.open in a readystatechange handler. If so it is not treated as a user-requested action. so presumably you have disabled the popup blocker, allowing the window to open as a popup.
    I'm calling it within a jQuery (document).ready as I'm using jQuery for my ajax calls.

    Quote Originally Posted by Logic Ali View Post
    I can't see any setting in Chrome to determine how a user-requested window.open is treated, so I presume it always opens in a new tab.
    It doesn't which is my point - it NEEDS to open in a new tab and Chrome is the only browser that opens the link in a new window, not a new tab.

    The URL is taken from the rel attribute of a link that's clicked - the actual link runs the ajax call in order to validate the user access and then the user is taken to the specified URL. The website itself is a voucher code based site where when clicking a link button it displays the code (if the user is logged in) and then opens the relevant site in order to use that code.

    The entire block of code is as follows:

    Code:
    $(document).ready( function() {
    	
    	$('.revealcode').click( function() {
    		
    		var vid = $(this).attr('id').split("_")[1];
    		var website = $(this).attr('rel');
    				
    		$.ajax( {
    			url : '/ajax.vouchers.php',
    			data : {
    				'action' : 'getvouchercode',
    				'id' : vid
    			},
    			success : function(response) {
    				
    				if(response) {				
    					$("#show-code_"+vid).parent().html('<div class="offer-show">Voucher Code: ' + response + '</div>');
    					
    					if(website) window.open(website,'_newtab');
    					
    				} else {
    					$("#show-code_"+vid).parent().html('Sorry, the code could not be retrieved. Try reloading the page and try again.');
    				}
    				
    			}			
    		});
    		
    		return false;
    		
    	});
    Basically what the code does is retrieves the Voucher code from the database matched against the vid (voucher ID) and replaces the button with the code whilst opening the website of the company in a new tab. Or at least that's what it's meant to do in Chrome but unfortunately does not....

  4. #4
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by memerson View Post
    I'm calling it within a jQuery (document).ready as I'm using jQuery for my ajax calls.
    Amounts to the same thing - it is being treated as a popup and therefore will not open in a tab.
    I suggest you try the algorithm I gave.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles