Hvordan lage en "legg til i favoritter"-knapp. Legg til favoritter på jQuery Js finn ut at siden er bokmerket

Brukere som surfer på Internett finner jevnlig interessant innhold, bilder, videoer eller spillsider som de ønsker å lagre for å besøke senere. Noen legger til lenker til notatboken på gammeldags måte, og noen åpner favorittnettressursene sine gjennom besøkshistorien. Men dette er ikke de mest praktiske måtene, fordi alle moderne nettlesere har en effektiv funksjon som du raskt (med bare ett klikk) kan bokmerke et nettsted med.

Hvordan bokmerke en side i en nettleser

Det finnes flere typer bokmerker i nettlesere:

1. Standard bokmerker;
2. Visuelle bokmerker;

Dessuten støttes denne standarden av alle populære nettlesere: Google Chrome, Opera, Mozilla Firefox, Yandex-nettleseren.

La oss finne ut hvordan du bokmerker en side i en nettleser, hvert av alternativene.

Hvordan bokmerke en nettside i en nettleser

For å legge til en side i vanlige bokmerker, bør du:

1. Åpne siden som skal lagres;
2. I øvre høyre hjørne av nettleseren klikker du på stjerneikonet (i Opera - et hjerte).
   Alt! Bokmerke lagt til!

I tillegg kan du raskt bokmerke sider ved hjelp av hurtigtaster: Ctrl+D .

Hvordan åpne et lagret bokmerke

Poenget er lite - du må lære hvordan du åpner en bokmerket side. Og du kan gjøre dette på flere måter:

Hvordan legge til et nettsted i visuelle bokmerker

Dessverre kan du ikke legge til et nettsted i visuelle bokmerker i Google Chrome på standard måte. De visuelle bokmerkene til Chrome viser de mest besøkte nettstedene, og brukeren har ikke mulighet til å redigere dem eller legge til nye. Du kan bare slette. Men det er en vei ut! Du kan installere utvidelsen.

Med denne utvidelsen vil handlingssekvensen for alle nettlesere være nesten identisk.

Online tjenester for å legge til nettsteder i bokmerker

Et alternativ til å legge til bokmerker ved hjelp av standard nettleserverktøy er nettjenester som utfører alle de samme funksjonene.

Hallo. La oss snakke om hvordan du lager en lenke eller en knapp for å legge til favoritter (bokmerker) for alle nettlesere: Chrome, Firefox, Opera, Internet Explorer, Safari - på tvers av nettlesere, slik at når en bruker klikker på den, kan han utsette og husk siden din. Sørg selvfølgelig for at innholdet er interessant, ellers vil ingen bokmerke det :)
Så la oss gå.

Hva du skal legge til i HTML

Legg til i bokmerker

Skriv inn koden hvor som helst du trenger. Alle innstillinger unntatt de som er oppført nedenfor kan endres eller slettes.

• id="fav"
  Instruksjoner for Chrome, Opera og alle nettlesere basert på Webkit-motoren vil bli skrevet her
• rel="sidebar"
  Attributtet er påkrevd, nødvendig for Firefox, så det vil avgjøre at siden ved lenke skal sendes Til favoritter
• href=""
  Det er også lurt å la det være uendret. Firefox tar bokmerkekoblingen på denne adressen

  Hvis det var min vilje, ville jeg erstattet a med span , men dette alternativet vil ikke fungere under Firefox

• onclick="addFav()"
  Det er her javascript-skriptet vil bli definert. Mer om ham

Hva du skal legge til i JavaScript

// Funksjon for å bokmerke favoritter | https://website?p=710 function addFav() ( var title = document.title, url = document.location, UA = navigator.userAgent.toLowerCase(), isFF = UA.indexOf("firefox") != - 1, isMac = UA.indexOf("mac") != -1, isWebkit = UA.indexOf("webkit") != -1, isIE = UA.indexOf(".net") != -1; if ( (isIE || isFF) && window.external) ( // IE, Firefox window.external.AddFavorite(url, tittel); return false; ) if (isMac || isWebkit) ( // Webkit (Chrome, Opera), Mac document.getElementById("AddFavViaSheens").innerHTML = "Trykk "" + (isMac ? "Command/Cmd" : "Ctrl") + " + D" for å bokmerke denne siden"; returner false; ) )

Flytt koden til en ekstern fil, eller plasser den hvor som helst på siden du liker, for eksempel i seksjonen eller før den avsluttende taggen
Koden er kommentert ut, jeg tror det ikke er noe komplisert. Hvis du har spørsmål - spør i kommentarene.

Slik unngår du å vise en favorittkobling på nettbrett og mobilnettlesere

Selvfølgelig gir det ingen mening å vise en lenke for å legge til favoritter på mobile enheter, det vil ikke fungere der. Derfor må du filtrere dem.
For å gjøre dette kan du for eksempel generere en lenke ved hjelp av javascript, og den filtrerer allerede alt som det skal

