Per obrir un URL en una pestanya nova mitjançant JavaScript, utilitzeu el mètode window.open(), proporcionant l'URL com a primer argument i _blank com a segon argument per especificar l'obertura en una pestanya nova. Això activa el navegador per obrir l'URL en una pestanya nova.
Utilitzant el mètode window.open().
- Per obrir una pestanya nova, hem d'utilitzar _en blanc en el segon paràmetre de la mètode window.open(). .
- El valor de retorn de window.open() és una referència a la finestra o pestanya recent creada o nul si ha fallat.
- No hi afegiu un tercer paràmetre, ja que provocarà l'obertura d'una finestra nova en lloc d'una pestanya
Sintaxi:
window.open(URL, '_blank');>
Exemple 1: En aquest exemple, hem utilitzat l'enfocament explicat anteriorment.
HTML
Obre l'URL al títol de la pestanya nova> cap> <body> <p>Feu clic al botó per obrir <b>techcodeview.com b> a la pestanya nova p> <button onclick='NewTab()'>Obriu el botó de Geeksforgeeks><script>function NewTab() { window.open( 'https://www.techcodeview.com, '_blank'); } script> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</strong> </b> </p> <img src='//techcodeview.com/img/picked/09/how-open-url-new-tab-using-javascript.webp' alt="nova pestanya"><h2><span>Utilitzant l'element d'ancoratge (HTML DOM</span></h2> <p><span>L'ús de l'element d'ancoratge (HTML DOM) implica crear un element 'a' de manera dinàmica, establir el seu atribut href a l'URL desitjat i el seu atribut target a _blank. Finalment, activar un esdeveniment de clic a l'element s'obre l'URL en una pestanya nova.</span></p> <p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>En aquest exemple creem un botó per obrir techcodeview.com en una pestanya nova. En fer clic, genera dinàmicament un element 'a' amb l'URL desitjat i l'objectiu _blank, activant un esdeveniment de clic per obrir l'enllaç en una pestanya nova.</span></p>HTML<code class='hljs'> <pre class='hljs'><html> <head> <title>Obre l'URL al títol de la pestanya nova> cap> <body> <p>Feu clic al botó per obrir <b>techcodeview.com b> a la pestanya nova p> <button onclick='NewTab()'>Obriu el botó de Geeksforgeeks><script>function NewTab() { let newTab = document.createElement('a'); newTab.href = 'https://www.techcodeview.com; newTab.target = '_blank'; newTab.click(); } script> body> html>>></pre> </code> <p dir='ltr'><span>Sortida:</span></p> <img src='//techcodeview.com/img/picked/09/how-open-url-new-tab-using-javascript-2.webp' alt="nova pestanya"><h3> <b> <strong>Navegadors compatibles</strong> </b> </h3><p dir='ltr'><span>Els navegadors són compatibles amb el</span> <b> <strong>window.open()</strong> </b> <span>mètode s'enumeren a continuació:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Edge</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Òpera</span> </li><li value='5'> <span>Safari</span> </li></ul> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/cpu-scheduling/">Programació De La Cpu</a> </li><li> <a href="/hadoop-tutorial/">Tutorial Hadoop</a> </li><li> <a href="/hash/">Hash</a> </li><li> <a href="/techtips/">Consells tècnics</a> </li><li> <a href="/category/">Categoria</a> </li><li> <a href="/java-list-methods/">Mètodes De Llista De Java</a> </li><li> <a href="/excel-how/">Excel-Com</a> </li><li> <a href="/java-jdbc/">Java Jdbc</a> </li><li> <a href="/algo-geek-2021-cat/">Alguna Cosa-Geek 2021</a> </li><li> <a href="/chatgpt/">Chatgpt</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Linux Set Variable d'entorn</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Variable d'entorn del conjunt de Linux amb exemples sobre fitxers, directoris, permís, còpia de seguretat, ls, man, pwd, cd, linux, introducció de Linux, chmod, man, shell, pipes, filtres, regex, vi, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/linux-set-environment-variable"> <i class="fa fa-external-link"></i> Llegir Més</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articles D'Interès</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/quickselect-algorithm">Algoritme de selecció ràpida</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ankita-dave">Ankita Dave</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/getchar-function-c">Funció getchar en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/10-biggest-malls-canada">Els 10 centres comercials més grans del Canadà</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/11-types-bees-you-should-know-131360">Els 11 tipus d'abelles que hauríeu de conèixer</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Entrades Populars</h2>
<div class="content">
<ul class="list"> <li><a href="/how-convert-byte-array-string-java">matriu de bytes java a cadena</a>
</li><li><a href="/how-download-youtube-video-vlc-media-player">descarregar vídeo de youtube vlc</a>
</li><li><a href="/ascii-table-c">taula ascii al c</a>
</li><li><a href="/how-split-strings-c">divisió de cadenes en c++</a>
</li><li><a href="/java-arraylist">arraylist java</a>
</li><li><a href="/c-programs">c programes d'exemple de programació</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Tots Els Drets Reservats | <a href="//no.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>