Avaa koodi uudessa ikkunassa. Linkin avaaminen uudessa ikkunassa

Artikkeli kertoo attribuutin target \u003d "_blank" käytön perusperiaatteet ja tarjoaa myös vaihtoehdon tämän attribuutin käytölle, jossa koodi pysyy voimassa.

Melko usein on tällainen käytäntö, kun linkkiä napsautettaessa siirtyminen kohdesivulle tapahtuu uudella selainvälilehdellä. Tätä tekniikkaa käytetään hyvin usein määritettäessä verkkoresurssin kehittäjää tai vastaamalla pyyntöön hakukoneessa. Tämä tekniikka saavutetaan käyttämällä tagin kohdemääritettä. Alla on esimerkkikoodi:

HTML

< a href= "#" target= "_blank" >

Nykyisessä käsityksessä käyttäjän nykyaikaisesta pätevästä ulkoasusta ja vuorovaikutuksesta resurssin toiminnallisuuden kanssa on yleisesti hyväksyttyä, että kävijän on itse määritettävä, miten hän seuraa linkkiä. Kokeneet ja tunnetut web-kehittäjät tukevat tätä mielipidettä. Tämän attribuutin käyttö häiritsee myös selaimen Takaisin-painiketta - tätä pidetään myös attribuutin negatiivisena vaikutuksena. Luetellut tekijät voivat aiheuttaa sivuston kävijän kaunaa.

Jotkut selittävät kohdemääritteen käytön sillä, että käyttäessään sitä, vaikka käyttäjä löysi etsimänsä toisesta resurssista (johon linkki lähetettiin), sulkeutuu äskettäin avattu välilehti, hän palaa edellinen sivusto uudelleen. Tämä oletettavasti lisää todennäköisyyttä muuntaa rento kävijä tavalliseksi käyttäjäksi. Tämä väite on väärä! Vain mielenkiintoinen ja korkealaatuinen sisältö voi saada käyttäjän jatkuvan huomion. Turhaa tietoa pidetään yhtenä arvokkaimmista lähteistä.

Muun muassa eritelmän mukaan XHTML 1.0 Tiukka, kohdemääritteen käyttö on virheellinen. Muuten koodia ei pidetä kelvollisena. Ja vahvistaja itse lähettää tällaisen viestin

Linkin avaaminen uudessa välilehdessä JavaScriptin avulla

Kuten aiemmin mainittiin, kohdemääritteen käyttäminen linkin seuraamiseen uudessa selainikkunassa ei täytä vaatimuksia eikä sitä pidetä pätevänä ratkaisuna ongelmaan. Tämä ei kuitenkaan ole ainoa tapa ratkaista tämä ongelma. Samanlainen vaikutus voidaan saada käyttämällä js-koodia.

Tällaisen prosessin järjestämisen periaate perustuu onclick-tapahtumaan. Tämän tapahtuman arvoon kirjoitetaan funktio uuden selainvälilehden avaamiseksi - window.open (), samoin kuin esto, joka peruuttaa siirtymisen haluttuun osoitteeseen nykyisessä ikkunassa - palauta väärä... Koodissa kaikki nämä toiminnot näyttävät tältä:

< a href= "#" onclick= "window.open (this.href); return false"\u003e Linkin avaaminen uudessa välilehdessä

Voit tarkistaa ehdotetun menetelmän tehokkuuden napsauttamalla tätä linkkiä. Se avautuu uuteen ikkunaan.

Kun olemme vakuuttuneita menetelmän tehokkuudesta, tarkistamme koodin oikeellisuuden. Vahvistaja antaa vihreän viestin, joka osoittaa koodimme virheettömyyden.

Ensi silmäyksellä olemme saavuttaneet rationaalisen ratkaisun tehtävään, mutta menetelmän yksityiskohtaisen tarkastuksen jälkeen kävi ilmi, että jos selaimeen asennetaan ponnahdusikkunoiden esto, menetelmä lakkaa toimimasta. Linkin seuraamisen sijaan näkyviin tulee ponnahdusikkunoiden estävä viesti.

