Adressfältet i webbläsaren finns vanligtvis högst upp i fönstret och visar URL:en till det nedladdade dokumentet. Om användaren vill navigera manuellt till en sida (skriv dess URL) gör han det i adressfältet.

Ris. 4.2.

Placeringsegenskapen för fönsterobjektet är i sig ett objekt av klassen Location. Klassen Location är i sin tur en underklass till URL-klassen, som även inkluderar objekt i klasserna Area och Link. Platsobjekt ärver alla egenskaper hos URL-objekt, vilket gör att du kan komma åt vilken del av URL-schemat som helst. Vi kommer att prata mer om URL-objektklassen i "Programmera hypertextövergångar".

För kompatibilitetsändamål tidigare versioner JavaScript, språket stöder även egenskapen window.document. location , som för närvarande är en fullständig kopia av fönstret. plats med alla dess egenskaper och metoder. Låt oss nu titta på egenskaperna och metoderna för fönsterobjektet. plats (det finns inga händelser associerade med detta objekt).

Egenskaper för platsobjektet

Det är lättare att visa dem med ett exempel. Låt oss anta att webbläsaren visar en sida som finns på:

Då kommer egenskaperna för platsobjektet att ha följande värden:

window.location.href = "http://www.site.ru:80/dir/page.cgi?product=phone&id=3#mark" window.location.protocol = "http:" window.location.hostname = " www.site.ru" window.location.port = 80 window.location.host = "www.site.ru:80" window.location.pathname = "dir/page.cgi" window.location.search = "?produkt =phone&id=3" window.location.hash = "#mark"

Som diskuterats i tidigare föreläsningar kan objektegenskaper nås med antingen punktnotation (enligt ovan) eller parentesnotation, till exempel: fönster. plats["värd"] .

Platsobjektmetoder

Platsobjektets metoder är utformade för att styra sidladdning och omladdning. Denna kontroll innebär att du antingen kan ladda om det aktuella dokumentet (reload()-metoden) eller ladda en ny (replace()-metod).

window.location.reload(true);

Metoden reload() simulerar helt webbläsarens beteende när du klickar på knappen Ladda om i verktygsfältet. Om du anropar metoden utan ett argument eller ställer in den på true , kommer webbläsaren att kontrollera den senaste ändringstiden för dokumentet och ladda det antingen från cachen (om dokumentet inte har ändrats) eller från servern. Detta beteende motsvarar att helt enkelt trycka på webbläsarens Reload-knapp (F5 knappa in Internet Explorer). Om du anger false som argument kommer webbläsaren att ladda om det aktuella dokumentet från servern, oavsett vad. Detta beteende motsvarar att samtidigt trycka på Skift-tangenten och webbläsarens Reload-knapp (eller Ctrl+F5 i Internet Explorer).

Använd platsobjektet, gå till ny sida kan göras på två sätt:

window.location.href="http://www.newsite.ru/"; window.location.replace("http://www.newsite.ru/");

Skillnaden mellan dem är visningen av denna åtgärd i sidhistorikfönstret. historia. I det första fallet kommer ett nytt element att läggas till i din webbhistorik som innehåller adressen "http://www.newsite.ru/", så att du om du vill kan klicka på Tillbaka-knappen på webbläsarpanelen för att återgå till föregående sida. I det andra fallet kommer den nya adressen "http://www.newsite.ru/" att ersätta den tidigare i webbhistoriken, och det kommer inte längre att vara möjligt att gå tillbaka till föregående sida genom att trycka på bakåtknappen.

Besökshistorik (historia)

Webbhistorik för världssidor Wide Web låter användaren gå tillbaka till en sida som de tidigare tittat på i ett visst webbläsarfönster. Webbhistoriken i JavaScript omvandlas till ett fönsterobjekt. historia. Detta objekt pekar på en rad URL-sidor som användaren har besökt och kan komma åt genom att välja Gå-läge från webbläsarmenyn. Historieobjektets metoder låter dig ladda sidor med hjälp av URL:er från denna array.

