Open Link/URL in Same Tab/Window or New Tab in HTML & JS

lakshmi, Credit to volkotech-solutions Oct 30

In HTML, utilizing the target="_blank" attribute ensures that the link opens in a new tab.

In JavaScript, if you want to open a link in the same tab or window, you can do so by setting window.location to the new URL, effectively replacing the current page. On the other hand, to open a link in a new tab, you can utilize the window.open() method and specify the target as "_blank".

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Open Link in Same Tab/Window or in New Tab</title>
</head>
<body>
    <p>Click the link below to open it in the same tab/window:</p>
    <a href="https://mycode.blog/">Blog Website</a>
    <p>Click the link below to open it in the New Tab:</p>
    <a href="https://mycode.blog/" target="_blank">Blog Website</a>
</body>
</html>

indexjs.html

<!DOCTYPE html>
<html>
<head>
    <title>Open Link in Same Tab/Window or in New Tab</title>
</head>
<body>
    <script>
 function openLink(url, openInNewTab) {
     if (openInNewTab) {
         window.open(url, "_blank");
     } else {
         window.location.href = url;
     }
 }
 </script>

 <h1>Open Link Example</h1>
    <a href="javascript:void(0);" onclick="openLink('https://mycode.blog/', false)">Blog Website Open in Same Tab</a>
    <a href="javascript:void(0);" onclick="openLink('https://mycode.blog/', true)">Blog Website Open in New Tab</a>
</body>
</html>

21 likes

Add to read list

Comments

Authors

Muna Vijaya Lakshmi

Drupal developer at VolkoTech Solutions

Drupal backend developer having 2+ years of experience in Drupal site development(8 & 9) with Developing Custom modules and Overriding theme concepts.

VolkoTech Solutions

Drupal development company in india

Drupal web development & Consulting company in India.

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Open Link/URL in Same Tab/Window or New Tab in HTML & JS

Comments

Authors

Muna Vijaya Lakshmi

VolkoTech Solutions

Read Next

Altering the User Password Reset Landing Page in Drupal 9/10