Js-koodin muokkaus onnistuneeseen siirtymiseen kaikissa olosuhteissa

Yllä olevan toiminnon tarkoituksena on vapauttaa käyttäjä liiallisesta mainonnasta Internetissä. Kaikilla nykyaikaisilla selaimilla on tämä kyky arsenaalissaan, lisäksi jotkut heistä voivat toteuttaa eston eri tasoilla. Esimerkiksi kaikki versiot Ooppera, alkaen 9. päivästä, on mahdollisuus estää vain merkityt ikkunat tai kaikki peräkkäin.

Vaikka on todennäköisesti hyvin vähän käyttäjiä, jotka asentavat ponnahdusikkunoiden estotoiminnon selaimeensa, he ovat silti siellä. Ja meidän on otettava huomioon kaikki mahdolliset vaihtoehdot sivuston normaalille toiminnalle. Haluan muistuttaa, että jos on lohko, js-koodissamme oleva linkki lakkaa toimimasta.

Mitä sinun pitäisi sitten tehdä: joko koodi ei ole kelvollinen tai ei aina toimivia linkkejä? Ja se, ja tämä vaihtoehto ei sovi meille. Vaihtoehtoinen ratkaisu tuli testattaessa linkkiä kohdemääritteellä ja ponnahdusikkunoiden esto käytössä. Annetuissa olosuhteissa linkki avautui, mutta vain omassa ikkunassaan. Tämä tarkoittaa, että meidän on muokattava js-koodiamme siten, että estäessä linkki toimii nykyisessä ikkunassa. Tämä toteutetaan seuraavasti:

< a href= "#" onclick= "return! window.open (this.href)"\u003e Linkin avaaminen uudessa välilehdessä

Menetelmän toimintaperiaate ei ole käytännössä muuttunut, toimintojen tulkintamuoto on muuttunut. Uudessa koodissa toiminto window.open () täyttää merkityksen totta, jos lukkoa ei ole asetettu, jos sitä on, toiminto suorittaa arvon väärä... Jos puhut venäjäksi, jos määrität sopivat asetukset selaimessa, linkki avautuu nykyisessä istunnossa, muuten uudessa välilehdessä.

Tarkistetaan muokattu ratkaisu linkittämiseksi pääblogiin.

havainnot

Edellä esitettyjen tietojen perusteella voimme päätellä, että järkevin tapa pakottaa linkkien avaaminen uusille välilehdille on käyttää viimeistä koodiin perustuvaa menetelmää JavaScript.

Samanaikaisesti tällaisia \u200b\u200basioita tulisi kuitenkin soveltaa varovasti, koska tämä asettaa käyttäjälle tiettyjä toimia ja rajoittaa hänen päätöksentekovapauttaan. Tätä pidetään huonona muotona.

Kun olet napsauttanut haluamaasi painiketta, ruudulla näkyy pikavalikko. Tässä valikossa sinun on vietävä kohdistin komennon "Avaa sisään uusi välilehti"Ja avain, joka vastaa hiiren vasemman painikkeen napsauttamisesta (tai kaksoisnapauttamisesta anturiin). Linkki avautuu sisään uusi välilehti .

Linkin avaaminen uusi välilehti hiirellä. Kun otetaan huomioon edellisen vaiheen toimet, on helppo arvata, mitä on tehtävä linkin avaamiseksi uusi välilehti... Sinun on myös vietävä kohdistin linkin päälle ja napsauttamalla sitä hiiren kakkospainikkeella. Valitse avautuvasta valikosta komento "Avaa sisään uusi välilehti"Ja napsauta sitä hiiren vasemmalla painikkeella. Sivusto avataan vuonna uusi välilehti, tässä tapauksessa pysyt vanhalla sivulla.