För att undvika säkerhetsproblem i webbläsaren kan du bara navigera i historiken med hjälp av indexet. I det här fallet är webbadressen som textsträng, är inte tillgänglig för programmeraren. Oftast används detta objekt i exempel eller sidor som kan länkas från flera olika sidor, förutsatt att du kan gå tillbaka till sidan som exemplet laddades från:

Den här koden visar en "Tillbaka"-knapp, genom att klicka på den kommer vi tillbaka till föregående sida. Historiemetoden fungerar på liknande sätt. forward(), tar oss till nästa besökta sida.

Det finns också en go()-metod, som tar ett heltalsargument och låter dig hoppa framåt eller bakåt flera steg i din webbhistorik. Till exempel, historia .go(-3) tar oss 3 steg tillbaka i webbhistoriken. I det här fallet är metoderna back() och forward() ekvivalenta med metoden go() med argumenten -1 respektive 1. Anropshistorik .go(0) kommer att orsaka en omladdning aktuell sida.

Webbläsartyp (navigator)

Ofta uppstår uppgiften att sätta upp en sida för ett specifikt visningsprogram (webbläsare). I det här fallet är två alternativ möjliga: bestämma webbläsartypen på serversidan eller på klientsidan. För det senare alternativet finns det ett fönsterobjekt i arsenalen av JavaScript-objekt. navigatör. De viktigaste egenskaperna för detta objekt listas nedan.

Låt oss titta på ett enkelt exempel på att bestämma tittartypen.

Källa: http://learn.javascript.ru/browser-objects

navigator: plattform och webbläsare

Navigatorobjektet innehåller allmän information om webbläsaren och operativsystemet. Två egenskaper är särskilt anmärkningsvärda:

• navigator.userAgent - innehåller information om webbläsaren.
• navigator.platform – innehåller information om plattformen, låter dig skilja på Windows/Linux/Mac osv.

alert(navigator.userAgent); alert(navigator.plattform); skärm

Skärmobjektet innehåller allmän information om skärmen, inklusive dess upplösning, färg osv. Det kan vara användbart för att avgöra att koden körs på mobil enhet med låg upplösning.

Besökarens aktuella skärmupplösning horisontellt/vertikalt finns i screen.width / screen.height .

Den här egenskapen kan användas för att samla in statistisk information om besökare.

Räknarnas JavaScript-kod läser denna information och skickar den till servern. Det är därför du kan se i statistik hur många besökare som kom från vilken skärm.

plats

Platsobjektet ger information om den aktuella URL:en och tillåter JavaScript att omdirigera besökaren till en annan URL. Värdet på den här egenskapen är ett objekt av typen Plats.

Lokaliseringsmetoder och egenskaper

Den viktigaste metoden är förstås toString . Den returnerar hela URL:en.

Kod som behöver utföra en strängoperation på plats måste först casta objektet till en sträng. Så här kommer felet att se ut:

// det kommer att bli ett fel, eftersom plats är inte en strängvarning(window .location.indexOf("://" ));

Och detta är korrekt:

// ledde till raden före indexOf alert((window .location + "" ).indexOf("://" ));

Alla följande egenskaper är strängar. Kolumnen "Exempel" innehåller deras värden för test-URL:

Platsobjektmetoder

assign(url) ladda ett dokument på den angivna webbadressen. Du kan helt enkelt sätta likhetstecken mellan window.location.href = url .

reload() ladda om dokumentet på den aktuella URL:en. Forceget-argumentet är ett booleskt värde, om det är sant, laddas dokumentet alltid om från servern, om det är falskt eller inte specificerat, så kan webbläsaren ta sidan från sin cache.

replace(url) ersätt det aktuella dokumentet med dokumentet på den angivna webbadressen.

toString() Returnerar en strängrepresentation av URL:en.

Om några andra window.location-egenskaper än hash ändras, kommer dokumentet att laddas om som om metoden window.location.assign() hade anropats på den modifierade webbadressen.

Du kan också omdirigera genom att uttryckligen tilldela plats , till exempel:

