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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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><!--//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="/companies-list/">Bedrijvenlijst</a> </li><li> <a href="/bootstrap-5-cat/">Bootstrap 5</a> </li><li> <a href="/acids-bases-salts/">Zuren, Basen En Zouten</a> </li><li> <a href="/log4j-tutorial/">Log4J-Zelfstudie</a> </li><li> <a href="/csharp-file-handling/">Csharp-Bestandsafhandeling</a> </li><li> <a href="/computer-networks-maq/">Computernetwerken-Maq</a> </li><li> <a href="/get-advice/">Vraag Advies</a> </li><li> <a href="/java-character-class/">Java-Tekenklasse</a> </li><li> <a href="/web-scraping/">Web Schrapen</a> </li><li> <a href="/randomized/">Gerandomiseerd</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Wat is pre-med? Belangrijkste vereisten voor de medische school</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Wat is pre-med eigenlijk? Leer hoe u zich kunt voorbereiden op de medische opleiding, inclusief de belangrijkste pre-med vereisten en de beste hoofdvakken om u te helpen naar de medische school te gaan.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-pre-med-key-requirements-131530"> <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="/how-fixplease-stand-while-we-are-checking-your-browserin-chatgpt-error">Hoe u de 'Een ogenblik geduld alstublieft terwijl we uw browser controleren' in de ChatGPT-fout kunt oplossen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/integer-max_value-integer">Integer.MAX_VALUE en Integer.MIN_VALUE in Java met voorbeelden</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/dynamic-memory-allocation-c">Dynamische geheugentoewijzing in C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/list-top-10-major-wars-world">Lijst met de 10 belangrijkste oorlogen ter wereld</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/group-vs-order">GROEPEREN OP versus BESTELLEN OP</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="/javascript-global-variable">globale JavaScript-variabelen</a>
</li><li><a href="/c-int-string">c++ int naar tekenreeks</a>
</li><li><a href="/how-update-java">hoe upgrade ik java</a>
</li><li><a href="/doubly-linked-list">dubbel gelinkte lijst</a>
</li><li><a href="/java-convert-char-string">teken naar tekenreeks</a>
</li><li><a href="/objects-classes-java">wat is obj in java</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>
</body>
</html>