Myös nykyään on helpompi tapa avata linkit uusille välilehdille. Tätä varten sinun ei tarvitse käyttää linkin pikavalikkoa. Siirrä kohdistin vaaditun päälle linkki ja napsauta hiiren pyörää. Kuten edellisissä tapauksissa, linkki avataan vuonna uusi välilehti.

Internetissä on äskettäin ilmestynyt paljon tieto- ja viihde-aineistoja, jotka kiinnostavat erityyppisiä verkon käyttäjiä. Voit avata haluamasi resurssin (sivuston) avaamalla siihen johtavan linkin.

Tarvitset

• Henkilökohtaisen tietokoneen perustaidot, Internet-yhteys.

Ohjeet

Yksinkertaisin ja yleisin tapa avata linkki resurssille voidaan tehdä seuraavasti:

Soita toimintovalikkoon valitun tekstin päällä napsauttamalla sitä hiiren kakkospainikkeella kerran;

Valitse avautuvasta luettelosta rivi "Kopioi";

Napsauta hiiren kakkospainikkeella osoitteen syöttörivillä;

Valitse toimintovalikossa rivi "Lisää";

Liittyvät videot

Työskentely Internet-selaimen kanssa sisältää suuren määrän jatkuvasti avoimia ikkunoita tai välilehtiä. Tänään et löydä Internet-sivujen katsojia, jotka eivät osaa luoda uusia välilehtiä, ainoa poikkeus voi olla Internet Explorer 6. versio.

Tarvitset

• Ohjelmisto:
• - Mozilla Firefox;
• - Google Chrome;
• - ooppera;
• - Internet Explorer.

Ohjeet

Mozilla Firefox -selain. Helpoin tapa on napsauttaa linkkiä hiiren kakkospainikkeella ja valita "Avaa sisään uusi »Pikavalikko. Tämä toimenpide voidaan suorittaa myös painamalla pikanäppäimiä, Firefoxin tapauksessa - painamalla hiiren keskimmäistä painiketta (scrool - wheel).

Google Chrome -selain. Edelliseen vastustajaan verrattuna kaikki uuden välilehden avaamiseen tähtäävät toimet pysyvät ennallaan. Soita linkin pikavalikkoon napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla kohta "Avaa uudessa välilehdessä". Jos tutkit tätä valikkoa huolellisesti, näet rivin "Avaa tilassa". Tämä tila avaa linkin uudessa ikkunassa, mutta tässä tilassa tarkasteltuja sivuja ei tallenneta välimuistiin, mikä antaa tietyn tietosuojan tason.

Keskinäppäintä ja pikanäppäintä Ctrl + vasen napsautus käytetään pikanäppäiminä. On huomattava, että pikanäppäin Shift + hiiren napsautus avaa linkin uudessa ikkunassa. Joissakin tapauksissa riittää, että tartut linkkiin hiirellä ja vedät sen välilehtipalkin vapaaseen tilaan.

Opera-selain. Avata ikkuna uudessa välilehdessä sinun on painettava Ctrl-painiketta ja napsautettava aktiivista linkkiä, tai kun napsautat hiirtä, pidä Ctrl + Vaihto-näppäimiä painettuna - tämä avaa ikkunan taustavälilehdessä. Sääntö, joka koskee komennon suorittamista linkin pikavalikosta, koskee myös tätä selainta. Napsauta valittua kohdetta hiiren keskimmäisellä painikkeella siirtyäksesi avoimeen välilehteen.

Liittyvät videot

Lähteet:

• välilehti -ikkuna

Ymmärrämme kaikki, että joskus on helpompaa avata linkkejä nykyisessä ikkunassa ja joskus uudessa. Henkilökohtaisesti noudatan yksinkertaista sääntöä useimmissa projekteissa - jos linkki on sisäinen (sivuston sisällä), se avautuu oletusarvoisesti nykyisessä ikkunassa, ja muille sivustoille johtavat ulkoiset linkit avaavat oletusarvoisesti uudet ikkunat (välilehdet).

...