// webbläsaren kommer att ladda sidan http://javascript.ru window .location = "http://javascript.ru" ; ramar

En samling som innehåller ramar och iframes. Du kan kontakta dem antingen via nummer eller namn.

frames innehåller fönsterobjekten för underramar.

Följande kod tar ramen till den nya URL:en:

fönster .frames.example.location = "http://example.com" ;

historia

History-objektet låter dig ändra URL-adressen utan att ladda om sidan (inom samma domän) med hjälp av History API, samt dirigera besökaren fram och tillbaka genom historiken.

Historikobjektet ger inte möjlighet att läsa webbhistorik. Du kan skicka tillbaka besökaren genom att ringa history.back() eller vidarebefordra genom att ringa history.forward() , men webbläsaren tillhandahåller inte adresserna själva av säkerhetsskäl.

• Total
• Webbläsarobjekt:
• navigator, skärm Innehåller information om webbläsaren och skärmen.
• plats Innehåller information om den aktuella URL:en och låter dig ändra den. Alla andra ändringar än hash kommer att ladda om sidan. Du kan också ladda om sidan från servern genom att anropa location.reload(true) .

ramar Innehåller en samling fönsterobjekt för var och en av de underordnade ramarna. Varje ram är tillgänglig med nummer (från noll) eller med namn, vilket vanligtvis är bekvämare.

historik Låter dig skicka besökaren till föregående/nästa historiksida, samt ändra URL-adressen utan att ladda om sidan med hjälp av History API.

< script type= "text/javascript" >Detta objekt är rent informativt. Den ger information om webbläsaren.

Ansvarig för 2 knappar: 'framåt' och 'bakåt'. Webbläsaren, som följer länkar från sida till sida, sparar historiken för dessa övergångar. Dessa. du kan gå tillbaka en sida eller gå framåt en sida. Du kan simulera att klicka på dessa knappar från JavaScript med metoder och egenskaper.

Objektet har en egenskap - längd - längd.

Objektet har metoder: go(), back(), forward().

Låt oss titta på ett exempel:

< script type= "text/javascript>function length())( //visar antalet övergångar alert(" Antal övergångar: "+history.length);) function back())( //go back history.back();) function forward()) ( //gå framåt en 1 transition history.forward();) Platsobjekt

Ansvarig för adressfältet. Låter dig få och ändra sidans adress. Så snart adressen ändras navigerar webbläsaren automatiskt till den nya adressen. Dessa. du kan simulera en övergång till adressen.

Det finns egenskaper:

• hash - etikett.
• värd - värdnamn + port.
• värdnamnet är www and.ru i webbplatsadressen.
• href - innehåller adressfältet. Här kan du skriva en annan adress, och webbläsaren kommer att gå till denna adress.
• sökväg – själva sidan.
• hamn - stolpe används.
• protokollet är http:// eller ftp://.
• sök – parametrar efter frågetecknet.

Det finns metoder:

• assign() - hoppa till den angivna adressen.
• reload() - simulerar att klicka på "uppdatera"-knappen.
• ersätt () – övergång till angiven adress, men på öppen sida det finns ingen bakåtknapp, dvs. sparar inte denna sida i historien.

skärmobjekt

Detta är ett rent informationsobjekt. Den rapporterar användarens skärmstorlek i pixlar. Den har inga metoder, bara egenskaper:

• availHeight – tillgänglig skärmhöjd.
• availWidth – tillgänglig skärmbredd.
• colorDepth – antalet bitar som allokerats för att lagra färger (används inte för närvarande).
• höjd - höjden på användarens skärm.
• bredd - användarskärmens bredd.
• updateInterval - CRT-skärmens uppdateringsfrekvens (används ej).

Navigatorobjektet innehåller information om användarens webbläsare ( i synnerhet - är det tillgängligt användning av cookies filer och om Java-stöd är aktiverat).

Dessutom låter navigatorobjektet dig definiera typen operativsystem.

För att underlätta arbetet med navigatorobjektet kommer vi att visa alla dess egenskaper på skärmen. Låt oss komma ihåg materialet från föregående lektion.

