0

I'm sure you can help me with this issue:

I recently run into some issues with opening a new tab / pop-up on a php/javascript site.

My current solution is as followed:

<script type="text/javascript">

            function Popup(url) {
                window.open(url);
            }

    </script> 


    <div class="link_box">

        <a class="link_box_link" href="javascript:Popup('http://www.<website>.com')"><website-name></a>

    </div>

However some of my coworkers using IE6-8 can't seem to open the link. Now I hope you can help me finding the best possible and cross-browser compatible solution for opening a new tab or window. Any help or tip would be greatly appreciated!

JJJ
  • 32,902
  • 20
  • 89
  • 102
user2425234
  • 67
  • 1
  • 10
  • have you tried adding the `target="_blank"` attribute to your `` tag? – Joum Jul 25 '13 at 07:48
  • 4
    replace co-workers with ones that use sane browsers. – Orangepill Jul 25 '13 at 07:48
  • possible duplicate of [Open url in new tab using javascript](http://stackoverflow.com/questions/4907843/open-url-in-new-tab-using-javascript) – Joum Jul 25 '13 at 07:49
  • @orangepill You don't know how much I'd like to do that;) Jokes aside we want our website to be as compatible as possible. Which means to look that IE doesn't go crazy on valid definitions... – user2425234 Jul 25 '13 at 07:54
  • @Joum When I do that only a new tab seems to open, however the website will not open in it. – user2425234 Jul 25 '13 at 07:56
  • should be able to get away with `onclick='window.open(url); return false'` – Orangepill Jul 25 '13 at 07:56
  • Did you even check the comments in the duplicate flag I raised? Apparently there is no consistent way of doing this, as some browsers have their behaviour defined to open links in tabs and others open links in new windows. There are apparently workarounds, but they aren't _cross-browser compatible_. Of course you can "simply" test-case all browsers and condition the behaviour all the way... :) good luck! – Joum Jul 25 '13 at 07:58
  • @Joum The problem is mainly that the link currently does not open a tab OR pop-up in IE6 or IE7. I don't mind if it is a pop-up or new tab. Just wondered if there was an acceptable easy way to solve this – user2425234 Jul 25 '13 at 08:03
  • I understand that. There is another pertinent point regarding this subject: pop-up blockers. It is already hard enough as it is to make the browser behave like you want it to (and in many cases, straight down impossible). My suggestion would be using a modal window with an `iframe`. It's fairly cross-browser compatible and generally, a welcome addition in terms of usability since your users never lose focus of the window they are using. For example: http://fancybox.net/ – Joum Jul 25 '13 at 08:09
  • 1
    But if you don't mind if it's a tab or a new window, simply adding what I told you in the first comment has to work. _Unless_ browser settings don't permit it or there is a pop-up blocker. :) – Joum Jul 25 '13 at 08:14
  • @Joum I quite like the solution with fancybox or something similar, however this is sadly not useful with my current problem. We have a partner-website where we have a special offer, but we still want to keep our website open. A new tab or pop-up would be the best solution. However since compability and 3rd-party software (pop-up blockers) seems to be a problem, is there any easy/good way to realize this? – user2425234 Jul 25 '13 at 08:19
  • @Joum Dear god how was this possible? Some of my users (the ones with the problem) have a pop-up blocker plug-in but don't know that they had it... – user2425234 Jul 25 '13 at 08:22

2 Answers2

6

Ok, after looking at the comments produced (mine included), I decided that I should sum it up in an answer.

The cross-browser compatible solution is simply this: (with no Javascript)

<a href="http://www.google.com" target="_blank"> LINK TO GOOGLE </a>

Read about it here.

There are a few reasons why this may not work:

  • browser settings;
  • pop-up blockers

About these, there isn't much you can do. Browser settings aren't editable by your script; AFAIK, there isn't a general way to circumvent pop-up blockers (and thank god for that!). Although, there are a few workarounds that do work under specific conditions. Although, as it may be such a frustrating task to account and inquire about all those conditions with a script, my suggestion of using a modal window with an iframe still stands.

NOTE: Actually, using this should not bring that many trouble with pop-up blockers (though still possible). Note that most times pop-up blockers are triggered exactly by detecting client-side scripting to open new windows - being the method you tried possibly one of the first to trigger it.

Joum
  • 3,189
  • 3
  • 33
  • 64
  • 1
    Looks like sometimes the easiest solutions are the best ones. This one circumvents the pop-up blocker plugin we had problems with without any trouble. – user2425234 Jul 25 '13 at 08:55
  • Yeah, sometimes, but just sometimes, a chainsaw isn't needed to cut a steak... :) glad it helped! – Joum Jul 25 '13 at 08:56
0

You have to manipulate the target like Joum saved in the comment section. Or you simple are using the posible to return false;.

<a class='popup' href='www.websitename.com'>website</a>

$('a.popup').live('click', function(){
    newwindow=window.open($(this).attr('href'),'','height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
});
dominic
  • 143
  • 6
  • `return false;` does not require jQuery and stop the browser change the url on clicking a link. the code was just an example. – dominic Jul 25 '13 at 07:58
  • Does this work _regardless_ of browser settings? For instance, if in your browser's preferences you change the behaviour to open links in new windows instead of tabs, does this still hold up? – Joum Jul 25 '13 at 08:12
  • `window.open()` pops an window regardless. perhaps blocking an popup will cancel opening the window, but will show the user a notification. the height and width attributes helps the browser to decide if an new window or tab is needed. – dominic Jul 25 '13 at 08:19
  • @d.poellath Am I understanding this right? You connect a "click"-event with the link. EDIT: what does the return false exactly? Do I need to use jQuery or can I use the method I described in my first post? – user2425234 Jul 25 '13 at 08:25
  • 1
    `return false;` does cancel the click, needed because you handle it with your javascript - the code example adds the javascript:click event to all `a` elements with class `popup`. – dominic Jul 25 '13 at 08:30