kohdemääritettä ei ole määritetty tai se on asetettu target \u003d "_ self", sitten asiakirja avataan nykyisessä selainikkunassa, ja jos linkille on määritetty attribuutti muodossa target \u003d "_ blank", asiakirja avataan uudessa ikkunassa.

Mutta sitten nousee esiin kysymys - miten käyttäjä voi erottaa nämä kaksi linkityyppiä napsauttamatta niitä tai tarkastelematta sivun HTML-koodia?

Loogisinta on, jos kahden tyyppisten linkkien CSS-suunnittelu on erilainen, tässä on vaihtoehto, jossa linkit kohteeseen target \u003d "_blank" korostetaan lihavoitu fontti:

A (font-weight: expression ((this.getAttribute ("target") && this.getAttribute ("target") \u003d\u003d "_blank")? "Lihavoitu": "normaali");) a (font-weight: bold) ;)

Täällä, kuten usein tapahtuu, on otettava huomioon Internet Explorer ja muut selaimet erikseen, ensimmäinen tyyliopas on tarkoitettu vain IE: lle ja toinen muille selaimille.

Vastaavasti voit kokeilla muita CSS-ominaisuuksia, kuten tekstikoristelu alleviivaus:

A (tekstikoristelu: lauseke ((this.getAttribute ("target") && this.getAttribute ("target") \u003d\u003d "_blank")? "Alleviivaus": "none");) a (text-decoration: alleviivaus) ;)

CSS-ominaisuuksien hierarkiasta riippuen jokin ei välttämättä toimi tietyssä selaimessa. Lisäksi en käytä alleviivaa, kun oletuksena kaikki linkit on alleviivattu (tai ei alleviivattu).

Vaihtoehtoinen ja selainten välinen tapa on yrittää erottaa ulkoiset linkit muista osoitteet... Oletetaan, että ulkoiset linkit määritetään aina nimellä ehdoton (alkavat etuliitteestä http: //), ja sisäiset kirjoitetaan muodossa suhteellinen... Tämä tehdään useimmiten tavallisilla sivustoilla. Tämä toimii myös IE: ssä, koska ainakin versio 8.

A (fontin paino: lihavoitu / * Lihavoitu absoluuttisille linkeille * /)

Mutta tässä poikkesimme alkuperäisestä tavoitteesta ja vaadimme yksinkertaisesti, että URL-osoite alkaa http: //, eli rohkaisemme absoluuttiset URL-osoitteet, jotka eivät välttämättä ole ulkoisia, eivätkä kaikki linkit, jotka avautuvat uudessa ikkunassa.

IE 6: n ja 7: n lisäksi asioita voidaan helpottaa käyttämällä pseudoelementtien ennen ja jälkeen määrittämistä, mitä näytetään ennen tai jälkeen elementtien, joihin ne on lisätty.

Esimerkiksi tyylin avulla voimme lisätä pienen grafiikan jokaisen uudessa ikkunassa avautuvan linkin jälkeen.

Minusta tuntuu kuitenkin loogisemmalta yksinkertaisesti muuta taustakoristetta uudessa ikkunassa avautuva linkki - loppujen lopuksi minkä tahansa tekstin tai kuvan lisääminen ennen linkkiä tai sen jälkeen voi rikkoa sivuston asettelua. Jotta emme kärsi, asetamme kellertävän taustavärin kaikille linkeille, jotka avautuvat uuteen ikkunaan.

A (taustaväri: # FFFF99;) a (taustaväri: lauseke ((this.getAttribute ("target") && this.getAttribute ("target") \u003d\u003d "_ blank")? "# FFFF99": " läpinäkyvä ");)

Tehtävä

Päätös

Oletusarvoisesti linkit avautuvat samassa ikkunassa, jossa ne sijaitsevat. Jos haluat linkin avautuvan uudessa ikkunassa, tunnisteeseen lisää kohdemääritteeksi arvo _blank, kuten esimerkissä 1 on esitetty.