How to Open All Links in New Tab Using JavaScript

Have you ever tried to download software from a third-party website? When you click on the download button it opens multiple tabs with lots of annoying ads. As a developer, I wonder how they program their website to do so. Well, you won’t believe it’s very easy. In this tutorial, I will show you how to open all links in new tabs using JavaScript.

How to Open All Links at Once as New Tabs

The approach for this is quite simple. We just have to select all the HTML anchor tags that contain the link which we can easily do using document.querySelectorAll, then we have to loop through them using a for or forEach loop and for each link, we have to open a new tab which we can easily do using the line window.open(link.href, ‘_blank’) which basically opens a new tab with the species link present in the href attribute of the anchor tag and _blank specifies that the URL should be opened in a new tab. Let’s implement this in actual code.

Step-by-Step Guide to Open All Links in New Tabs

Suppose we are creating a webpage for programming technologies overview and we have attached references in each technology section. Now we want to open all of them at once as new tabs when a button gets clicked. Let’s quickly create this application.

Step 1: Create a project folder, open it inside a code editor, create an “index.html” file and write the below code.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programming Technologies Overview</title>
</head>

<body>
    <div class="content">
        <h1>What is Node.js?</h1>
        <p>Node.js was developed by Ryan Dahl in 2009. It is a JavaScript runtime built upon the V8 engine that uses
            Javascript for creating the server side. The server created using Node.js can interact with the operating
            system and file system. For more details, visit the
            <a href="https://nodejs.org/en/">official Node.js website</a>.</p>
    </div>
    <div class="content">
        <h1>What is Express.js?</h1>
        <p>Express.js is widely used in the Node.js ecosystem. It is used to build web applications and APIs. It is very
            simple, flexible and easy to use. For more details, visit the <a href="https://expressjs.com/">official
                Express.js website</a>.</p>
    </div>
    <div class="content">
        <h1>What is EJS?</h1>
        <p>EJS is the most popular template engine that allows you to generate HTML markup with pure JavaScript. It
            allows embedded JavaScript templating making it perfect for Node.js applications. It can be used for
            client-side as well as server-side rendering.
            For more details, visit the <a href="https://ejs.co/">official EJS website</a>.</p>
    </div>
    <div class="content">
        <h1>What is npm?</h1>
        <p>NPM stands for Node Package Manager, used to install different Node.js packages. NPM is the core of Node.js,
            it is an online repository of thousands of Node.js packages use for different functions. These packages are
            free to install and can be used in the creation of different types of applications. For more details, visit
            the <a href="https://www.npmjs.com/">official npm website</a>.</p>
    </div>
    <span class="reference-link">Click here to open all links in new tab JavaScript</span>
</body>

</html>

Step 2: Using the <style> tag, let’s add some CSS to our HTML.

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
            background-color: #f9f9f9;
            color: #333;
        }

        h1 {
            color: #333;
            font-size: 2em;
        }

        .content {
            background: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .reference-link {
            display: block;
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            text-align: center;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
        }

        .reference-link:hover {
            background-color: #0056b3;
        }
    </style>

Step 3: Now use the <script> tag to write JavaScriot logic to open all links in new tabs.

    <script>
        function openAllLinks() {
            const links = document.querySelectorAll('.content a');
            links.forEach(link => {
                window.open(link.href, '_blank');
            });
        }
    </script>

This is as I explained in the approach. We created a function openAllLinks() which selects all the anchor tags present inside the class “content”, loops each of them and opens them in a new tab using window.open() method, passing the “href” attribute as an argument that holds the link to open for each anchor tag, and ‘_blank’ to open each in a new tab. And that’s it, our coding is done.

Step 4: Now to trigger this function, link it to the button having the class “reference-link” using the onclick event.

<span class="reference-link" onclick="openAllLinks()">Click here to open all links in new tab JavaScript</span>

Step 5: Now to run the application, open the project folder inside a file explorer and click on the “index.html” file to open it on the browser.

See, every link on our webpage opens as a new tab and not a new window.

Summary

To open all the links in a new tab all we need to do is add a click event and bind window.open(link.href, ‘_blank’) to each link using a loop and that’s it, we are done.

If you are new to JavaScript: