Javascript: Open several URLs with one button click

Question

This thread presented the following code to open a url in a new tab: Programatically open the URL in new tab in chromium browser using javascript

<a href="some url" target="_newtab">content of the anchor</a>

I will have a few checkboxes connected to boolean state variables. From that, a single button click should open several URLs in independent tabs. Is there any way to do that in Javascript/React.js?

Scott Marcus · Answer 1 · 2018-08-12T18:33:11.253

1

First, while target=_newTab will work, it only does so because newTab is meaningless to HTML, so you get the default action, which is to target the URL to a new tab. But, the correct way to do that is to say target=_blank.

And, as a side note, when targetting new, blank windows, make sure to add rel="noopener noreferrer" to your a tags as well to prevent opening up a security hole in your web page.

Now, to open several new tabs, you must use JavaScript and call window.open() several times. Given that this is not normal behavior for an anchor element, I would advise using a different element, like a span to have the user click on.

Note that the following code won't work here in the Stack Overflow code snippet environment because of security restrictions, but it will work in other pages.

document.querySelector(".multipleWindows").addEventListener("click", function(){
  window.open("https://cnn.com");
  window.open("https://hbo.com");
  window.open("https://cbs.com");  
});

.multipleWindows { color:blue; cursor:pointer; }

<span class="multipleWindows">Click to open several windows</span>

edited Aug 12 '18 at 18:33

answered Aug 12 '18 at 18:24

Scott Marcus

64,069
6
49
71

Care to explain the down vote for the correct answer? – Scott Marcus Aug 12 '18 at 18:27
I didn't do it. Sorry regardless, looks like someone ran through this thread and downvoted everything in it (another post too that was deleted) – Sean D Aug 12 '18 at 18:29
Perhaps they want you to add the "_blank" – mplungjan Aug 12 '18 at 18:29
1

@mplungjan I didn't add `_blank` because I didn't use and `a` tag, which I don't believe you should use in a circumstance like this. – Scott Marcus Aug 12 '18 at 18:30
I mean in the window.open like in my answer – mplungjan Aug 12 '18 at 18:30
@mplungjan `window.open()` opens in a new browser tab by default. `_blank` is not needed. – Scott Marcus Aug 12 '18 at 18:34
I tried to find that information but could not. Also you said _But, the correct way to do that is to say target=_blank._ and it does not hurt – mplungjan Aug 12 '18 at 18:36
@mplungjan From **[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)** on the `window name` argument ***if the name doesn't indicate an existing context, a new window is created***. The `target` attribute is an attribute for `a` elements. It has no meaning with `window.open()` – Scott Marcus Aug 12 '18 at 18:39
I disagree it does not have a meaning in window.open, but if a null or missing name parameter works the same as "_blank" then it could be left out. I always use the ;ink's target attribute in the window.open - to reuse the window if the target is not _blank – mplungjan Aug 12 '18 at 18:46
@mplungjan I think you are confusing the `target` attribute of an `` with the `name` argument of the `window.open()` method call. `target` is not used with `window.open()`. While they both can be used to achieve the same goal, they are two separate pathways and are not interchangeable. – Scott Marcus Aug 12 '18 at 18:49
I certainly do not confuse anything. The target attribute of a link or a form will set the name property of the window/tab opened. That can be used with you open a popup or tab and then submit a form or click a link with the target of the named window – mplungjan Aug 12 '18 at 18:55
I don't think I'm explaining myself clearly enough. `target` is the actual name of an HTML attribute. It has no place or meaning with `window.open()`. The `name` argument is what it's called there. It is incorrect to say `target` when talking about `window.open()`. I'm talking about the terminology you've been using. – Scott Marcus Aug 12 '18 at 18:58
Where did I say the word `target` in relation to the window.open? PS: My example http://jsfiddle.net/mplungjan/rh0a528u/ – mplungjan Aug 12 '18 at 19:03
I wanted to test window.open using .forEach on an array with the target URLs. It only opened the first site. Isn't forEach the same as calling window.open multiple times? Here's how I wrote it: `sites_to_open.forEach((social_media_site) => { window.open(social_media_site); }` – Sean D Aug 12 '18 at 20:07
@SeanDezoysa You are missing `);` (to close out the `forEach()` call) at the very end of your line of code. Add that and it will work. – Scott Marcus Aug 12 '18 at 20:37
My mistake, I had it right in the actual code (page didn't break either) but didn't copy it correctly here. It doesn't work with the closing ); either. Only the first page opens in a new tab, others are completely ignored: `sites_to_open.forEach((social_media_site) => { window.open(social_media_site); })` Logging sites_to_open correctly shows all 5 target urls. – Sean D Aug 13 '18 at 07:16
@SeanDezoysa It's got to be a different issue. When I try it with that code, it works just fine. – Scott Marcus Aug 13 '18 at 22:41

mplungjan · Answer 2 · 2018-08-12T18:43:42.917

You mean

document.querySelector("#myLink").onclick=function(e) {
  document.querySelectorAll(".myCheck").forEach(function() {
    if (this.checked) window.open(this.getAttribute("data-href"),"_blank");
  }
}

having

<a href="#" id="myLink">Click</a>
<input class="myCheck" type="checkbox" data-href="page1.html">Page 1<br/>
<input class="myCheck" type="checkbox" data-href="page2.html">Page 2<br/>
<input class="myCheck" type="checkbox" data-href="page3.html">Page 3<br/>

score 0 · Answer 3 · answered Aug 12 '18 at 18:40

What about creating new DOM a elements with attribute target="_blank" and trigger click on it?

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button id="button">Click me</button>
        <script type="text/javascript">
        var urls = ['https://google.com/', 'https://stackoverflow.com/'];

        var $button = document.getElementById("button");

        $button.addEventListener("click", function() {
            for(i in urls) {
                var url = urls[i];
                var $a = document.createElement("a");
                $a.setAttribute("href", url);
                $a.setAttribute("target", "_blank");
                $a.click();
            }
        });
        </script>
    </body>
</html>

FYI: In general, preferencing a variable with a `$` is usually an indicator that the variable holds a reference to a JQuery object. Also, if you are going to use an `a` to open new windows, you need to also be setting `rel=noopener` to prevent a security hole. — Scott Marcus, Aug 12 '18 at 18:47

Javascript: Open several URLs with one button click

3 Answers3