var någon ;

/* Gå igenom egenskaper för navigatorobjektet */
för (alla i navigatorn)
{
document .write (valfri + "
" );
}

Information om webbläsaren - egenskapen userAgent;

Webbläsarspråk - språkegenskap;

Operativsystemnamn - oscpu-egenskap;

Är cookies aktiverade - egenskapscookieAktivera d;

Om användaren är ansluten till Internet - onLine-egenskapen.

Egenskaperna för navigatorobjektet nås genom en punkt.

document .write("Webbläsarnamn: " + navigator .userAgent + "
" );
document .write("Webbläsarspråk: " + navigator .language + "
" );
document .write("OS-namn: " + navigator .oscpu + "
" );
document .write("Cookies är aktiverade: " + navigator .cookieEnable d + "
" );
document .write("Nätverksanslutning: " + navigator .onLine + "
" );

Skärmobjektet hjälper dig att få data om användarens skärmupplösning, färgdjup etc.

Vi kommer att göra samma sak med skärmobjektet: först kommer vi att visa alla dess egenskaper på skärmen.

var någon ; /* Godtycklig variabel */

/* Gå igenom egenskaper för skärmobjektet */
för (alla på skärmen)
{
document .write (valfri + "
" );
}

Nu, med hjälp av skärmobjektets höjd- och breddegenskaper, får vi information om skärmupplösningen - dess höjd och bredd i pixlar. Och även om bitdjup färgpalett- egenskapen colorDepth.

document .write("Skärmhöjd: " + skärm .height + "px
" );
document .write("Skärmbredd: " + skärm .width + "px
" );

document .write("Färgdjup: " + skärm .colorDepth + "
" );

Platsobjektet returnerar URL:en för användarens aktuella fönster.

Den innehåller också data om delarna och komponenterna i den aktuella adressen: värdnamn, portnummer, protokoll, etc.

Egenskaper för platsobjektet.

var någon ; /* Godtycklig variabel */

/* Gå igenom egenskaper för platsobjektet */
för (alla på plats)
{
document .write (valfri + "
" );
}

Låt oss använda href-egenskapen för platsobjektet för att visa URL:en för det aktuella dokumentet.

document.write("URL: " + plats .href ) ;

Låt oss göra våra läxor för den här lektionen.

Ta reda på från vilken webbläsare personen kom till din sida och, beroende på webbläsare, visa:

Om firefox: "Din webbläsare är Firefox."
Om opera: "Din webbläsare är Opera."
Om chrome: "Din webbläsare är Chrome."

För att lösa denna läxa behöver du:

Använd egenskapen userAgent för navigatorobjektet för att få information om den aktuella webbläsaren.

När jag löste detta problem fick jag följande uppgifter om Firefox webbläsare, Opera och Chrome.

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:56.0) Gecko/20100101 Firefox /56.0

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, som Gecko) Chrome /61.0.3163.100 Safari/537.36 OPR /48.0.2685.39

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, som Gecko) Chrome /61.0.3163.100 Safari/537.36

Använd reguljära uttryck för att hitta webbläsarnamn från information om dem.

var webbläsare = navigator .userAgent; /* Information om den aktuella webbläsaren */

/* Skriv reguljära uttryck för att hitta matchningar i webbläsardata */
var regV_1 = /firefox/ i ; /* i - skiftlägeskänsligt mönster */
var regV_2 = /chrome/ i ;
var regV_3 = /opr/ i ;

/* Vi ställer upp villkoren */
if (webbläsare .match (regV_1 ) != null )
{
document.write("Din webbläsare är Firefox");
}

/* Här tar vi hänsyn till att Chrome finns i beskrivningen för Opera */
else if(webbläsare .match (regV_2 ) != null && webbläsare .match (regV_3 ) != "OPR" )
{
document.write("Din webbläsare är Chrome");
}

else if(webbläsare .match (regV_3 ) != null )
{
document.write("Din webbläsare är Opera");
}

annan
{
document.write("Du använder inte en känd webbläsare");