| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |
JavaScript-fönsterobjektet sitter högst upp i JavaScript-Objekthierarkin och representerar webbläsarfönstret (eller windows om du har mer än ett webbläsarfönster öppet åt gången). Fram till detta kapitel har vi fokuserat på interna och syntax JavaScript. I det här kapitlet kommer vi att börja få saker att hända på skärmen (vilket trots allt är ett av huvudsyftet med JavaScript). Fönsterobjektet tillåter utvecklare att utföra uppgifter som att öppna och stänga webbläsarfönster, visa varnings-och snabbdialogrutor och ställa in timeouts (ange en åtgärd som ska ske efter en viss tidsperiod). Även om Timeouts är en funktion i window-objektet kommer vi att täcka dem i JavaScript-Timeouts-kapitlet, snarare än i det här kapitlet.
referera till JavaScript-fönsterobjektet
som omfattas av JavaScript-objektets grunder är det vanligtvis nödvändigt om du vill använda punktnotation när du öppnar egenskaper eller metoder för ett objekt. Till exempel kommer följande scriptfragment åt metoden write() för dokumentobjektet:
document.write("Hello");
window-objektet är objektet på toppnivå i objekthierarkin. Som sådan, när en objektmetod eller egenskap refereras i ett skript utan objektnamn och punktprefix antas det av JavaScript vara medlem i window-objektet. Detta innebär, till exempel, att när du ringer fönstret alert() metod för att visa en varningsdialogruta fönstret. prefix är inte obligatoriskt. Därför uppnår följande metodsamtal samma sak:
window.alert();alert()
rapportera denna annons JavaScript-fönster Objektegenskaper
JavaScript-fönstret objektet innehåller ett antal egenskaper som kan inspekteras och användas i ett skript:
- fönster.stängd – används vid hantering av flera fönster anger den här egenskapen om ett fönster har stängts eller inte.
- fönster.defaultstatus / fönster.status-defaultstatus anger standardmeddelandet som visas i webbläsarens statusfält. status anger ett tillfälligt meddelande som ska visas i webbläsarens statusfält i stället för standardvärdet. Inaktiverad i många webbläsare.
- fönster.ramar – om fönstret innehåller ramar innehåller denna array matrisen med ramobjekt (se JavaScript-matriser detaljer om åtkomst till arrayer).
- window.name -fönster som öppnas av ett skript måste ges ett namn. Den här egenskapen innehåller namnet på motsvarande fönsterobjekt.
- fönster.öppnare-när ett fönster har öppnats i ett skript som finns i ett annat fönster innehåller den här egenskapen i barnfönstret ett referensfönster som öppnade det.
- fönster.överordnad-när du arbetar med ramar i ett fönster innehåller den här egenskapen en referens till fönsterobjektet som innehåller ramen.
- fönster.skärm-ett objekt som innehåller information om skärmen där fönstret visas (egenskaper som finns i detta objekt inkluderar höjd, bredd, availHeight, availWidth och colorDepth).
- fönster.själv-en hänvisning till det aktuella fönstret.
- fönster.top-en hänvisning till toppnivåfönstret när du arbetar med ramar.
öppna webbläsarfönster med JavaScript
ett nytt webbläsarfönster kan öppnas från ett JavaScript-skript med hjälp av metoden open() i window-objektet. Syntaxen för att öppna ett nytt fönster är följande:
newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");
Följande ger en förklaring av argumenten som skickas till open () – metoden:
- URL-anger webbadressen till webbsidan som ska laddas i det nya fönstret. Om ingen URL anges laddas ett tomt fönster.
- WindowName-anger fönstrets namn och används för att referera till fönstret.
- funktioner-en kommaseparerad lista över funktioner som låter dig anpassa fönstrets utseende. Alternativen är:
| inställning | förklaring | |
|---|---|---|
| bredd | anger den ursprungliga bredden (se innerWidth för storlek på innehållsområdet) | |
| höjd | anger den ursprungliga höjden för webbläsarklientfönstret (se innerheight för storlek på innehållsområdet) | innerWidth | anger den ursprungliga bredden för fönstrets innehållsområde |
| innerheight | anger den ursprungliga höjden för fönsterinnehållet area | |
| outerWidth | anger den ursprungliga bredden på navigeringsfönstret | |
| outerHeight | anger den ursprungliga höjden på navigeringsfönstret | |
| toolbar | Anger om fönstret ska innehålla webbläsarens verktygsfält eller inte | |
| anger om fönstret ska innehålla webbläsarens statusfält eller inte | ||
| beroende | anger om fönstret ska stängas i samklang med dess överordnade fönster | |
| menyraden | anger om fönstret ska stängas i samklang med dess överordnade fönster | |
| innehåller webbläsarens menyrad | ||
| plats | Anger om fönstret ska innehålla webbläsarens plats / URL-ruta | rullningslister | döljer/visar webbläsarens horisontella/vertikala rullningslister |
| resizable | Anger om användaren har rätt att ändra storlek på fönstret när det visas. | |
| kataloger | Anger om fönstret ska innehålla webbläsarens personliga verktygsfält. | |
| copyHistory | Anger om det nya fönstret ska innehålla en kopia av WEBBADRESSHISTORIKEN för det anropande fönstret | |
| vänster | angav antalet pixlar från vänster sida av skärmen till det nya fönstret | |
| topp | angav antalet pixlar från skärmens övre del till det nya fönstret | |
| alwayslowered | skapar ett nytt fönster som alltid är placerat under de andra webbläsarfönstren. Används ofta för de irriterande pop-under-annonserna. | |
| alwaysRaised | skapar ett nytt fönster som alltid är placerat över toppen av de andra webbläsarfönstren på skärmen. | |
| z-lock | låser nivån där webbläsaren visas i förhållande till andra webbläsarfönster. |
funktionerna höjd, bredd och position ställs in med siffror. De återstående funktionsalternativen kan ställas in med sanna eller falska värden (även ja, nej och 1 och 0 kan användas istället för sant och falskt). Ett frånvarande attribut anses vara falskt. Följande exempel skapar ett nytt fönster med en menyrad, specifik dimension och inget verktygsfält:
newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");
stänga webbläsarfönster med JavaScript
ett fönster kan stängas med window-objektets close () – metod. Namnet på fönstret (anges i metoden open ()) bör refereras när du utför en stängning så att du är säker på att stänga rätt fönster. Till exempel skapar följande kod ett nytt fönster och skapar en tryckknapp som, när den klickas, stänger det nya fönstret:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Close Window" onclick="newWindowObj.close()" /></form>
det är också möjligt att stänga fönstret som öppnade det aktuella fönstret med egenskapen öppnare för det aktuella fönsterobjektet:
window.opener.close()
detta stänger fönstret som öppnade fönstret där ovanstående skript körs.
flytta och ändra storlek på fönster
ett fönster kan flyttas till specifika koordinater på skärmen med hjälp av window-objektets moveTo () – metod som tar X-och y-koordinater som argument. Följande exempel flyttar ett nytt fönster till plats 100, 200 på skärmen när knappen ”flytta fönster” trycks in:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
förutom att flytta ett fönster till en viss ny plats är det också möjligt att flytta ett fönster i förhållande till sin nuvarande plats på skärmen med moveBy () – metoden för JavaScript-fönsterobjektet. Återigen tar metoden X-och y-värden som läggs till i de aktuella X-och y-koordinaterna för det angivna fönstret. Negativa värden kan användas för att ändra rörelsens riktning:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
metoderna window resizeTo() och resizeBy() fungerar på samma sätt genom att de låter dig ändra storleken på ett fönster antingen till en viss storlek eller till en ny storlek i förhållande till den aktuella storleken.
ändra Fönsterfokus
När ett fönster är det valda fönstret på skärmen sägs det ha fokus. Att klicka med muspekaren i ett fönster ger vanligtvis fönstret fokus. Med JavaScript är det möjligt att programmatiskt ändra fokus för ett fönster med hjälp av metoderna focus() och blur (). Följande exempel visar ett nytt fönster, suddar ut det så att öppningsfönstret fortfarande har fokus och ger en knapp för att växla fokus till det nya fönstret:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");newWindowObj.blur();</script><form action="null"> <input type="button" value="Focus New Window" onclick="newWindowObj.focus()" /></form>
Visa dialogrutor för meddelanderuta
JavaScript window – objektet tillhandahåller metoder för att visa tre typer av dialogrutor för meddelanden, dialogrutorna alert, confirmation och prompt:
- alert-avsedd att visa ett meddelande för användaren. Den innehåller ett meddelandeområde där varningsmeddelandet ska visas och en ”OK” – knapp som användaren kan klicka för att avvisa dialogrutan. Metoden alert () tar ett enda argument som representerar meddelandet som ska visas i dialogrutan. Följande webbsidfragment visar en varningsdialogruta med meddelandet” Du har inget giltigt lösenord ”när du klickar på knappen” Visa Varning”:
<form action="null"> <input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" /></form>
- bekräftelse – används när ett ja eller nej-svar måste erhållas från användaren. Denna dialogtyp visas med ett meddelande och ”OK” och ”Avbryt” – knapparna. Bekräfta () – metoden tar meddelandet som ska visas för användaren som ett argument och returnerar sant eller falskt beroende på om användaren tryckte på ”OK” eller ”Avbryt”:
<script language="JavaScript" type="text/javascript">function showConfirmation(){ var result = confirm("Would you like to continue?"); if (result) document.write("Continue"); else document.write("Do not continue");}</script><form action="null"> <input type="button" value="Show Confirmation" onclick="showConfirmation()" /></form>
- prompt – utformad för att göra det möjligt att få information från användaren. Dialogrutan består av ett meddelande till användaren, ett textinmatningsfält för inmatning av data och OK och Avbryt knappar. Metoden prompt () tar meddelandet som ska visas som ett argument och returnerar det värde som användaren har angett:
<script language="JavaScript" type="text/javascript">function showPrompt(){ var userInput = prompt("Please enter your name:"); document.write("Hello, " + userInput);}</script><form action="null"> <input type="button" value="Show Prompt" onclick="showPrompt()" /></form>
| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |