Ik probeer een URLte openen in een nieuw tabblad, in plaats van een pop-up venster.
Ik heb gerelateerde vragen gezien waarbij de antwoorden er ongeveer zo uit zouden zien:
window.open(url,'_blank');
window.open(url);
Maar geen van alle werkte voor mij, de browser probeerde nog steeds een pop-upvenster te openen.
Antwoord 1, autoriteit 100%
Niets dat een auteur kan doen, kan ervoor kiezen om in een nieuw tabblad te openen in plaats van in een nieuw venster; het is een gebruikersvoorkeur. (Merk op dat de standaard gebruikersvoorkeur in de meeste browsers voor nieuwe tabbladen is, dus een triviale test op een browser waar die voorkeur niet is gewijzigd zal dit niet aantonen.)
CSS3 stelde target-newvoor , maar de specificatie is verlaten.
Het omgekeerdeis niet waar; door bepaalde vensterfuncties voor het venster op te geven in het derde argument van window.open(), kunt u een nieuw venster activeren wanneer de voorkeur uitgaat naar tabbladen.
Antwoord 2, autoriteit 96%
Dit is een truc,
function openInNewTab(url) {
window.open(url, '_blank').focus();
}
//or just
window.open(url, '_blank').focus();
In de meeste gevallen zou dit rechtstreeks in de onclick-handler voor de link moeten gebeuren om pop-upblokkeringen en het standaard “nieuw venster”-gedrag te voorkomen. Je zou het op deze manier kunnen doen, of door een gebeurtenislistener toe te voegen aan je DOM-object.
<div onclick="openInNewTab('www.test.com');">Something To Click On</div>
http://www.tutsplanet.com/open-url -new-tab-using-javascript/
Antwoord 3, autoriteit 38%
window.open()wordt niet geopend in een nieuw tabblad als dit niet gebeurt tijdens de daadwerkelijke klikgebeurtenis. In het gegeven voorbeeld wordt de URL geopend op de daadwerkelijke klikgebeurtenis. Dit werkt op voorwaarde dat de gebruiker de juiste instellingen in de browser heeft.
<a class="link">Link</a>
<script type="text/javascript">
$("a.link").on("click",function(){
window.open('www.yourdomain.com','_blank');
});
</script>
Als je een Ajax-aanroep probeert te doen binnen de klikfunctie en een venster op succes wilt openen, zorg er dan voor dat je de Ajax-aanroep doet met de optie async : falseingesteld.
Antwoord 4, autoriteit 27%
function openInNewTab(href) {
Object.assign(document.createElement('a'), {
target: '_blank',
href: href,
}).click();
}
Het maakt een virtueel a-element, geeft het target=”_blank” zodat het in een nieuw tabblad wordt geopend, geeft het de juiste url href en klikt erop.
en dan kun je het gebruiken als:
openInNewTab("https://google.com");
Belangrijke opmerking:
openInNewTab(evenals elke andere oplossing op deze pagina) moet worden aangeroepen tijdens de zogenaamde ‘trusted event’ callback – bijv. tijdensklikgebeurtenis (niet nodig in terugbelfunctie direct, maar tijdens klikactie). Anders wordt het openen van een nieuwe pagina geblokkeerd door de browser
Als u het op een willekeurig moment handmatig aanroept (bijv. binnen een interval of na serverreactie) – kan het worden geblokkeerd door de browser (wat logisch is omdat het een beveiligingsrisico is en kan leiden tot een slechte gebruikerservaring )
Antwoord 5, autoriteit 24%
window.openKan pop-ups niet betrouwbaar openen in een nieuw tabblad in alle browsers
Verschillende browsers implementeren het gedrag vanwindow.openop verschillende manieren, vooral met betrekking tot de browservoorkeuren van een gebruiker.U kunt niet verwachten dat de hetzelfde gedrag voor window.openom waar te zijn in heel Internet Explorer, Firefox en Chrome, vanwege de verschillende manieren waarop ze omgaan met de browservoorkeuren van een gebruiker.
Gebruikers van Internet Explorer (11) kunnen er bijvoorbeeld voor kiezen om pop-ups in een nieuw venster of een nieuw tabblad te openen, u kunt Internet Explorer 11-gebruikers niet dwingen om pop-ups op een bepaalde manier te openenwindow.open, zoals vermeld in Quentins antwoord.
Voor gebruikers van Firefox (29) geldt dat het gebruik van window.open(url, '_blank')afhankelijk is van de tabvoorkeuren van hun browser,hoewel u ze nog steeds kunt dwingen om open pop-ups in een nieuw venster door een breedte en hoogte op te geven (zie het gedeelte ‘Hoe zit het met Chrome?’ hieronder).
Demonstratie
Ga naar de instellingen van uw browser en configureer deze om pop-ups in een nieuw venster te openen.
Internet Explorer (11)
Testpagina
Nadat Internet Explorer (11) is ingesteld om pop-ups in een nieuw venster te openen, zoals hierboven aangetoond, gebruikt u de volgende testpagina om window.opente testen:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
<code>window.open(url)</code>
</button>
<button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
<code>window.open(url, '_blank')</code>
</button>
</body>
</html>
Houd er rekening mee dat de pop-ups in een nieuw venster worden geopend, niet in een nieuw tabblad.
U kunt de bovenstaande fragmenten ook testen in Firefox (29) met de tabvoorkeur ingesteld op nieuwe vensters, en dezelfde resultaten zien.
Hoe zit het met Chrome? Het implementeert window.openanders dan Internet Explorer (11) en Firefox (29).
Ik weet het niet 100% zeker, maar het lijkt erop dat Chrome (versie 34.0.1847.131 m) geen instellingen heeft die de gebruiker kan gebruiken om te kiezen of hij pop-ups wil openen of niet in een nieuw venster of een nieuw tabblad (zoals Firefox en Internet Explorer hebben). Ik heb de Chrome-documentatie voor het beheren van pop-upsgecontroleerd, maar dat deed het’ noem maar niets over dat soort dingen.
Ook nogmaals lijken verschillende browsers het gedrag vanwindow.openanders te implementeren.In Chrome en Firefox, het specificeren van een breedte en hoogte zal een pop-up forceren,zelfs wanneer een gebruiker Firefox (29) heeft ingesteld om nieuwe vensters te openen in een nieuw tabblad (zoals vermeld in de antwoorden op JavaScript opent in een nieuw venster, niet in tabblad):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
<code>window.open(url)</code>
</button>
</body>
</html>
Hetzelfde codefragment hierboven zal echter altijd een nieuw tabblad openen in Internet Explorer 11 als gebruikers tabbladen instellen als hun browservoorkeuren,zelfs het opgeven van een breedte en hoogte zal een nieuw venster forceren pop-up voor hen.
Dus het gedrag van window.openin Chrome lijkt te zijn om pop-ups in een nieuw tabblad te openen wanneer ze worden gebruikt in een onclick-gebeurtenis, om ze in nieuwe vensters te openen wanneer gebruikt vanuit de browserconsole (zoals opgemerkt door andere mensen), en om ze in nieuwe vensters te openen wanneer gespecificeerd met een breedte en een hoogte.
Samenvatting
Verschillende browsers implementeren het gedrag vanwindow.openanders met betrekking tot de browservoorkeuren van gebruikers.U kunt niet hetzelfde gedrag verwachten voor window.opengeldt voor heel Internet Explorer, Firefox en Chrome, vanwege de verschillende manieren waarop ze omgaan met de browservoorkeuren van een gebruiker.
Aanvullende lezing
Antwoord 6, autoriteit 9%
Als u window.open(url, '_blank')gebruikt, wordt deze geblokkeerd (pop-upblokkering) in Chrome.
Probeer dit:
//With JQuery
$('#myButton').click(function () {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
});
Met puur JavaScript,
document.querySelector('#myButton').onclick = function() {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
};
Antwoord 7, autoriteit 7%
Om het antwoord van Steven Spielberg uit te werken, deed ik dit in zo’n geval:
$('a').click(function() {
$(this).attr('target', '_blank');
});
Op deze manier, net voordat de browser de link volgt, stel ik het doelkenmerk in, zodat de link wordt geopend in een nieuw tabblad of venster (afhankelijk van de instellingen van de gebruiker).
Voorbeeld van één regel in jQuery:
$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.
Dit kan ook worden bereikt door alleen native browser DOM API’s te gebruiken:
document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
Antwoord 8, autoriteit 7%
Ik gebruik het volgende en het werkt heel goed!
window.open(url, '_blank').focus();
Antwoord 9, autoriteit 2%
Ik denk dat je dit niet onder controle hebt. Als de gebruiker zijn browser had ingesteld om links in een nieuw venster te openen, kun je dit niet forceren om links in een nieuw tabblad te openen.
JavaScript wordt geopend in een nieuw venster, niet in een tabblad
Antwoord 10, autoriteit 2%
Interessant feit is dat het nieuwe tabblad niet kan worden geopend als de actie niet wordt aangeroepen door de gebruiker (door op een knop of zoiets te klikken) of als het asynchroon is, bijvoorbeeld, dit wordt NIET geopend in een nieuw tabblad:
p>
$.ajax({
url: "url",
type: "POST",
success: function() {
window.open('url', '_blank');
}
});
Maar dit kan in een nieuw tabblad worden geopend, afhankelijk van de browserinstellingen:
$.ajax({
url: "url",
type: "POST",
async: false,
success: function() {
window.open('url', '_blank');
}
});
Antwoord 11
Als u de parameters [strWindowFeatures] gewoon weglaat, wordt een nieuw tabblad geopend, TENZIJ de browserinstelling voorrang heeft (browserinstelling overtreft JavaScript).
Nieuw venster
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
Nieuw tabblad
var myWin = window.open(strUrl, strWindowName);
— of —
var myWin = window.open(strUrl);
Antwoord 12
(function(a){
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
return e
}(document.createEvent('MouseEvents'))))}(document.createElement('a')))
Antwoord 13
Dit heeft niets te maken met browserinstellingenals u een nieuw tabblad probeert te openen vanuit een aangepaste functie.
Op deze pagina opent u een JavaScript-console en typt u:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
En het zal proberen een pop-up te openen, ongeacht je instellingen, omdat de ‘klik’ afkomstig is van een aangepaste actie.
Om je te gedragen als een echte ‘muisklik’ op een link, moet je het advies van @spirinvladimirvolgen en echtmaak het:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
return e
}(document.createEvent('MouseEvents'))));
Hier is een compleet voorbeeld (probeer het niet op jsFiddleof vergelijkbare online editors, want u van daaruit doorverwijst naar externe pagina’s):
<!DOCTYPE html>
<html>
<head>
<style>
#firing_div {
margin-top: 15px;
width: 250px;
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<a id="my_link" href="http://www.google.com"> Go to Google </a>
<div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
function fire_custom_click() {
alert("firing click!");
document.getElementById("my_link").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
0, 0, 0, 0, 0, /* detail, screenX, screenY, clientX, clientY */
false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
0, null); /* button, relatedTarget */
return e
}(document.createEvent('MouseEvents'))));
}
document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>
Antwoord 14
Je kunt een truc gebruiken met form:
$(function () {
$('#btn').click(function () {
openNewTab("http://stackoverflow.com")
return false;
});
});
function openNewTab(link) {
var frm = $('<form method="get" action="' + link + '" target="_blank"></form>')
$("body").append(frm);
frm.submit().remove();
}
15
function openTab(url) {
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
document.body.appendChild(link);
link.click();
link.remove();
}
16
Of u de URL opent in een nieuw tabblad of een nieuw venster, wordt daadwerkelijk bestuurd door de browservoorkeuren van de gebruiker. Er is geen manier om het in JavaScript te negeren.
window.open()gedraagt zich anders, afhankelijk van hoe het wordt gebruikt. Als het wordt opgeroepen als een direct resultaat van een gebruikersactie , laat ons dan zeggen dat een knop klik, het moet prima werken en een nieuw tabblad (of venster) opent:
const button = document.querySelector('#openTab');
// add click event listener
button.addEventListener('click', () => {
// open a new tab
const tab = window.open('https://attacomsian.com', '_blank');
});
Als u echter probeert een nieuw tabblad uit een AKAX-verzoek terug te roepen , blokkeert de browser het aangezien het geen directe gebruikersactie was.
Om de pop-upblokkering te omzeilenen een nieuw tabblad te openen vanuit een callback, is hier een kleine hack:
const button = document.querySelector('#openTab');
// add click event listener
button.addEventListener('click', () => {
// open an empty window
const tab = window.open('about:blank');
// make an API call
fetch('/api/validate')
.then(res => res.json())
.then(json => {
// TODO: do something with JSON response
// update the actual URL
tab.location = 'https://attacomsian.com';
tab.focus();
})
.catch(err => {
// close the empty window
tab.close();
});
});
Antwoord 17
JQuery
$('<a />',{'href': url, 'target': '_blank'}).get(0).click();
JS
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
Antwoord 18
Of u kunt gewoon een linkelement maken en erop klikken…
var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);
Dit mag niet worden geblokkeerd door pop-upblokkers… Hopelijk.
Antwoord 19
Er is een antwoord op deze vraag en het is geen nee.
Ik heb een gemakkelijke oplossing gevonden:
Stap 1: Maak een onzichtbare link:
<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>
Stap 2: Klik programmatisch op die link:
document.getElementById("yourId").click();
Hier ga je! Werkt een charme voor mij.
Antwoord 20
Gebruik geen target=”_blank”
Gebruik altijd een specifieke naam voor dat venster in mijn geval meaningfulName, in dit geval bespaar je processorresource:
button.addEventListener('click', () => {
window.open('https://google.com', 'meaningfulName')
})
Op deze manier, wanneer u bijvoorbeeld 10 keer op de knop klikt, zal de browser deze altijd opnieuw weergeven in één nieuw tabblad, in plaats van het in 10 verschillende tabbladen te openen, wat veel meer bronnen zal verbruiken.
Je kunt hier meer over lezen op MDN.
Antwoord 21
Ik heb veel informatie opgezocht over hoe je een nieuw tabblad kunt openen en op hetzelfde tabblad kunt blijven. Ik heb een kleine truc gevonden om het te doen.
Laten we aannemen dat u een url heeft die u moet openen – newUrlen oude url – currentUrl, die u moet behouden nadat een nieuw tabblad is geopend.
JS-code ziet er ongeveer zo uit:
// init urls
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
// open window with url of current page, you will be automatically moved
// by browser to a new opened tab. It will look like your page is reloaded
// and you will stay on same page but with new page opened
window.open(currentUrl , '_blank');
// on your current tab will be opened new url
location.href = newUrl;
Antwoord 22
Hoe zit het met het maken van een <a>met _blankals targetattribuutwaarde en de urlals href, met stijlweergave:verborgen met een kinderelement? Voeg vervolgens toe aan de DOM en activeer vervolgens de klikgebeurtenis op een onderliggend element.
UPDATE
Dat werkt niet. De browser voorkomt het standaardgedrag. Het kan programmatisch worden geactiveerd, maar het volgt niet het standaardgedrag.
Controleer en ontdek het zelf: http://jsfiddle.net/4S4ET/
Antwoord 23
Dit kan een hack zijn, maar als u in Firefox een derde parameter opgeeft, ‘fullscreen=yes’, wordt er een nieuw nieuw venster geopend.
Bijvoorbeeld
<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>
Het lijkt de browserinstellingen te overschrijven.
Antwoord 24
Het openen van een nieuw tabblad vanuit een Firefox (Mozilla) extensie gaat als volgt:
gBrowser.selectedTab = gBrowser.addTab("http://example.com");
Antwoord 25
Deze manier is vergelijkbaar met de bovenstaande oplossing, maar anders geïmplementeerd
.social_icon -> wat klasse met CSS
<div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>
$('.social_icon').click(function(){
var url = $(this).attr('data-url');
var win = window.open(url, '_blank'); ///similar to above solution
win.focus();
});
26
De window.open(url)wordt URL geopend in het tabblad Nieuw browser. Hiertoe js alternatief voor het
let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it
Hier werkt u voorbeeld (Stackoverflow-fragmenten die niet toestaan om het nieuwe tabblad te openen)
27
Er zijn veel antwoordkopieën die suggereren met behulp van “_blank” als het doel, maar ik vond dat dit niet werkte. Zoals Prakash-opmerkingen, is het aan de browser. U kunt echter bepaalde suggesties doen aan de browser, zoals of het venster een locatiebalk moet hebben.
Als u voldoende “tab-achtige dingen” voorstelt u mogelijk een tabblad krijgen, Zoals het antwoord van Nico op deze meer specifieke vraag voor Chrome :
window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');
Disclaimer: dit is geen wondermiddel. Het is nog steeds aan de gebruiker en browser. Nu heb je in ieder geval nog een voorkeur opgegeven voor hoe je je venster eruit wilt laten zien.
Antwoord 28
Ik ben het enigszins eens met de persoon die schreef (hier geparafraseerd): “Voor een link in een bestaande webpagina zal de browser de link altijd openen in een nieuw tabblad als de nieuwe pagina deel uitmaakt van dezelfde website als de bestaande webpagina.” Voor mij werkt deze “algemene regel” in ieder geval in Chrome, Firefox, Opera, IE, Safari, SeaMonkey en Konqueror.
Hoe dan ook, er is een minder gecompliceerde manier om te profiteren van wat de andere persoon heeft gepresenteerd. Ervan uitgaande dat we het hebben over uw eigen website (“thissite.com” hieronder), waar u wilt bepalen wat de browser doet, dan wilt u hieronder dat “specialpage.htm” LEEG is, helemaal geen HTML ( bespaart tijd bij het verzenden van gegevens vanaf de server!).
var wnd, URL; //global variables
//specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
//if the "general rule" above is true, a new tab should have been opened.
URL = "http://www.someothersite.com/desiredpage.htm"; //ultimate destination
setTimeout(gotoURL(),200); //wait 1/5 of a second; give browser time to create tab/window for empty page
function gotoURL()
{ wnd.open(URL, "_self"); //replace the blank page, in the tab, with the desired page
wnd.focus(); //when browser not set to automatically show newly-opened page, this MAY work
}
Antwoord 29
Als je alleen de externe links wilt openen (links die naar andere sites gaan), dan werkt dit stukje JavaScript/jQuery goed:
$(function(){
var hostname = window.location.hostname.replace('www.', '');
$('a').each(function(){
var link_host = $(this).attr('hostname').replace('www.', '');
if (link_host !== hostname) {
$(this).attr('target', '_blank');
}
});
});