Opening each link in a each new window

Question

I would like to know how to open each link in a each new window (not Tabs).

I have around 4 links and I used the below sort of code.

<a href="Images\Chapter1.pdf"
onclick="window.open(this.href, 'new window','width=1000,height=600'); return false;">

I have 4 links and the above code works to some extent.

When I press any of these 4 links then a new window is going to open the pdf document but when I click on the 2nd link then the opened window is changing it's content to 2nd pdf but I would like to have two new short windows with the content but not only one new window changing it's Content.

(Target="_Blank" will open the content in a new tab but not in a new window).

Let me know how to overcome this issue.

Might be due to the browser. Have you tried in other browsers too? As far as I know FF has settings to force the new window into a new tab. I don't know whether other browsers have the same settings or not. — AndrasCsanyi, Sep 24 '15 at 07:39
Double post.... http://stackoverflow.com/questions/12939928/make-a-link-open-a-new-window-not-tab — Ronald van Meer, Sep 24 '15 at 07:40
Sorry, I hadn't tried it in any other browser. Am using IE 11 — Novice, Sep 24 '15 at 07:41
It works fine everywhere with default options. Even in IE11. Myabe use different window name? — Salar, Sep 24 '15 at 07:48

mplungjan · Answer 1 · 2015-09-24T08:16:18.877

Try this (note will not work inside SO's editor) - the code will give a new name to each window:

var wins = [];
window.onload = function() {
  var links = document.querySelectorAll(".pdfLink");
  for (var i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      var idx = wins.length;
      wins[idx] = window.open(this.href, 'newwindow' + idx, 'width=1000,height=600');
      return false;
    }
  }
}

<a href="Images\Chapter1.pdf" class="pdfLink">PDF1</a>
<a href="Images\Chapter2.pdf" class="pdfLink">PDF2</a>
<a href="Images\Chapter3.pdf" class="pdfLink">PDF3</a>
<a href="Images\Chapter4.pdf" class="pdfLink">PDF4</a>

If you want to allow the page to open even if there is a popup blocker, try this:

var wins = [];
window.onload = function() {
  var links = document.querySelectorAll(".pdfLink");
  for (var i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      var idx = wins.length;
      wins[idx] = window.open(this.href, 'newwindow' + idx, 'width=1000,height=600');
      return wins[idx]?false:true;
    }
  }
}

<a href="Images\Chapter1.pdf" class="pdfLink" target="_blank">PDF1</a>
<a href="Images\Chapter2.pdf" class="pdfLink" target="_blank">PDF2</a>
<a href="Images\Chapter3.pdf" class="pdfLink" target="_blank">PDF3</a>
<a href="Images\Chapter4.pdf" class="pdfLink" target="_blank">PDF4</a>

Also note that you can write

    links[i].onclick = function(e) { 
      e.preventDefault();

and remove the return false - since we use querySelectorAll, the preventDefault is supported in the same browsers

score 1 · Accepted Answer · answered Sep 24 '15 at 07:50

1

You are opening a new window with the name 'new window'. On the second click, you specify the same window.

If you use a new name in each call, they should open in separate windows.

answered Sep 24 '15 at 07:50

d4kris

528
5
11

It worked.. I tried to open them in a same "new window" and now I renamed each of them as "new window1", "new window2" and so on...... Thanks!! – Novice Sep 24 '15 at 08:05

Opening each link in a each new window

2 Answers2