, en introduktion til html5 historie api -,,,,, 83,,,,,,,, 57,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, historien er altid interessant, er det ikke?i ældre versioner af: vi havde begrænset kontrol over browser historik.vi kunne gå frem og tilbage med de tilgængelige metoder, men det var det, med html5 historie api, vi har mere kontrol med at lege med browser historik.vi har f.eks. en måde at tilføje en indgang i historien, eller ændre url adressen bar uden forfriskende side.,,, hvorfor en historie api?, i denne artikel, finder vi ud af, hvorfor html5 historie api - kom.før denne api eksisterede, vi ofte hash værdier til at skifte side indhold, især for tunge, enkelt side ansøgninger for at ændre url var ikke muligt uden forfriskende side.desuden, når du skifter hash - værdi for en url, det gør ikke nogen ændringer til browser historik.  , nu, men begge disse ting er til rådighed med html5 historie api - og gør det muligt at udvikle manuskript, tunge, enkelt side ansøgninger uden at bruge hash værdier.det gør det også muligt for os at opbygge ansøgninger i en seo venskabelig måde.   desuden denne teknik giver os mulighed for at reducere båndbredde - men hvordan? , i denne artikel, vi vil udvikle en enkelt side anvendelse med denne api - viser, at netop det.  , betyder det, at vi vil have alle nødvendige ressourcer på den første side belastning.derfra mod anvendelsen vil downloade kun det krævede indhold.med andre ord, i stedet for lastning af alle ressourcer, hele tiden vil den belastning, kræves der kun ressourcer fra et andet indhold anmodning.  , bemærke, at du har brug for til at udføre nogle server-side koder til at levere kun delvis midler i stedet for fuld side indhold.,,, - støtte, ved afslutningen af denne artikel, - støtte til html5 historie api - er temmelig godt, vi kan revidere sin status   her.i denne forbindelse vil give dig et glimt   browsere af støtte, men det er altid god praksis til påvisning af støtte til særlige kendetegn, før de bruger den.  ,,, at programmatically afgøre, om din browser støtter api, se følgende linje kode:,,, tilbage!. (window.history & & historie. pushstate); endvidere vil jeg foreslå, at denne artikel   påvisning af støtte til forskellige html5 træk.,,, hvis du bruger modernizr, så skal du bruge under kode:,, hvis (modernizr. historien) (//historie api - støtte), hvis deres browser ikke støtter historie api, så kan du bruge den   history.js polyfills.,, at manipulere historien, html5 indeholder to nye metoder:,,, historie. pushstate(),  , historie. replacestate(),,, som giver os mulighed for at tilføje og ajourføre historie, henholdsvis.arbejder begge på samme måde og med samme antal parametre.ud over disse metoder, vi har, popstate, begivenhed.vi ses senere, i denne artikel for, hvordan og hvornår for at bruge det, popstate,.,,, pushstate, og replacestate, både forventer det samme antal parametre, der er under:,,,,,   kan lagre en json snor og vil være til rådighed for, popstate,.,, titel,   er en parameter er ukendt i de fleste browsere nu, så bedre, til at sætte det til  , nul, for i dag.,, url,   kan repræsentere en url.det vil blive ajourført med browser adresse, og det vil være ligeglad med, om, at url eksisterer eller ej.vigtigst af alt, det vil ikke lade din hjemmeside.,,, er store forskelle mellem disse metoder er, at de, pushstate, vil tilføje en ny post i historien skorsten og replacestate, vil erstatte de nuværende historien værdi i stedet for at tilføje nye.hvis du stadig er forvirret i begge disse metoder, så lad os vise samme sag med bedre eksempel.,,, lad os antage, vi har masser af to blokke med 1. og 2. og du har blok med 3 i din hånd.nu, hvor vi udfører, pushstate, blok 3 tilføjes en eksisterende stak så stak er 3 blokke.  , nu får samme skorsten med to blokke og en mere i din hånd.når vi spiller, replacestate, vil det tage den blok 2 ud af skorsten og blok 3.- antallet af historiske værdier, vil forblive på samme måde., pushstate, på den anden side øger historie regne med en.  , under billede viser samme demonstration.,,,,,,, vi har hidtil omfattede  , pushstate, og replacestate, arrangementer for at kontrollere browser historien, men hvis vi har en række falske historie, at vi har smadret i browseren.brugeren kan eller ikke kan omlægges til side.i et sådant tilfælde, vil det være et problem, når brugeren slår browser frem og tilbage og knap til at navigere i historien sider.,, men du kan forvente, popstate, at blive fyret, når  , pushstate, eller, replacestate, metoder, der er rettet, men i virkeligheden er det ikke tilfældet.Instead, ,popstate, will fire when you are navigating through the session history entry, either by hitting backward or forward buttons or using the ,history.go, or ,history.back, methods.,,,In WebKit browsers, a popstate event would be triggered after document's onload event, but Firefox and IE do not have this behavior.,,The Demonstration,,The HTML,,<div class="container"> <div class="row"> \t\t<ul class="nav navbar-nav"> \t\t\t<li><a href="home.html" class="historyAPI">Home</a></li> \t\t\t<li><a href="about.html" class="historyAPI">About</a></li> \t\t\t<li><a href="contact.html" class="historyAPI">Contact</a></li> \t\t</ul> \t</div> \t<okay klasse = "ror" > < div klasse = "col-md-6" > < div klasse = "godt" > klik på forbindelser over at se historien api - anvendelse på < kode > pushstate < /kode > metode.< /div > < /div > < div klasse = "ror" > < div klasse = "går" id = "contentholder" > < h1 > hjem!</h1> \t\t\t\t<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> \t\t\t</div> \t\t</div> \t</div> </div>,,The JavaScript,,<script type="text/javascript"> jQuery('document').ready(function(){ \t\t \t\tjQuery('.historyAPI').on('click', function(e){ \t\t\te.preventDefault(); \t\t\tvar href = $(this).attr('href'); \t\t\t \t\t\t//Getting Content \t\t\tgetContent(href, true); \t\t\t \t\t\tjQuery('.historyAPI').removeClass('active'); \t\t\t$(this).addClass('active'); \t\t}); \t\t \t}); \t \t//Adding popstate event listener to handle browser back button \twindow.addEventListener("popstate", function(e) { \t\t \t\t//Get State value using e.state \t\tgetContent(location.pathname, false); }); funktion getcontent (url, addentry) {%. kom (url). (funktion (data) (//ajourføring af indhold på side $('# contentholder). http: //(data); hvis (addentry = = sand) (//add historie indrejse ved hjælp af pushstate historie. pushstate (null, nul, url)}})} < /manuskript >,, demo - 1: html5 historie api - pushstate, i denne demo, vil du opleve, at historien angivelser er tælles med i browseren, og man kan sejle igennem ved hjælp af browseren tilbage /frem - knappen.betragtning demo, demo - 2: html5 historie api - replacestate, i denne demo, vil du opleve, at historien oplysningerne ajourføres i browsere og du kan ikke navigere igennem ved hjælp af browseren tilbage /frem - knappen.betragtning demo,,, konklusion, denne api - har skabt stor indflydelse på, hvordan vores webapplikationen fungerer.det har taget afhængighed af hash værdier i url - adresser for at gøre det let at skabe effektive, seo venskabelige side anvendelse.  , det er en virkelig god api, er det ikke?,,,