Om een URL op een nieuw tabblad te openen met JavaScript, gebruikt u de methode window.open(), waarbij u de URL als eerste argument opgeeft en _blank als tweede argument om het openen op een nieuw tabblad aan te geven. Dit zorgt ervoor dat de browser de URL in een nieuw tabblad opent.
Met behulp van de methode window.open().
- Om een nieuw tabblad te openen, moeten we gebruiken _blanco in de tweede parameter van de window.open() methode .
- De geretourneerde waarde van window.open() is een verwijzing naar het nieuw gemaakte venster of tabblad, of null als dit mislukt.
- Voeg er geen derde parameter aan toe, aangezien dit zal resulteren in het openen van een nieuw venster in plaats van een tabblad
Syntaxis:
window.open(URL, '_blank');>
Voorbeeld 1: In dit voorbeeld hebben we de hierboven uitgelegde aanpak gebruikt.
HTML
Open de URL in de titel van een nieuw tabblad> hoofd> <body> <p>Klik op de knop om te openen <b>techcodeview.com b> in nieuw tabblad p> <button onclick='NewTab()'>Open de Geeksforgeeks-knop><script>function NewTab() { window.open( 'https://www.techcodeview.com, '_blank'); } script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/picked/09/how-open-url-new-tab-using-javascript.webp' alt="nieuw tabblad"><h2><span>Met behulp van het ankerelement (HTML DOM</span></h2> <p><span>Het gebruik van het ankerelement (HTML DOM) houdt in dat er dynamisch een ‘a’-element wordt gemaakt, waarbij het href-attribuut wordt ingesteld op de gewenste URL en het target-attribuut op _blank. Ten slotte wordt door het activeren van een klikgebeurtenis op het element de URL op een nieuw tabblad geopend.</span></p> <p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>In dit voorbeeld maken we een knop om techcodeview.com in een nieuw tabblad te openen. Na klikken genereert het dynamisch een ‘a’-element met de gewenste URL en _blank-doel, waardoor een klikgebeurtenis wordt geactiveerd om de link op een nieuw tabblad te openen.</span></p>HTML<code class='hljs'> <pre class='hljs'><html> <head> <title>Open de URL in de titel van een nieuw tabblad> hoofd> <body> <p>Klik op de knop om te openen <b>techcodeview.com b> in nieuw tabblad p> <button onclick='NewTab()'>Open de Geeksforgeeks-knop><script>functie NewTab() { let newTab = document.createElement('a'); newTab.href = 'https://www.techcodeview.com; newTab.target = '_blank'; nieuwTab.klik(); } script> body> html>></pre> </code> <p dir='ltr'><span>Uitgang:</span></p> <img src='//techcodeview.com/img/picked/09/how-open-url-new-tab-using-javascript-2.webp' alt="nieuw tabblad"><h3> <b> <strong>Ondersteunde browsers</strong> </b> </h3><p dir='ltr'><span>De browsers worden ondersteund door de</span> <b> <strong>venster.open()</strong> </b> <span>methode vindt u hieronder:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Rand</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Opera</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-numpy-ndarray/">Python Numpy-Ndarray</a> </li><li> <a href="/image-tools/">Beeldhulpmiddelen</a> </li><li> <a href="/jquery-methods/">Jquery-Methoden</a> </li><li> <a href="/cell-signaling/">Cel-Signalering</a> </li><li> <a href="/cpp-oops/">Cpp-Oop's</a> </li><li> <a href="/python-requests/">Python-Verzoeken</a> </li><li> <a href="/cpu-scheduling/">Cpu-Planning</a> </li><li> <a href="/java-throwable-class/">Java Throwable-Klasse</a> </li><li> <a href="/java-abstract-class/">Java-Abstracte Klasse En Interface</a> </li><li> <a href="/cpp-pointer/">Cpp-Aanwijzer</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">Hoe centreer ik een tabel in CSS?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Een tabel centreren in CSS met CSS-tutorial, bijvoorbeeld over inline, hover, selector, achtergrond, rand, weergave, zwevend, lettertype, marge, dekking, overloop, opvulling, positie etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-center-table-css"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/introduction-object-oriented-programming">Introductie van objectgeoriënteerd programmeren</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/divya-bharti">Divya Bharti</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/typescript-date-object">TypeScript-datumobject</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-get-good-community-service-letter-1311442">Hoe u een goede taakstrafbrief krijgt: 4 stappen om te volgen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-write-stand-outwhy-columbiaessay-1311106">Hoe u een opvallend 'Why Columbia'-essay schrijft</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/c-dictionary-initializer">woordenboekinitialisatie c#</a>
</li><li><a href="/what-is-java">Java-basisprincipes</a>
</li><li><a href="/java-try-catch-block">probeer Java te vangen</a>
</li><li><a href="/verilog-parameters">verilog-parameter</a>
</li><li><a href="/android-easter-egg">wat is android easter egg</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 Alle Rechten Voorbehouden | <a href="//ro.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>