08-21-2023, 10:25 AM
[Tut] JavaScript – How to Open URL in New Tab
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2023/08/javascript-how-to-open-url-in-new-tab.jpg" width="550" height="407" title="" alt="" /></div><div><div id="tutorial" readability="36.900394045534">
<div class="modified-on" readability="7.0697674418605"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on June 25th, 2023.</div>
<p>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>
<p>There are three ways to open a URL in a new tab.</p>
<ol>
<li>HTML anchor tags with <em>target=_blank</em> attribute.</li>
<li>JavaScript <em>window.open()</em> to set hyperlink and target.</li>
<li>JavaScript code to create HTML link element.</li>
</ol>
<h2>HTML anchor tags with <em>target=_blank</em> attribute</h2>
<p>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>
<pre class="prettyprint"><code class="language-html"><a href="https://www.phppot.com" target="_blank">Go to Phppot</a>
</code></pre>
<h2>Scenarios of opening URL via JavaScript.</h2>
<p>When we need to open a URL on an event basis, it has to be done via JavaScript at run time. For example,</p>
<ol>
<li>Show the PDF in a new tab after clicking generate PDF link. We have already seen <a href="https://phppot.com/php/generate-pdf-from-html/">how to generate PDFs using JavaScript</a>.</li>
<li>Show product page from the gallery via Javascript to keep track of the shopping history.</li>
</ol>
<p>The below two sections have code to learn how to achieve opening URLs in a new tab using JavaScript.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-21249" src="https://phppot.com/wp-content/uploads/2023/06/javascript-open-in-new-tab-550x407.jpg" alt="javascript open in new tab" width="550" height="407" srcset="https://phppot.com/wp-content/uploads/2023/06/javascript-open-in-new-tab-550x407.jpg 550w, https://phppot.com/wp-content/uploads/20...00x222.jpg 300w, https://phppot.com/wp-content/uploads/20...68x568.jpg 768w, https://phppot.com/wp-content/uploads/20...ew-tab.jpg 1160w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>JavaScript window.open() to set hyperlink and target</h2>
<p>This JavaScript one-line code sets the link to open the <em>window.open</em> method. The second parameter is to set the target to open the linked URL in a new tab.</p>
<pre class="prettyprint"><code class="language-javascript">window.open('https://www.phppot.com', '_blank').focus();
</code></pre>
<p>The above line makes opening a URL and focuses the newly opened tab.</p>
<h2>JavaScript code to create HTML link element.</h2>
<p>This method follows the below steps to open a URL in a new tab via JavaScript.</p>
<ul>
<li>Create an anchor tag (<a>) by using the <em>createElement()</em> function.</li>
<li>Sets the href and the target properties with the reference of the link object instantiated in step 1.</li>
<li>Trigger the click event of the link element dynamically created via JS.</li>
</ul>
<pre class="prettyprint"><code class="language-javascript">var url = "https://www.phppot.com";
var link = document.createElement("a");
link.href = url;
link.target = "_blank";
link.click();
</code></pre>
<p><strong>Browsers support:</strong> Most modern browsers support the window.open() JavaScript method.</p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/javascript-how-to-open-url-in-new-tab/#top" class="top">↑ Back to Top</a> </p>
</p></div>
<div id="social-icon">
<p>Share this page</p>
</p></div>
</div>
https://www.sickgaming.net/blog/2023/06/...n-new-tab/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2023/08/javascript-how-to-open-url-in-new-tab.jpg" width="550" height="407" title="" alt="" /></div><div><div id="tutorial" readability="36.900394045534">
<div class="modified-on" readability="7.0697674418605"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on June 25th, 2023.</div>
<p>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>
<p>There are three ways to open a URL in a new tab.</p>
<ol>
<li>HTML anchor tags with <em>target=_blank</em> attribute.</li>
<li>JavaScript <em>window.open()</em> to set hyperlink and target.</li>
<li>JavaScript code to create HTML link element.</li>
</ol>
<h2>HTML anchor tags with <em>target=_blank</em> attribute</h2>
<p>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>
<pre class="prettyprint"><code class="language-html"><a href="https://www.phppot.com" target="_blank">Go to Phppot</a>
</code></pre>
<h2>Scenarios of opening URL via JavaScript.</h2>
<p>When we need to open a URL on an event basis, it has to be done via JavaScript at run time. For example,</p>
<ol>
<li>Show the PDF in a new tab after clicking generate PDF link. We have already seen <a href="https://phppot.com/php/generate-pdf-from-html/">how to generate PDFs using JavaScript</a>.</li>
<li>Show product page from the gallery via Javascript to keep track of the shopping history.</li>
</ol>
<p>The below two sections have code to learn how to achieve opening URLs in a new tab using JavaScript.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-21249" src="https://phppot.com/wp-content/uploads/2023/06/javascript-open-in-new-tab-550x407.jpg" alt="javascript open in new tab" width="550" height="407" srcset="https://phppot.com/wp-content/uploads/2023/06/javascript-open-in-new-tab-550x407.jpg 550w, https://phppot.com/wp-content/uploads/20...00x222.jpg 300w, https://phppot.com/wp-content/uploads/20...68x568.jpg 768w, https://phppot.com/wp-content/uploads/20...ew-tab.jpg 1160w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>JavaScript window.open() to set hyperlink and target</h2>
<p>This JavaScript one-line code sets the link to open the <em>window.open</em> method. The second parameter is to set the target to open the linked URL in a new tab.</p>
<pre class="prettyprint"><code class="language-javascript">window.open('https://www.phppot.com', '_blank').focus();
</code></pre>
<p>The above line makes opening a URL and focuses the newly opened tab.</p>
<h2>JavaScript code to create HTML link element.</h2>
<p>This method follows the below steps to open a URL in a new tab via JavaScript.</p>
<ul>
<li>Create an anchor tag (<a>) by using the <em>createElement()</em> function.</li>
<li>Sets the href and the target properties with the reference of the link object instantiated in step 1.</li>
<li>Trigger the click event of the link element dynamically created via JS.</li>
</ul>
<pre class="prettyprint"><code class="language-javascript">var url = "https://www.phppot.com";
var link = document.createElement("a");
link.href = url;
link.target = "_blank";
link.click();
</code></pre>
<p><strong>Browsers support:</strong> Most modern browsers support the window.open() JavaScript method.</p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/javascript-how-to-open-url-in-new-tab/#top" class="top">↑ Back to Top</a> </p>
</p></div>
<div id="social-icon">
<p>Share this page</p>
</p></div>
</div>
https://www.sickgaming.net/blog/2023/06/...n-new-tab/