// Funksjon for å oppdage nettlesermobilitetsfunksjon MobileDetect() ( var UA = navigator.userAgent.toLowerCase(); return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry|windows phone |opera mobi|opera mini/i .test(UA)) ?true: false ; ) // Hvis nettleseren IKKE er mobil, vis lenken hvis (!MobileDetect())( document.getElementById("MyID").innerHTML = " Her HTML-lenkekode (se ovenfor)"; )

La oss bryte det ned litt

• varUA = navigator.userAgent.toLowerCase(); - skriver nettleserhodene til variabelen og konverterer dem til små bokstaver. Ut fra innholdet vil vi bestemme "mobiliteten" til nettleseren.
• return (/Regulært uttrykk/.test(UA)? true: usant) er et filter. Det regulære uttrykket inneholder fragmenter som finnes i overskriftene til mobilnettlesere. Du kan legge til dine egne verdier ved å skille dem med | .

  Filteret skiller mellom store og små bokstaver. Derfor, hvis du skriver inn verdiene dine i filteret, sørg for å skrive dem med små bokstaver (med små bokstaver).

• document.getElementById("MyID").innerHTML = "Her er HTML-koden for lenken"; — ser etter en tag med id="MyID" i koden og skriver linken vår i stedet. For å få det til å fungere, må du først skrive ned på stedet hvor du skal vise lenken

Et eksempel på et ferdig manus og side

La meg oppsummere hvordan html-koden kan se ut til slutt

Denne metoden er gyldig for 2017. Det er mulig at nye versjoner av nettlesere over tid vil gjøre sine egne justeringer, og skriptet vil slutte å fungere. Hvis du oppdager slike feil, skriv i kommentarene, vi vil vurdere og oppdatere koden.

På et tidspunkt var koblingen "Legg til nettsted i favoritter" populær på nettsteder, når den ble klikket, ble nettstedsadressen bokmerket i nettleseren. Men hvorfor var det? Med jevne mellomrom finnes en slik lenke fortsatt på nettsteder. Problemet er at skriptet som brukes til dette formålet ikke fungerer i mange nettlesere, så verdien er nær null. HTML5 utvider mulighetene til rel tag-attributtet og nå med dens hjelp kan du enkelt legge til alle nettsteder og individuelle sider til dine favoritter.

Det er nok å legge til rel="sidebar" til lenken, og når du klikker på den, åpnes et spesielt panel i nettleseren for å lage et nytt bokmerke. Mens sidefeltverdien støttes av to nettlesere - Firefox og Opera, ignorerer resten rel-attributtet og følger den angitte lenken som vanlig.

For å utvide antallet nettlesere og legge til IE til dem, kan du også koble et lite skript til lenken. Som et resultat viser det seg at Firefox, Opera, Internet Explorer vil kalle et spesielt panel, andre nettlesere vil følge lenken (eksempel 1).

Eksempel 1: Legg til i favoritter

HTML5 IE Cr Op Sa Fx

Legg til i favoritter

Hvordan ser applikasjonen av rel="sidebar" ut til slutt? Resultatet avhenger av nettleseren. Firefox, for eksempel, åpner et slikt vindu (fig. 1).

Ris. 1. Legg til favoritter i Firefox

I Opera er utsikten noe annerledes, men betydningen er lik (fig. 2).

Ris. 2. Legge til favoritter i Opera-nettleseren

Internet Explorer har det mest konsise grensesnittet (fig. 3).

Ris. 3. Legg til favoritter i Internet Explorer

Mens bruken av rel-attributtet er uvanlig på grunn av dens dårlige nettleserstøtte, har den et stort potensial, og antallet verdier utvides gradvis. Så det bør inkluderes i lenkene.

Etter litt graving fant jeg endelig en vakker løsning som fungerer i alle nettlesere.

Legg til i favoritter

Legg til i favoritter - skript for alle nettlesere

Legg til i favoritter

Endre nettstedets navn og URL på 2 steder! Fungerer overalt uten feil)

Start - script for IE

lage en hjemmeside

Vi endrer URL 2 steder! Fungerer kun i IE

JavaScript "Legg til i favoritter"-lenken for alle nettlesere

Skriptet ble funnet i google og modifisert under hensyntagen til den nåværende realiteten, nemlig tilstedeværelsen av den åttende versjonen av IE og Chrome-nettleseren (som i sin opprinnelige form ble definert som Netscape av skriptet og ingen handling ble iverksatt som et resultat ). Hvis nettleseren ikke støtter bokmerke via et script, vil brukeren få vist en melding om hva som kan bokmerkes ved å trykke Ctrl-D.

Sett disse funksjonene i toppen av siden: