„JavaScript“: URL atidarymas naujuose skirtukuose, o ne iššokančiuose languose

Paul Boyer
2024 m. liepos 13 d., šeštadienis 13:37:52
JavaScript

Kaip atidaryti URL naujuose skirtukuose naudojant „JavaScript“.

Atidaryti URL naujame skirtuke yra įprastas daugelio žiniatinklio kūrėjų reikalavimas. Nors „JavaScript“ metodas `window.open(url, '_blank');` yra plačiai siūlomas, dažnai atsiranda iššokantis langas, o ne naujas skirtukas, o tai gali būti nemalonu.

Šiame straipsnyje nagrinėjami iššūkiai, su kuriais susiduriama bandant atidaryti URL naujame skirtuke, ir pateikiami praktiniai sprendimai, kaip užtikrinti norimą elgesį. Suprasdami naršyklės elgseną ir teisingai naudodami „JavaScript“, galite pasiekti nuoseklių rezultatų įvairiose naršyklėse.

komandą apibūdinimas
<a href="URL" target="_blank"></a> HTML inkaro žyma, naudojama nuorodai atidaryti naujame skirtuke.
window.open(url, '_blank'); JavaScript metodas, skirtas atidaryti naują naršyklės langą arba skirtuką.
win.focus(); „JavaScript“ metodas, skirtas paryškinti naują langą arba skirtuką.
onclick="function()" „JavaScript“ atributas, skirtas paleisti scenarijų spustelėjus elementą.
$('#element').click(function() {...}); jQuery metodas, skirtas susieti įvykių tvarkyklę su elemento paspaudimo įvykiu.
window.open('URL', '_blank').focus(); jQuery kombinuotas metodas, skirtas atidaryti URL naujame skirtuke ir sutelkti dėmesį į jį.

„JavaScript“ metodų, kaip atidaryti URL naujuose skirtukuose, supratimas

Pateikti scenarijai demonstruoja įvairius būdus, kaip atidaryti URL naujuose skirtukuose naudojant JavaScript ir jQuery. Pirmame pavyzdyje naudojama paprasta HTML inkaro žyma su atributu . Tai yra paprasčiausias būdas atidaryti nuorodą naujame skirtuke ir jis priklauso nuo HTML, o ne „JavaScript“. Nustatydami priskirti , naršyklei nurodoma atidaryti nuorodą naujame skirtuke, o ne dabartiniame lange arba naujame lange.

Antrame pavyzdyje naudojamas grynas „JavaScript“ su mygtuko elementu. The metodas vadinamas an prie mygtuko pritvirtintas įvykių tvarkytuvas. Šis metodas programiškai atidaro nurodytą URL naujame skirtuke ir suaktyvina jį su metodas. Šis metodas dažnai naudojamas tais atvejais, kai nuorodas reikia atidaryti naujuose skirtukuose, atsižvelgiant į vartotojo veiksmus, pvz., mygtuko paspaudimą, o ne statines nuorodas HTML.

„jQuery“ naudojimas patobulintam URL tvarkymui naujuose skirtukuose

Trečiame pavyzdyje yra „jQuery“, kad būtų pasiektos panašios funkcijos, naudojant mažiau kodo ir daugiau universalumo. „jQuery“. metodas susieja paspaudimo įvykių tvarkyklę su mygtuku su ID . Spustelėjus mygtuką, vykdoma komanda. Šis metodas apjungia URL atidarymą naujame skirtuke ir naujo skirtuko paryškinimą, panašiai kaip gryno „JavaScript“ pavyzdyje, tačiau suteikia papildomos „jQuery“ sintaksės ir įvykių tvarkymo galimybių.

Naudojant jQuery galima supaprastinti įvykių tvarkymą ir suteikti daugiau lankstumo kūrėjams, ypač kai dirbama su dinamišku turiniu arba keliais elementais, kuriems reikia panašių funkcijų. Apskritai šie pavyzdžiai parodo, kaip efektyviai naudoti HTML, „JavaScript“ ir „jQuery“, kad atidarytumėte URL naujuose skirtukuose, užtikrinant geresnę vartotojo patirtį ir nuoseklų elgesį įvairiose naršyklėse.

URL atidarymas naujuose skirtukuose naudojant „JavaScript“ ir HTML

JavaScript su HTML inkaro žymomis

<!DOCTYPE html>
<html>
<head>
<title>Open URL in New Tab</title>
</head>
<body>
<a href="https://www.example.com" target="_blank">Open Example.com in a new tab</a>
</body>
</html>

