{"id":134115,"date":"2023-06-21T05:10:31","date_gmt":"2023-06-21T05:10:31","guid":{"rendered":"https:\/\/phppot.com\/?p=21003"},"modified":"2023-06-21T05:10:31","modified_gmt":"2023-06-21T05:10:31","slug":"javascript-how-to-open-url-in-new-tab","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2023\/06\/21\/javascript-how-to-open-url-in-new-tab\/","title":{"rendered":"JavaScript \u2013 How to Open URL in New Tab"},"content":{"rendered":"
\n
by Vincy<\/a>. Last modified on June 25th, 2023.<\/div>\n

Web pages contain external links that open URLs in a new tab. For example, Wikipedia articles show links to open the reference sites in a new tab. This is absolutely for beginners.<\/p>\n

There are three ways to open a URL in a new tab.<\/p>\n

    \n
  1. HTML anchor tags with target=_blank<\/em>  attribute.<\/li>\n
  2. JavaScript window.open()<\/em> to set hyperlink and target.<\/li>\n
  3. JavaScript code to create HTML link element.<\/li>\n<\/ol>\n

    HTML anchor tags with target=_blank<\/em>  attribute<\/h2>\n

    This is an HTML basic that you are familiar with. I added the HTML with the required attributes since the upcoming JavaScript example works with this base.<\/p>\n

    <a href=\"https:\/\/www.phppot.com\" target=\"_blank\">Go to Phppot<\/a>\n<\/code><\/pre>\n
    Scenarios of opening URL via JavaScript.<\/h2>\n
    When we need to open a URL on an event basis, it has to be done via JavaScript at run time. For example,<\/p>\n
      \n
    1. Show the PDF in a new tab after clicking generate PDF link. We have already seen how to generate PDFs using JavaScript<\/a>.<\/li>\n
    2. Show product page from the gallery via Javascript to keep track of the shopping history.<\/li>\n<\/ol>\n
      The below two sections have code to learn how to achieve opening URLs in a new tab using JavaScript.<\/p>\n
      \"javascript<\/p>\n
      JavaScript window.open() to set hyperlink and target<\/h2>\n
      This JavaScript one-line code sets the link to open the window.open<\/em> method. The second parameter is to set the target to open the linked URL in a new tab.<\/p>\n
      window.open('https:\/\/www.phppot.com', '_blank').focus();\n<\/code><\/pre>\n
      The above line makes opening a URL and focuses the newly opened tab.<\/p>\n
      JavaScript code to create HTML link element.<\/h2>\n
      This method follows the below steps to open a URL in a new tab via JavaScript.<\/p>\n