Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript window.open inconsistent in Chrome

I give the user an option to open a single tab or a tab group. When they click a special link I would like to open several related tabs. The javascript for opening several tabs is as follows:

<li>
  <a href="javascript:launchAll()">Or launch them all at once</a>
</li>

<script>
   function launchAll() {
     var win = window.open("http://domain.com/page1");
     win = window.open("http://domain.com/page2");
     win = window.open("http://domain.com/page3");
     win = window.open("http://domain.com/page4");
   }
</script>

The first two open as tabs the second two try to open as popups/in separate windows, which are blocked in my case. Unblocking popups is not the issue and this UI is not the question. My question is why these four seemingly identical calls produce different results.

UPDATE: this only seems to happen in Chrome. Firefox and Safari open all as new tabs. Does anyone know a work around?

like image 794
pferrel Avatar asked Nov 18 '12 20:11

pferrel


1 Answers

This limitation is actually due to a Chrome security setting: Chrome doesn't want people to be able to open unlimited tabs by just one click. Therefore, the setting they use is, maximum of two tabs for the first click, one tab for each additional click. So, if you wanted to get around this, you would have to do something like this:

<li>
  <a href="javascript:launchAll()">Or launch them all at once</a>
  <a href="javascript:launch()" id="test"></a>
  <a href="javascript:launch2()" id="test2"></a>
</li>

<script>
   function launchAll() {
     var win = window.open("http://domain.com/page1");
     win = window.open("http://domain.com/page2");
     document.getElementById("test").click();
   }
   function launch(){
     var win = window.open("http://domain.com/page3");
     document.getElementById("test2").click();
   }
   function launch2(){
     var win = window.open("http://domain.com/page4");
   }
</script>

Note that since the <a id="test*"> contents are empty, they won't show up in your document, so your layout stays the same.

Also, note, that the click() method does not exist in Firefox, so you would have to use something like here.

like image 96
Alex Avatar answered Sep 18 '22 12:09

Alex