Linkin avaus samaan välilehteen

Linkit ovat olennainen osa nettisivun sisältöä. Oikeastaan linkit ne vasta tekevätkin netistä juuri sellaisen hypermediaympäristön, jollaisena me olemme sen tottuneet kokemaan näiden parin vuosikymmenen ajan. Netin sivut rakennetaan pääosin HTML-kielellä, joka on lyhenne englanninkielisistä sanoista Hypertext Markup Language. Termi viittaa hypertekstin merkkauskieleen ja hypertekstillä puolestaan tarkoitetaan linkeillä toisiinsa yhdistettyjä tekstisisältöjä. Aikojen alussa eli Internetin aamukoitteessa linkit oli tapana erottaa muusta tekstisisällöstä eri värillä ja alleviivaamalla ne. Periaate on jatkunut näihin päiviin asti vaikkakin monet sivustot ovat luopuneet alleviivauksesta ja jättäneet vain värin linkkien erottamiseksi. Linkin tehtävänä on tyypillisesti avata uusi sivu, joka voi sisältää lisää linkkejä muille sivuille. Näin rakentuu loputtomalta tuntuva sukellus netin pohjattomaan maailmaan.

Selain näyttää HTML-kielellä kirjoitetun sivun ja avaa uusia sivuja käyttäjän koskettaessa linkkiä. Monet sivustojen tekijät lisäävät linkkeihin target-attribuutin, jolla uusi sivu useimmiten ohjataan avautumaan joko uuteen selainikkunaan tai uudelle välilehdelle. Tapa yleistyi nopeasti netin alkuvuosina ja se on jatkunut siitä lähtien mitään hiipumisen merkkejä osoittamatta. Periaatteessa sivuston julkaisija ei saisi tehdä päätöksiä sivua selailevan henkilön puolesta avaamalla linkin takana olevan sivun uuteen ikkunaan. Sivua tarkastelevan henkilön pitää itse saada päättää, avaako hän linkin samaan ikkunaan, ja yleisimmissä selaimissa on toiminnot tätä varten. Esimerkiksi Googlen suositussa Chrome-selaimessa linkin sivu avataan uudelle välilehdelle pitämällä Ctrl-näppäintä alas painettuna ja klikkaamalla samanaikaisesti hiirellä linkkiä. Sivu avautuu uudelle välilehdelle ja mikäli haluaa, että fokus samalla siirtyy avautuneelle välilehdelle, pidetään Ctrl-näppäimen lisäksi Shift-näppäintä alas painettuna. Nämä näppäinyhdistelmät toimivat myös Firefox-selaimessa.

Netin käytettävyyssuositukset suosittelevat välttämään target-attribuutin käyttöä avaamaan sivuja uusiin ikkunoihin. Harva sivustoja koodaava niin sanottu "ammattilainen" on kuitenkaan koskaan kuullutkaan näistä suosituksista. Monet ovat opetelleet koodaamaan matkimalla netin huonoja toteutuksia kuvittelemalla niitä parhaiksi käytännöiksi. Linkkielementteihin koodataan usein target-attribuutti, joka _blank-arvolla avaa sivun ärsyttävästi uuteen selainikkunaan tai välilehdelle. Käyttäjän tarkkaavaisuus herpaantuu ja hän joutuu turhaan hiirtä käyttämällä siirtämään ajatuksensa hetkeksi selaimen käyttämiseen sivuston sisällön tarkastelun sijaan. Target-attribuutti voi saada seuraavia arvoja:

_top
Avaa sivun samaan ikkunaan ja poistaa mahdolliset aiemmat frameset-elementillä luodut sivujen osat.
_blank
Avaa sivun uuteen ikkunaan.
_parent
Tämä on vastaavanlainen kuin _top eli avaa sivun samaan ikkunaan, mutta ei poista frameset-elementillä luotuja sivun osia vaan avaa sivun aktiiviseen frameset-ikkunaan.
_self
Avaa sivun samaan selainikkunaan, jossa linkittävä sivu on. Tämä on oletusarvo silloin, kun target-attribuuttia ei ole eksplisiittisesti määritelty.

Aloin kyllästyä eräiden sivustojen tapaan avata linkkejä uusiin ikkunoihin. Esimerkiksi YTV:n etusivulla linkit avaavat uuden sivun uudelle selaimen välilehdelle. Niinpä päätin päästä eroon tästä epämiellyttävästä tavasta, jolla ei ole mitään tekemistä käytettävyyden kanssa. Tein pienen JavaScript-koodin, joka asettaa tavallisiin a- eli ankkurielementteihin target-attribuutin ja sen arvoksi _self. Alla oleva lyhyt ohjelmakoodi asennetaan esimerkiksi Chrome-selaimen laajennukseksi.

// ==UserScript== // @name Force links to open in same tab // @creator Matti Mattila // @namespace http://www.mattimattila.fi // @description Prevents ordinary links from opening // in new tab // @version 1.0 // @include * // @match http://*/* // @match https://*/* // ==/UserScript== var links = document.getElementsByTagName('a'); for (var i in links) { links[i].target = '_self'; }

Ohjelman toiminta on hyvin yksinkertainen. Aluksi kaikki sivun linkkielementit kerätään links-muuttujaan. Seuraavaksi muuttujan arvot käydään yksitellen läpi silmukassa, joka asettaa kunkin linkin target-attribuutin arvoksi _self. Sivulla olevat tyypillisimmät linkit avautuvat tämän jälkeen samalle välilehdelle. Temppu ei tehoa dynaamisesti luotuihin linkkeihin, ja siksipä puhunkin tässä vain tyypillisistä eli staattisista linkityksistä. Jotta asentaminen Chromen laajennukseksi onnistuisi, tarvitaan skriptin lisäksi manifestitiedosto, jonka sisältö on tavallista JSON-koodia. Manifestitiedoston sisältö on alla olevassa koodissa.

{ "content_scripts": [{ "exclude_globs": [], "include_globs": ["*"], "js": ["Selflink.user.js"], "matches": [ "http://*/*", "https://*/*" ] }], "name": "Force links to open in same tab", "description": "Prevents ordinary links from opening in new tab", "version": "1" }

Asennus

  1. Luo kansio omia skriptejä varten, esimerkiksi "My User Scripts".
  2. Luo tämän kansion alle uusi kansio jokaista omaa skriptiä varten. Tässä esimerkissä tarvitaan Selflink-niminen kansio.
  3. Lataa Selflink.user.js-tiedosto ja tallenna se Selflink-kansioon.
  4. Lataa manifest.json-tiedosto ja tallenna myös se Selflink-kansioon.
  5. Kirjoita Chromen osoiteriville osoitteeksi chrome://extensions/ ja rastita Developer mode -vaihtoehto.
  6. Lataa pakkaamaton laajennus valitsemalla Load unpacked extension... -painike.
  7. Valitse My User Scripts -kansiosta Selflink-kansio ja asenna laajennus selaimeen.
  8. Paina lopuksi Update extensions now -painiketta, jolloin laajennukset päivittyvät.

Tämän jälkeen tavanomaiset linkit avaavat sivun samaan selainikkunaan tai samalle välilehdelle. Skripti löytyy jatkossa Extensions-valikosta. Voit halutessasi poistaa skriptin valitsemalla Chromen oikeassa yläkulmassa olevasta jakoavaimesta Tools-valikon ja sitten Extensions.

Julkaistu torstaina 16.2.2012 klo 18:19 avainsanoilla askartelu, Internet ja ohjelmointi.

Edellinen
M People - Elegant Slumming
Seuraava
Köyhät ritarit