Povezava, ki se odpre v novem oknu: HTML koda in razlaga

Povezave so temelj spleta․ Omogočajo nam‚ da se premikamo med različnimi spletnimi stranmi in viri informacij․ Čeprav je ustvarjanje osnovne povezave v HTML-ju dokaj enostavno‚ je pomembno razumeti tudi različne možnosti in atribute‚ ki jih ponuja‚ da lahko ustvarimo uporabne in dostopne povezave․ Ena izmed pogostih zahtev je‚ da se povezava odpre v novem oknu ali zavihku․ Ta članek vam bo pokazal‚ kako to storiti na preprost in učinkovit način‚ poleg tega pa bomo raziskali tudi naprednejše koncepte in dobre prakse․

Osnovna HTML koda za povezavo

Preden se osredotočimo na odpiranje povezave v novem oknu‚ si poglejmo osnovno strukturo HTML povezave:

<;a href="https://www․primer․com">;Obišči primer․com<;/a>;

V tem primeru:

  • <;a>; je element‚ ki definira povezavo․
  • href je atribut‚ ki določa ciljni URL povezave (v tem primeruhttps://www․primer․com)․
  • Obišči primer․com je besedilo‚ ki se prikaže kot povezava in ga lahko kliknemo․

Odpiranje povezave v novem oknu: Atributtarget

Ključ za odpiranje povezave v novem oknu ali zavihku je atributtarget․ Ta atribut določa‚ kje se bo ciljna stran odprla․ Za odpiranje v novem oknu uporabimo vrednost_blank․

<;a href="https://www․primer․com" target="_blank">;Obišči primer․com v novem oknu<;/a>;

Ko uporabnik klikne to povezavo‚ se bohttps://www․primer․com odprl v novem oknu ali zavihku․

Razlaga atributatarget="_blank"

Atributtarget="_blank" pove brskalniku‚ naj odpre povezavo v novem oknu ali zavihku․ Tehnično gledano‚ ustvari novo brskalno kontekst․ V preteklosti je uporabatarget="_blank" predstavljala varnostno tveganje‚ saj bi nova stran lahko dostopala do originalne strani prekowindow․opener․ Moderni brskalniki to tveganje omilijo‚ ampak je še vedno priporočljivo dodati atributrel="noopener" (glej spodaj)․

Dodatna varnost: Atributrel="noopener"

Za izboljšanje varnosti in preprečitev morebitnega izkoriščanja‚ je priporočljivo dodati atributrel="noopener" povezavam‚ ki uporabljajotarget="_blank"․ Ta atribut prepreči‚ da bi nova stran imela dostop do originalne strani preko JavaScripta․

<;a href="https://www․primer․com" target="_blank" rel="noopener">;Obišči primer․com v novem oknu (varno)<;/a>;

V nekaterih starejših brskalnikih boste morda morali uporabiti tudirel="noreferrer"‚ ki pa lahko prepreči‚ da bi ciljna stran prejela informacije o viru prometa (referral data)․ V večini primerov je dovoljrel="noopener"․

Alternativne vrednosti atributatarget

Poleg_blank obstajajo še druge vrednosti za atributtarget‚ čeprav se redkeje uporabljajo:

  • _self: Odpre povezavo v istem oknu/zavihku (privzeta vrednost)․
  • _parent: Odpre povezavo v nadrejenem okviru (če je stran v okviru)․
  • _top: Odpre povezavo v celotnem oknu (odstrani vse okvire)․

Dostopnost in uporabniška izkušnja

Čeprav je odpiranje povezave v novem oknu tehnično preprosto‚ je pomembno razmisliti o uporabniški izkušnji in dostopnosti․ Nenadno odpiranje novega okna lahko zmede uporabnike‚ zlasti tiste‚ ki uporabljajo tehnologije za pomoč (npr․ bralniki zaslona)․ Zato je priporočljivo:

  • Opozoriti uporabnika: Če je mogoče‚ vključite indikator‚ da se bo povezava odprla v novem oknu (npr․ ikono ali besedilo "se odpre v novem oknu")․
  • Uporabiti diskrecijo: Ne odpirajte vsake povezave v novem oknu․ Uporabite jo le‚ ko ima smisel (npr․ povezava na zunanjo stran)․
  • Zagotoviti intuitivnost: Prepričajte se‚ da je obnašanje povezave skladno s pričakovanji uporabnika․

Naprednejše tehnike

Čeprav je uporaba atributatarget="_blank" najpreprostejša rešitev‚ obstajajo tudi druge tehnike za upravljanje obnašanja povezav‚ ki vključujejo JavaScript․ Vendar se jih priporoča uporabljati le v posebnih primerih‚ saj lahko povzročijo težave z dostopnostjo in uporabniško izkušnjo․

Primer z JavaScriptom (odsvetovano‚ razen v specifičnih primerih)

<;a href="https://www․primer․com" onclick="window․open('https://www․primer․com'); return false;">;Obišči primer․com z JavaScriptom<;/a>;

Ta koda doseže enak učinek kottarget="_blank"‚ vendar je manj elegantna in lahko povzroči težave z dostopnostjo; Namesto tega raje uporabite atributtarget․

Praktični primeri in scenariji

  • Povezava na zunanjo spletno stran: Priporočljivo je‚ da se povezave na zunanje spletne strani odprejo v novem oknu‚ da uporabniki ne zapustijo vaše spletne strani․
  • Povezava na dokument (PDF‚ DOC‚ itd․): Odpiranje dokumenta v novem oknu prepreči‚ da bi uporabnik izgubil svoje mesto na vaši spletni strani․
  • Povezava na video ali avdio datoteko: Podobno kot pri dokumentih‚ je odpiranje v novem oknu pogosto boljša izkušnja․

Pogoste napake in kako se jim izogniti

  • Pozabljanje atributarel="noopener": To lahko povzroči varnostne težave․ Vedno ga dodajte‚ ko uporabljatetarget="_blank"․
  • Prekomerna uporaba odpiranja v novem oknu: Uporabljajte ga le‚ kadar je to resnično potrebno‚ da ne zmedete uporabnikov․
  • Neupoštevanje dostopnosti: Ne pozabite opozoriti uporabnika‚ da se bo povezava odprla v novem oknu․

Zaključek

Odpiranje HTML povezave v novem oknu je preprosto z uporabo atributatarget="_blank"․ Vendar je pomembno razumeti varnostne implikacije in upoštevati uporabniško izkušnjo․ Z dodajanjem atributarel="noopener" izboljšate varnost‚ z opozorilom uporabnika pa izboljšate dostopnost․ Vedno razmislite‚ kdaj je odpiranje v novem oknu resnično potrebno‚ in se izogibajte prekomerni uporabi․

Dodatni viri

oznake: #Html

Sorodni članki: