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 target="_blank". Tai yra paprasčiausias būdas atidaryti nuorodą naujame skirtuke ir jis priklauso nuo HTML, o ne „JavaScript“. Nustatydami target priskirti "_blank", naršyklei nurodoma atidaryti nuorodą naujame skirtuke, o ne dabartiniame lange arba naujame lange.
Antrame pavyzdyje naudojamas grynas „JavaScript“ su mygtuko elementu. The window.open(url, '_blank') metodas vadinamas an onclick prie mygtuko pritvirtintas įvykių tvarkytuvas. Šis metodas programiškai atidaro nurodytą URL naujame skirtuke ir suaktyvina jį su win.focus() 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“. $('#openTab').click(function() {...}); metodas susieja paspaudimo įvykių tvarkyklę su mygtuku su ID openTab. Spustelėjus mygtuką, window.open('https://www.example.com', '_blank').focus(); 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 target="_blank" ir window.open(url, '_blank') 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 window.open 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
- Kaip užtikrinti, kad URL būtų atidarytas naujame skirtuke, o ne naujame lange?
- Naudokite window.open(url, '_blank').focus() ir įsitikinkite, kad iššokančiųjų langų blokatoriai netrukdo.
- Ar galiu atidaryti URL naujame skirtuke be vartotojo sąveikos?
- Daugelis naršyklių tai blokuoja saugumo sumetimais. Būtina naudotojo sąveika, pvz., mygtuko paspaudimas.
- Kaip elgtis su naršyklėmis, kurios blokuoja iššokančiuosius langus?
- Informuokite vartotojus, kad jie išjungtų iššokančiųjų langų blokavimo priemones arba įtrauktų jūsų svetainę į išimčių sąrašą.
- Koks skirtumas tarp target="_blank" ir window.open?
- target="_blank" yra nuorodų HTML atributas, o window.open yra JavaScript metodas dinaminiams veiksmams.
- Kaip naudoti „jQuery“, kad atidaryčiau URL naujame skirtuke?
- Susiekite paspaudimo įvykį naudodami $('#element').click(function() { window.open(url, '_blank').focus(); });
- Ar galiu vienu metu atidaryti kelis URL naujuose skirtukuose?
- Taip, paskambinus window.open kelis kartus kilpoje arba atskirų funkcijų iškvietimų metu.
- Kodėl taip window.open kartais vietoj skirtuko atidaryti naują langą?
- Tai gali sukelti naršyklės nustatymai ir elgsena. Išbandykite skirtingose naršyklėse ir atitinkamai pakoreguokite.
- Kaip įsitikinti, kad naujas skirtukas sufokusuotas?
- Naudokite win.focus() po to window.open 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 target="_blank" yra paprasta statinėms nuorodoms, tuo tarpu window.open(url, '_blank') 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.