„JavaScript“ naudojimas norint programiškai atidaryti URL naujuose skirtukuose

„JavaScript“ kodas, skirtas atidaryti URL naujuose skirtukuose

<!DOCTYPE html>
<html>
<head>
<title>Open URL in New Tab</title>
<script>
function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}
</script>
</head>
<body>
<button onclick="openInNewTab('https://www.example.com')">
  Open Example.com in a new tab
</button>
</body>
</html>

„jQuery“ naudojimas norint atidaryti URL naujuose skirtukuose

jQuery diegimas

<!DOCTYPE html>
<html>
<head>
<title>Open URL in New Tab</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="openTab">Open Example.com in a new tab</button>
<script>
$('#openTab').click(function() {
  window.open('https://www.example.com', '_blank').focus();
});
</script>
</body>
</html>

Išplėstiniai URL atidarymo naujuose skirtukuose būdai

Nors pagrindiniai metodai kaip ir apima daugumą URL atidarymo naujuose skirtukuose scenarijų, reikia apsvarstyti pažangesnius metodus. Vienas iš tokių metodų apima įvykių klausytojų naudojimą ir numatytojo prierašo žymų veiksmo prevenciją. Šis metodas leidžia geriau valdyti naudotojo patirtį ir gali būti ypač naudingas vieno puslapio programose (SPA) arba tvarkant dinaminį turinį.

Kitas aspektas, į kurį reikia atsižvelgti, yra konkrečios naršyklės elgsenos tvarkymas. Skirtingos naršyklės gali interpretuoti komandą kitaip, kartais vietoj naujo skirtuko atsiranda naujas langas. Norėdami tai išspręsti, kūrėjai gali naudoti funkcijų aptikimą ir sąlygiškai taikyti metodus, pagrįstus vartotojo naršykle. Tai užtikrina nuoseklią patirtį įvairiose aplinkose. Be to, labai svarbu valdyti iššokančiųjų langų blokatorius, nes daugelis naršyklių blokuoja iššokančiuosius langus pagal numatytuosius nustatymus, o tai gali trukdyti atidaryti naujus skirtukus.

Dažnai užduodami klausimai apie URL atidarymą naujuose skirtukuose

  1. Kaip užtikrinti, kad URL būtų atidarytas naujame skirtuke, o ne naujame lange?
  2. Naudokite ir įsitikinkite, kad iššokančiųjų langų blokatoriai netrukdo.
  3. Ar galiu atidaryti URL naujame skirtuke be vartotojo sąveikos?
  4. Daugelis naršyklių tai blokuoja saugumo sumetimais. Būtina naudotojo sąveika, pvz., mygtuko paspaudimas.
  5. Kaip elgtis su naršyklėmis, kurios blokuoja iššokančiuosius langus?
  6. Informuokite vartotojus, kad jie išjungtų iššokančiųjų langų blokavimo priemones arba įtrauktų jūsų svetainę į išimčių sąrašą.
  7. Koks skirtumas tarp ir ?
  8. yra nuorodų HTML atributas, o yra JavaScript metodas dinaminiams veiksmams.
  9. Kaip naudoti „jQuery“, kad atidaryčiau URL naujame skirtuke?
  10. Susiekite paspaudimo įvykį naudodami
  11. Ar galiu vienu metu atidaryti kelis URL naujuose skirtukuose?
  12. Taip, paskambinus kelis kartus kilpoje arba atskirų funkcijų iškvietimų metu.
  13. Kodėl taip kartais vietoj skirtuko atidaryti naują langą?
  14. Tai gali sukelti naršyklės nustatymai ir elgsena. Išbandykite skirtingose ​​naršyklėse ir atitinkamai pakoreguokite.
  15. Kaip įsitikinti, kad naujas skirtukas sufokusuotas?
  16. Naudokite po to kad skirtukas būtų į pirmą planą.

„JavaScript“ metodų, skirtų URL atidarymui naujuose skirtukuose, apibendrinimas

Apibendrinant galima pasakyti, kad URL adresus naujuose skirtukuose galima atidaryti įvairiais būdais – nuo ​​paprastų HTML atributų iki pažangesnių „JavaScript“ ir „jQuery“ metodų. Naudojant yra paprasta statinėms nuorodoms, tuo tarpu suteikia dinamišką interaktyvių elementų valdymą. Suprasdami ir įgyvendindami šiuos metodus, kūrėjai gali užtikrinti sklandžią vartotojo patirtį įvairiose naršyklėse ir išspręsti galimas problemas, pvz., iššokančiųjų langų blokavimo priemones.