diff options
Diffstat (limited to 'files/sv-se/web/api')
| -rw-r--r-- | files/sv-se/web/api/filereader/index.html | 127 | ||||
| -rw-r--r-- | files/sv-se/web/api/filereader/readasdataurl/index.html | 124 | ||||
| -rw-r--r-- | files/sv-se/web/api/index.html | 15 | ||||
| -rw-r--r-- | files/sv-se/web/api/kryptonyckel/index.html | 114 | ||||
| -rw-r--r-- | files/sv-se/web/api/kryptonyckel/typ/index.html | 115 | ||||
| -rw-r--r-- | files/sv-se/web/api/subtlecrypto/genereranyckel/index.html | 197 | ||||
| -rw-r--r-- | files/sv-se/web/api/subtlecrypto/index.html | 83 | ||||
| -rw-r--r-- | files/sv-se/web/api/subtlecrypto/signum/index.html | 122 | ||||
| -rw-r--r-- | files/sv-se/web/api/window/getcomputedstyle/index.html | 131 | ||||
| -rw-r--r-- | files/sv-se/web/api/window/index.html | 509 |
10 files changed, 1537 insertions, 0 deletions
diff --git a/files/sv-se/web/api/filereader/index.html b/files/sv-se/web/api/filereader/index.html new file mode 100644 index 0000000000..89ebf980cd --- /dev/null +++ b/files/sv-se/web/api/filereader/index.html @@ -0,0 +1,127 @@ +--- +title: FileReader +slug: Web/API/FileReader +tags: + - API + - File API + - Files + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/FileReader +--- +<div>{{APIRef("File API")}}</div> + +<p>Objektet <code>FileReader</code> låter webbapplikationer asynkroniserat läsa innehåll i filer sparade på användarens dator. Man använder objekten {{domxref("File")}} eller {{domxref("Blob")}} för att specificera filerna eller datan som ska läsas.</p> + +<p>Objekt av typen File kan man få av från ett FileList-objekt till följd av att användaren har valt en fil med {{HTMLElement("input")}}, en <em>drag-och-släpp-operations</em> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer">DataTransfer</a>-objekt</code>, eller från API:et <code>mozGetAsFile()</code> på ett {{domxref("HTMLCanvasElement")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt> + <dd>Returnerar en nykonstruerad <code>FileReader</code>.</dd> +</dl> + +<p>Se <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> för detaljer och exempel (på engelska).</p> + +<h2 id="Egenskaper">Egenskaper</h2> + +<dl> + <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt> + <dd>Ett {{domxref("DOMException")}} som representerar ett fel som uppstod vid inläsning av filen.</dd> + <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt> + <dd>Ett nummer som indikerar vilket stadie FileReader-objektet är i. Följande värden finns: + <table class="standard-table"> + <tbody> + <tr> + <td><code>EMPTY</code></td> + <td><code>0</code></td> + <td>Ingen data har laddats ännu.</td> + </tr> + <tr> + <td><code>LOADING</code></td> + <td><code>1</code></td> + <td>Datan laddas just nu.</td> + </tr> + <tr> + <td><code>DONE</code></td> + <td><code>2</code></td> + <td>Hela läsförfrågningen är klar.</td> + </tr> + </tbody> + </table> + </dd> + <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt> + <dd>Filens innehåll. Denna egenskap är endast giltlig när operationen är färdig. Formatet på datan beror på vilken metod som användes för att initiera läsoperationen.</dd> +</dl> + +<h3 id="Händelsehanterare">Händelsehanterare</h3> + +<dl> + <dt>{{domxref("FileReader.onabort")}}</dt> + <dd>Hanterar händelsen {{event("abort")}}. Denna händelse aktiveras varje gång läsoperationen avbryts.</dd> + <dt>{{domxref("FileReader.onerror")}}</dt> + <dd>A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.</dd> + <dt>{{domxref("FileReader.onload")}}</dt> + <dd>A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.</dd> + <dt>{{domxref("FileReader.onloadstart")}}</dt> + <dd>A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.</dd> + <dt>{{domxref("FileReader.onloadend")}}</dt> + <dd>A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).</dd> + <dt>{{domxref("FileReader.onprogress")}}</dt> + <dd>A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.</dd> +</dl> + +<div class="note"> +<p>As <code>FileReader</code> inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.</p> +</div> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("FileReader.abort()")}}</dt> + <dd>Aborts the read operation. Upon return, the <code>readyState</code> will be <code>DONE</code>.</dd> + <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.</dd> + <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains the raw binary data from the file as a string.</dd> + <dt>{{domxref("FileReader.readAsDataURL()")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains a <code>data:</code> URL representing the file's data.</dd> + <dt>{{domxref("FileReader.readAsText()")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains the contents of the file as a text string.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("File API", "#dfn-filereader", "FileReader")}}</td> + <td>{{Spec2("File API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.FileReader")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a></li> + <li>{{domxref("File")}}</li> + <li>{{domxref("Blob")}}</li> +</ul> diff --git a/files/sv-se/web/api/filereader/readasdataurl/index.html b/files/sv-se/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..b7e4849bb5 --- /dev/null +++ b/files/sv-se/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,124 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +translation_of: Web/API/FileReader/readAsDataURL +--- +<p>Metoden <code>readAsDataURL</code> används för att läsa innehållet i en specificerad {{domxref("Blob")}} eller {{domxref("File")}}. När läsningen har slutförts, så blir {{domxref("FileReader.readyState","readyState")}} <code>DONE</code>, och {{event("loadend")}} utlöses. Vid den tidpunkten så innehåller attributet {{domxref("FileReader.result","result")}} datan som en <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">data: URL</a> som representerar filens data som en base64-kodad textsträng.</p> + +<div class="note"> +<p><strong>Märk:</strong> filens {{domxref("FileReader.result","result")}} resulterar i en textsträng som ej direkt kan avkodas som Base64. För att få ut bara en Base64-kodad textsträng, måste du ta bort <code>data:*/*;base64,</code> från textsträngen.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre> + +<h3 id="Parametrar">Parametrar</h3> + +<dl> + <dt><code>blob</code></dt> + <dd>Den {{domxref("Blob")}} eller {{domxref("File")}} som ska läsas från.</dd> +</dl> + +<h2 id="Exempel">Exempel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="file" onchange="previewFile()"><br> +<img src="" height="200" alt="Image preview..."></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function previewFile() { + var preview = document.querySelector('img'); + var file = document.querySelector('input[type=file]').files[0]; + var reader = new FileReader(); + + reader.addEventListener("load", function () { + preview.src = reader.result; + }, false); + + if (file) { + reader.readAsDataURL(file); + } +}</pre> + +<h3 id="Live_Result">Live Result</h3> + +<p>{{EmbedLiveSample("Example", "100%", 240)}}</p> + +<h2 id="Exempel_-_läsa_flera_filer">Exempel - läsa flera filer</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><input id="browse" type="file" onchange="previewFiles()" multiple> +<div id="preview"></div></pre> + +<h3 id="JavaScript_2">JavaScript</h3> + +<pre class="brush: js">function previewFiles() { + + var preview = document.querySelector('#preview'); + var files = document.querySelector('input[type=file]').files; + + function readAndPreview(file) { + + // Se till att `file.name` matchar våra fil-extensions kriteria + if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { + var reader = new FileReader(); + + reader.addEventListener("load", function () { + var image = new Image(); + image.height = 100; + image.title = file.name; + image.src = this.result; + preview.appendChild( image ); + }, false); + + reader.readAsDataURL(file); + } + + } + + if (files) { + [].forEach.call(files, readAndPreview); + } + +} +</pre> + +<div class="note"><strong>Märk:</strong> Konstruktorn för <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> stöddes inte av Internet Explorer i versionerna innan 10. För en full kompatibilitetskod kan du gärna gå till <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser möjlig lösning för bild förhandsvisning</a>. Se också <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">detta kraftfullare exempel</a>.</div> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td> + <td>{{Spec2("File API")}}</td> + <td>Första definitionen</td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsar_kompatibilitet">Webbläsar kompatibilitet</h2> + +<div class="hidden">Tabellen med kompatibilitet på denna sida är genererad från strukturerad data. Om du skulle vilja bidra till denna data, vänligen gå till <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> och skicka en pull-request till oss.</div> + +<p>{{Compat("api.FileReader.readAsDataURL")}}</p> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>{{domxref("FileReader")}}</li> + <li>{{domxref("URL.createObjectURL()")}}</li> +</ul> + +<div>{{APIRef("File API")}}</div> diff --git a/files/sv-se/web/api/index.html b/files/sv-se/web/api/index.html new file mode 100644 index 0000000000..33af530f64 --- /dev/null +++ b/files/sv-se/web/api/index.html @@ -0,0 +1,15 @@ +--- +title: 'Web API:er' +slug: Web/API +tags: + - API + - DOM + - JavaScript + - Referens + - Web + - Översikt +translation_of: Web/API +--- +<p><span class="seoSummary">När du skriver kod för webben med javascript, finns det en mängd olika API:er tillgänliga. Nedan är en lista övar alla gränssnitt (det vill säga, typer av objekt) som du kan använda i samband med utvecklingen av din Web app eller webbplats.</span></p> + +<div>{{APIListAlpha}}</div> diff --git a/files/sv-se/web/api/kryptonyckel/index.html b/files/sv-se/web/api/kryptonyckel/index.html new file mode 100644 index 0000000000..98e7039877 --- /dev/null +++ b/files/sv-se/web/api/kryptonyckel/index.html @@ -0,0 +1,114 @@ +--- +title: KryptoNyckel +slug: Web/API/KryptoNyckel +tags: + - API + - Gränssnitt + - Kryptering + - Referenser + - Webb Krypto API +translation_of: Web/API/CryptoKey +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><strong>KryptoNyckelns</strong> gränssnitt representerar en kryptografisk {{glossary("key")}} deriverad från en specifik nyckelalgoritm.</p> + +<p>Ett <em>KryptoNyckel</em> objekt kan erhållas med användning av {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} eller{{domxref("SubtleCrypto.importKey()")}}</p> + +<h2 id="Egenskaper">Egenskaper</h2> + +<p><em>Detta gränssnitt ärar inte någon egendom.</em></p> + +<dl> + <dt>{{domxref("CryptoKey.type")}}</dt> + <dd>Returnerar ett uppräknat värde som representerar typ av nyckel, en hemlig nyckel (för symmetrisk algoritm), en offentlig eller en privat nyckel (för en asymmetrisk algoritm)</dd> + <dt>{{domxref("CryptoKey.extractable")}}</dt> + <dd>Returnerar en {{jsxref("Boolean")}} Indikerar om den råa informationen kan exporteras till ansökan eller inte.</dd> + <dt>{{domxref("CryptoKey.algorithm")}}</dt> + <dd>Returnerar ett ogenomskinligt objekt som representerar en viss chiffer som nyckeln ska användas med.</dd> + <dt>{{domxref("CryptoKey.usages")}}</dt> + <dd>Returnerar en uppsättning uppräknade värden som anger vilken nyckel som kan användas för.</dd> +</dl> + +<h2 id="Metoder">Metoder</h2> + +<p><em>Detta gränssnitt arvs inte eller implementerar någon metod.</em></p> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>37</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>{{domxref("Crypto")}} och {{domxref("Crypto.subtle")}}.</li> +</ul> diff --git a/files/sv-se/web/api/kryptonyckel/typ/index.html b/files/sv-se/web/api/kryptonyckel/typ/index.html new file mode 100644 index 0000000000..bf41113bc2 --- /dev/null +++ b/files/sv-se/web/api/kryptonyckel/typ/index.html @@ -0,0 +1,115 @@ +--- +title: KryptoNyckel.typ +slug: Web/API/KryptoNyckel/typ +tags: + - API + - Egenskaper + - Gränssnitt + - Krypteringar + - KryptoNyckel + - Läs-endast + - Referenser + - Webb Krypto API +translation_of: Web/API/CryptoKey +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><strong>KryptoNyckel.typ</strong> har en skrivskyddad egenskap som anger typ av nyckel: om det är nyckeln för en symmetrisk algoritm(<code>"hemligt"</code>) eller för en asymmetrisk algoritm(<code>"publik"</code> eller <code>"privat"</code>, är beroende på dess syfte).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>resultat</em> = nyckel<code>.typ</code> +</pre> + +<h3 id="Returvärde">Returvärde</h3> + +<ul> + <li><code><em>resultat</em></code> är ett uppräknat värde som kan vara: + + <ul> + <li><code>"hemligt"</code> representerar den unika nyckeln som används för kryptering eller dekryptering av ett meddelande med en symmetrisk algoritm.</li> + <li><code>"publik"</code> representerar en offentligt delbar nyckel som används i en asymmetrisk algoritm.</li> + <li><code>"privat"</code> representerar en nyckel som används i en asymmetrisk algoritm som måste hållas privat.</li> + </ul> + </li> +</ul> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-type', 'CryptoKey.type') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsarkompatibilitet">Webbläsarkompatibilitet</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>{{CompatVersionUnknown}}</td> + <td>37</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>{{domxref("Crypto")}} och {{domxref("Crypto.subtle")}}.</li> + <li>{{domxref("CryptoKey")}}, gränssnittet tillhör det.</li> +</ul> diff --git a/files/sv-se/web/api/subtlecrypto/genereranyckel/index.html b/files/sv-se/web/api/subtlecrypto/genereranyckel/index.html new file mode 100644 index 0000000000..b25a00bf7f --- /dev/null +++ b/files/sv-se/web/api/subtlecrypto/genereranyckel/index.html @@ -0,0 +1,197 @@ +--- +title: SubtilKrypto.GenereraNyckel() +slug: Web/API/SubtleCrypto/genereraNyckel +tags: + - API + - Metoder + - Referenser + - SubtilKrypto + - Webb Krypto API +translation_of: Web/API/SubtleCrypto/generateKey +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><strong>SubtilKrypto.genereraNyckel() </strong> metoden returnerar en {{jsxref("Promise")}} av en nybildad {{domxref("CryptoKey")}}, för symmetriska algoritmer, eller en {{domxref("CryptoKeyPair")}}, innehållande två nyutvecklade nycklar, för asymmetrisk algoritm, som matchar algoritmen, användningarna och extraherbarheten ges som parametrar.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>resultat</em> = <em>crypto.subtle</em><code>.genereraNyckel(<em>algo</em>, <em>extraherbart</em>,<em>nyckelBruk</em>)</code>; +</pre> + +<h3 id="Parametrar">Parametrar</h3> + +<ul> + <li><em><code>algo</code></em> är ett ordboksobjekt som definierar nyckelgenereringsfunktionen som ska användas. Stödjande algoer är: <a href="/en-US/docs/Web/API/Web_Crypto_API/Supported_algorithms#AES-CBC">AES-CBC</a>, <code>AES-CTR</code>, <code>AES-GCM</code>, <code>RSA-OAEP</code>, <code>AES-KW</code>, <code>HMAC</code>, <code>RSASSA-PKCS1-v1_5</code>, <code>ECDSA</code>, <code>ECDH</code>, och <code>DH</code>. Formatet av ordboksobjekt är: + + <ul> + <li> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;"><code>"namn"</code>, </span></font>vilket motsvarar ett av de stödda algoerna som anges ovan,</p> + </li> + <li> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">"modulDimension"<code>, </code></span></font>vilket motsvarar antalet siffror som används i modulen</p> + </li> + <li> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;"><code>"publikExponent</code>",</span></font> a {{jsxref("Uint8Array")}} representerar den offentliga exponenten</p> + </li> + <li> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">"hashFunktion</span></font><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">", </span></font>ett ordbordsobjekt som refererar till hashalgoritmen att använda. Till exempel:</p> + + <ul> + <li> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;"><code>{namn: "SHA-512"}</code></span></font></p> + </li> + </ul> + </li> + </ul> + </li> + <li><code><em>extraherbart</em></code> är en {{jsxref("Boolean")}} Indikerar om nyckeln kan extraheras från {{domxref("CryptoKey")}} objekt på ett senare stadium.</li> + <li><code><em>nyckelBruk</em></code> är en {{jsxref("Array")}} vilket indikerar vad som kan göras med den nybildade nyckeln. Möjliga värden för fälten är: + <ul> + <li><code>"enkrypt"</code>, låter nyckeln användas för{{glossary("encryption", "encrypting")}} meddelanden.</li> + <li><code>"dekrypt"</code>, låter nyckeln användas för {{glossary("decryption", "decrypting")}} meddelanden.</li> + <li><code>"signum"</code>, låter nyckeln användas för {{glossary("signature", "signing")}} meddelanden.</li> + <li><code>"verifik"</code>, låter nyckeln användas för {{glossary("verification", "verifying the signature")}} av meddelanden.</li> + <li><code>"deriveKey"</code>, låter nyckeln användas som en basnyckel när en ny nyckel hämtas.</li> + <li><code>"derivBitar"</code>, låter nyckeln användas som en basnyckel när man tar bort bitar av data för användning i kryptografiska primitiver.</li> + <li><code>"vikNyckel"</code>, låter nyckeln slå in en symmetrisk nyckel för användning (överföring, lagring) i osäkra miljöer.</li> + <li><code>"osvepKey"</code>, tillåter nyckeln att packa upp en symmetrisk nyckel för användning (överföring, lagring) i osäkra miljöer.</li> + </ul> + </li> +</ul> + +<h3 id="Returvärde">Returvärde</h3> + +<ul> + <li><code><em>resultat</em></code> är en{{jsxref("Promise")}} som returnerar den genererade nyckeln som en{{domxref("CryptoKey")}} eller en {{domxref("CryptoKeyPair")}}.</li> +</ul> + +<h3 id="Undantag">Undantag</h3> + +<p>Löftet avvisas när följande undantag uppstår:</p> + +<ul> + <li>{{exception("SyntaxError")}} när <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><em>nyckelBruk</em></span></font> är tom men den genererade symmetriska nyckeln är av typen <code>"hemlig"</code> eller <code>"privat"</code> eller den genererade privata komponenten av det genererade asymmetriska tangentparet är tomt.</li> +</ul> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-generateKey', 'SubtleCrypto.generateKey()') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsarkompatibilitet">Webbläsarkompatibilitet</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Function</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>13</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>ECDSA</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop(36) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>DH</code></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop(35) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>{{CompatVersionUnknown}}</td> + <td>37</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>ECDSA</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile(36) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>DH</code></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile(35) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<p> </p> +</div> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>{{domxref("Crypto")}} och {{domxref("Crypto.subtle")}}.</li> + <li>{{domxref("SubtleCrypto")}}, gränssnittet tillhör det.</li> +</ul> diff --git a/files/sv-se/web/api/subtlecrypto/index.html b/files/sv-se/web/api/subtlecrypto/index.html new file mode 100644 index 0000000000..881c36812c --- /dev/null +++ b/files/sv-se/web/api/subtlecrypto/index.html @@ -0,0 +1,83 @@ +--- +title: SubtleCrypto +slug: Web/API/SubtleCrypto +tags: + - API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/SubtleCrypto +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p>The <code><strong>SubtleCrypto</strong></code> interface represents a set of cryptographic primitives. It is available via the {{domxref("Crypto.subtle")}} properties available in a window context (via {{domxref("Window.crypto")}}).</p> + +<div class="warning"> +<p>Per the spec: "Developers making use of the SubtleCrypto interface are expected to be aware of the security concerns associated with both the design and implementation of the various algorithms provided. The raw algorithms are provided in order to allow developers maximum flexibility in implementing a variety of protocols and applications, each of which may represent the composition and security parameters in a unique manner that necessitate the use of the raw algorithms."</p> +</div> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface neither inherits, nor implements, any property.</em></p> + +<h2 id="Methods">Methods</h2> + +<p>This interface doesn't inherit any method.</p> + +<dl> + <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of the encrypted data corresponding to the clear text, algorithm and key given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of the clear data corresponding to the encrypted text, algorithm and key given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.sign()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of the signature corresponding to the text, algorithm and key given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.verify()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a {{jsxref("Boolean")}} value indicating if the signature given as parameter matches the text, algorithm and key also given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.digest()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a digest generated from the algorithm and text given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.generateKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a newly generated {{domxref("CryptoKey")}}, for symmetrical algorithms, or a {{domxref("CryptoKeyPair")}}, containing two newly generated keys, for asymmetrical algorithm, that matches the algorithm, the usages and the extractability given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.deriveKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a newly generated {{domxref("CryptoKey")}} derived from a master key and a specific algorithm given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.deriveBits()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a newly generated buffer of pseudo-random bits derived from a master key and a specific algorithm given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.importKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, the raw key data, the usages and the extractability given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.exportKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a buffer containing the key in the format requested.</dd> + <dt>{{domxref("SubtleCrypto.wrapKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a wrapped symmetric key for usage (transfer, storage) in insecure environments. The wrapped buffer returned is in the format given in parameters, and contains the key wrapped by the given wrapping key with the given algorithm.</dd> + <dt>{{domxref("SubtleCrypto.unwrapKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a {{domxref("CryptoKey")}} corresponding to the wrapped key given in parameter.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.SubtleCrypto")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li> +</ul> diff --git a/files/sv-se/web/api/subtlecrypto/signum/index.html b/files/sv-se/web/api/subtlecrypto/signum/index.html new file mode 100644 index 0000000000..f3f07acac8 --- /dev/null +++ b/files/sv-se/web/api/subtlecrypto/signum/index.html @@ -0,0 +1,122 @@ +--- +title: SubtilKrypto.signum() +slug: Web/API/SubtleCrypto/signum +tags: + - API + - Metoder + - Referenser + - Signum + - SubtilKrypto + - Webb Krypto API +translation_of: Web/API/SubtleCrypto/sign +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><code><strong>SubtilKrypto.signum() </strong></code>metoden returnerar en {{jsxref("Promise")}} innehållande {{glossary("signature")}} motsvarar texten, algoritmen och {{glossary("key")}} avkastas som parametrar.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>alias</em> = k<em>rypto</em><code>.subtil.signum(<em>algo</em>, <em>nyckel</em>, <em>text2signum</em>)</code>; +</pre> + +<h3 id="Parameterar">Parameterar</h3> + +<ul> + <li><em><code>algo</code></em> är en {{domxref("DOMString")}} definierar signaturfunktionen att använda. Befrämjande värden är: <code>HMAC</code>, <code>RSASSA-PKCS1-v1_5</code>, and <code>ECDSA</code>.</li> + <li><em>nyckel </em> är en {{domxref("CryptoKey")}} innehåller den privata nyckeln som ska användas för signering.</li> + <li><em><code>text2signum</code></em> är en {{jsxref("ArrayBuffer")}} eller en {{jsxref("ArrayBufferView")}} innehållande data som ska signeras.</li> +</ul> + +<h3 id="Returvärde">Returvärde</h3> + +<ul> + <li><code><em>alias</em></code> är en {{jsxref("Promise")}} som returnerar signaturen till succé.</li> +</ul> + +<h3 id="Undantag">Undantag</h3> + +<p>Tillståndet nekas när följande anomali uppstår:</p> + +<ul> + <li>{{exception("InvalidAccessError")}} när signeringsnyckeln inte är en nyckel för begäran signeringsalgoritmen eller när man försöker använda en algoritm som är antingen okänd eller inte lämplig för signering.</li> +</ul> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikationer</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-sign', 'SubtleCrypto.sign()') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsarkompatibilitet">Webbläsarkompatibilitet</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundläggande stöd</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile">Funktion +<table class="compat-table"> + <tbody> + <tr> + <th> </th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundläggande stöd</td> + <td>{{CompatVersionUnknown}}</td> + <td>37</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li> + <li>{{domxref("SubtleCrypto")}}, gränssnittet tillhör det.</li> +</ul> diff --git a/files/sv-se/web/api/window/getcomputedstyle/index.html b/files/sv-se/web/api/window/getcomputedstyle/index.html new file mode 100644 index 0000000000..192d16bb23 --- /dev/null +++ b/files/sv-se/web/api/window/getcomputedstyle/index.html @@ -0,0 +1,131 @@ +--- +title: window.getComputedStyle() +slug: Web/API/Window/getComputedStyle +translation_of: Web/API/Window/getComputedStyle +--- +<p class="summary"><span class="seoSummary"><code><font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Metoden </span></font>window.getComputedStyle()</code> returerar ett objekt som rapporterar värdena hos alla CSS-egenskaper hos ett element efter att ha tillämpat aktiva stilmallar och löst ut godtycklig beräkning som dessa värden må innehålla.</span> Individuella CSS-egenskapers värden nås genom API:er som tillhandahålls av objektet eller genom att helt enkelt indexera via namnen på CSS-egenskaper.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]); +</pre> + +<dl> + <dt>element</dt> + <dd>Elementet {{domxref("Element")}} för vilket den beräknade css-stilen önskas.</dd> + <dt>pseudoElt{{optional_inline}}</dt> + <dd>En textsträng som specificerar pseudo-elementet att matcha. Måste utelämnas (eller null) för vanliga element.</dd> +</dl> + +<div class="note"><strong>Märk:</strong> Innan Gecko 2.0 {{geckoRelease("2.0")}}, så krävdes <code>pseudoElt</code> parametern. Ingen annan av de stora webbläsarna medförde krav på att denna parameter var specificerad om null. Gecko har gjorts om till att matcha beteendet hos andra webbläsare.</div> + +<p>Den returnerade <code>stilen</code> är ett <em>realtids-</em> {{domxref("CSSStyleDeclaration")}} objekt, som uppdaterar sigsjälvt automatiskt när elements stil ändras.</p> + +<h2 id="Exempel">Exempel</h2> + +<p>I detta exempel stilger vi ett simpelt {{htmlelement("div")}} element, sen hämtar vi css-stilar med hjälp av <code>getComputedStyle()</code>, skriver ut dem in i text-innehåll hos ett <code><div></code>-element.</p> + +<pre class="brush: html"><p>Hello</p></pre> + +<pre class="brush: css">p { + width: 400px; + margin: 0 auto; + padding: 20px; + line-height: 2; + font-size: 2rem; + font-family: sans-serif; + background: purple; + color: white; + text-align: center; +}</pre> + +<pre class="brush: js">let para = document.querySelector('p'); +let compStyles = window.getComputedStyle(para); +para.textContent = 'My computed font-size is ' + compStyles.getPropertyValue('font-size') + ',\nand my computed line-height is ' + compStyles.getPropertyValue('line-height') + '.';</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Examples', '100%', '240px')}}</p> + +<h2 id="Beskrivning">Beskrivning</h2> + +<p>Det returnerade objektet är av samma {{domxref("CSSStyleDeclaration")}} typ som det objekt som returnerats från elementets {{domxref("HTMLElement.style", "style")}} egenskap; hur som helst, de två objekten har skilda syften. Objektet som returnerats från <code>getComputedStyle</code> är read-only (läs enkom) och kan användas för att inspektera elementets css-stil (inklusive de satta av ett <code><style></code>-element eller en extern stilmall). Objektet <code>elt.style</code> bör användas för att sätta stil på ett specifikt element.</p> + +<p>Det första argumentet måste vara ett Element (att skicka en icke-Element-nod, såsom en #text-nod, kommer orsaka kast av error). Från Gecko 1.9.2 {{geckoRelease("1.9.2")}} och framåt, har returnerade URL-värden nu citattecken runt URL:en, som det här: <code>url("http://foo.com/bar.jpg")</code>.</p> + +<h2 id="defaultView"><code>defaultView</code></h2> + +<p>I många kodexempel online, används <code>getComputedStyle</code> från objektet <code>document.defaultView</code>. I nästan alla förekomster, är detta onödigt, då <code>getComputedStyle</code> existerar i objektet <code>window</code> också. Trolightvis så var "defaultView-möstret" en kombination av (1) folk som inte vill skriva en spec för window och (2) göra ett API som också kunde användas med Java. I vilket fall, det finns <a class="link-https" href="https://github.com/jquery/jquery/pull/524#issuecomment-2241183" title="https://github.com/jquery/jquery/pull/524#issuecomment-2241183">ett enda fall</a> då <code>defaultView</code> metoden måste användas: när man använder Firefox 3.6 för att nå stilar i frames.</p> + +<h2 id="Användning_med_pseudo-element">Användning med pseudo-element</h2> + +<p>getComputedStyle kan dra ut stilinfo från pseudo-element (till exempel, <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code>—se <a class="external" href="https://www.w3.org/TR/css-pseudo-4/">spec</a> här).</p> + +<pre class="brush: html"><style> + h3::after { + content: ' rocks!'; + } +</style> + +<h3>generated content</h3> + +<script> + var h3 = document.querySelector('h3'); + var result = getComputedStyle(h3, ':after').content; + + console.log('the generated content is: ', result); // returns ' rocks!' +</script> +</pre> + +<h2 id="Märk">Märk</h2> + +<p>Det returnerade {{domxref("CSSStyleDeclaration")}} objektet kommer att innehålla aktiva värden för alla stödda CSS-egenskapers <u>långhanda</u> namn. Ett exempel på långhanda namn är <code>border-bottom-width</code> där <code>border-width</code> och <code>border</code> är exempel på <a href="/en-US/docs/Web/CSS/Shorthand_properties">korthanda egenskapsnamn</a>. Det är säkrast att söka på värden bara genom långhanda namn liksom <code>font-size</code>. Att söka css med korthanda namn såsom <code>font</code> kommer inte fungera med majoriteten av webbläsare.</p> + +<p>CSS-egenskapens värden kan nås med hjälp av <code>getPropertyValue(propName)</code> API:et eller genom att indexera direkt in i objektet så som <code>cs[' z-index']</code> eller <code>cs.zIndex</code>.</p> + +<p>Värdena som returneras av <code>getComputedStyle</code> är kända som {{cssxref("resolved_value", "resolved values")}}. Dessa är oftast samma som med CSS 2.1 {{cssxref("computed_value","computed values")}}, men för vissa äldre egenskaper som <code>width</code>, <code>height</code> eller <code>padding</code>, är de istället {{cssxref("used_value","used values")}}. Ursprungligen definierade CSS 2.0 de beräknade värdena att vara de "redo att användas" slutliga värdena hos egenskaper efter genomflöde och arv, men CSS 2.1 omdefinierade beräknade värden som för-layout, och använda vädet som efter-layout. För CSS 2.0 egenskaper, så returnerar funktionen <code>getComputedStyle</code> vad som beräknade värden förr innebar, det som nu kallas <strong>begagnade värden</strong>. Ett exempel på skillnad mellan för- och efter-layout-värden innefattar lösning av procentvärden som representerar bredd eller höjd hos ett element (dess s.k. layout), då dessa kommer ersättas av deras pixel-motsvarigheter bara i fallet av begagnade värden.</p> + +<p>Det returnerade värdet är i vissa kända fall ej exakt satta med flit. Närmare bestämt, för att undvika den så kallade CSS History Läckage säkerhets-frågan, så kan webbläsare faktiskt "ljuga" om det begagnade värdet för en länk och alltid returnera värden som om en användare aldrig har besökt webbsidan. Se <a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> och <a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a> för detaljer för examplena på hur detta är implementerat. De flesta andra moderna webbläsare har tillämpat liknande ändringar på användandet av pseudo-selector-stilar och värdena som returneras av <code>getComputedStyle</code>.</p> + +<p>Under en CSS-övergång, så returnerar <code>getComputedStyle</code> original-egenskaps värde i Firefox, men slutlig-egenskaps värde i WebKit.</p> + +<p>I Firefox, så returnerar egenskaper med värdet <code>auto</code> det begangnade värdet, inte värdet <code>auto</code>. Så om du tillämpar <code>top:auto;</code> och <code>bottom:0</code>; på ett element som har <code>height:30px</code> och dess innehållande block har <code>height:100px;</code>, efter att ha begärt den beräknade stilen för <code>top</code>, så kommer Firefox returnera <code>top:70px</code>, som <code>100px-30px=70px</code>.</p> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", "getComputedStyle()")}}</td> + <td>{{Spec2("DOM2 Style")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitet_i_webbläsare">Kompatibilitet i webbläsare</h2> + +<div class="hidden">Tabellen med kompatibilitet på denna sida är genererad från strukturerad data. Om du vill bidra till datat, vänligen besök adressen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> och skicka oss ett pull request.</div> + +<p>{{Compat("api.Window.getComputedStyle")}}</p> + +<h2 id="See_also" name="See_also">Se även</h2> + +<ul> + <li>{{domxref("window.getDefaultComputedStyle")}}</li> + <li>{{cssxref("resolved_value", "Resolved Value")}}</li> +</ul> + +<div>{{APIRef}}</div> diff --git a/files/sv-se/web/api/window/index.html b/files/sv-se/web/api/window/index.html new file mode 100644 index 0000000000..70b807464b --- /dev/null +++ b/files/sv-se/web/api/window/index.html @@ -0,0 +1,509 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - Tab + - TopicStub + - Window +translation_of: Web/API/Window +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">The <strong><code>Window</code></strong> interface represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{domxref("document.defaultView")}} property.</p> + +<p>A global variable, <code>window</code>, representing the window in which the script is running, is exposed to JavaScript code.</p> + +<p>The <code>Window</code> interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. However, the <code>Window</code> interface is a suitable place to include these items that need to be globally available. Many of these are documented in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a> and the <a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a>.</p> + +<p>In a tabbed browser, each tab is represented by its own <code>Window</code> object; the global <code>window</code> seen by JavaScript code running within a given tab always represents the tab in which the code is running. That said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as {{Domxref("Window.resizeTo", "resizeTo()")}} and {{Domxref("Window.innerHeight", "innerHeight")}}. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> + +<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> + +<dl> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}} {{readOnlyInline}}</dt> + <dd>This property indicates whether the current window is closed or not.</dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> + <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</dd> + <dt>{{domxref("Window.controllers")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns the XUL controller objects for the current chrome window.</dd> + <dt>{{domxref("Window.customElements")}} {{ReadOnlyInline}}</dt> + <dd>returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a> and get information about previously registered custom elements.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>Returns the browser crypto object.</dd> + <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> + <dd>Gets/sets the status bar text for the given window.</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> + <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt> + <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>Synonym of {{domxref("window.personalbar")}}</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the document that the window contains.</dd> + <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd> + <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.event")}} {{ReadOnlyInline}}</dt> + <dd>Returns the <strong>current event</strong>, which is the event currently being handled by the JavaScript code's context, or <code>undefined</code> if no event is currently being handled. The {{domxref("Event")}} object passed directly to event handlers should be used instead whenever possible.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>Returns an array of the subframes in the current window.</dd> + <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>This property indicates whether the window is displayed in full screen or not.</dd> + <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> + <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> + Was: Multiple storage objects that are used for storing data across multiple pages.</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the history object.</dd> + <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> + <dt>{{domxref("Window.location")}}</dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt> + <dd>The time in milliseconds since epoch at which the current animation cycle began. Use {{domxref("Animation.startTime")}} instead.</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>Gets/sets the name of the window.</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the navigator object.</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.orientation")}} {{non-standard_inline}} {{deprecated_inline}} {{readOnlyInline}}</dt> + <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the outside of the browser window.</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the outside of the browser window.</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollX")}}.</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollY")}}</dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + + <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> + <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> + <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}}</dt> + <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history. This method is obsolete; you should instead use {{domxref("History.back", "window.history.back()")}}.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history. This method is obsolete; you should instead use {{domxref("History.forward", "window.history.forward()")}}.</dd> + <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Opens a new dialog window.</dd> + <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>Opens the Print Dialog to print the current document.</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>Resizes the current window by a certain amount.</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>Dynamically resizes window.</dd> + <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>Scrolls the window to a particular place in the document.</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>Scrolls the document in the window by the given amount.</dd> + <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the current document by the specified number of pages.</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> + <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> + <dd>Changes the cursor for the current window</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>Executes a function after the browser has finished other heavy tasks</dd> + <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> + <dd>Toggles a user's ability to resize a window.</dd> + <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> + <dd>Sizes the window according to its content.</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>This method stops window loading.</dd> + <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Starts the process of fetching a resource from the network.</dd> + <dt>{{domxref("EventTarget.removeEventListener")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> + <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("Window.onappinstalled")}}</dt> + <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called if accelerometer detects a change (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called when the orientation is changed (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> + <dd>An event handler property for any device orientation changes.</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("Window.ongamepadconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd> + <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd> + <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events.</dd> + <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> + <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd> + <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> + <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd> + <dt>{{domxref("Window.onvrdisplayblur")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd> + <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> + <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd> +</dl> + +<h3 id="Event_handlers_implemented_from_elsewhere">Event handlers implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Called after the window loses focus, such as due to a popup.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Called after the ANY mouse button is pressed & released</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Called when a double click is made with ANY mouse button.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Called after the window is closed</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Called when the RIGHT mouse button is pressed</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Called when the value of an <input> element changes</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Called when ANY mouse button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Called continously when the mouse is moved inside the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Called when the pointer leaves the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Called when the pointer enters the window</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Called when ANY mouse button is released</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Called when network connection is established. See {{event("online")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Called when a back button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Called when a form is reset</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>Called continuously as you are resizing the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>Called when the mouse wheel is rotated around any axis</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Called after text in an input field is selected</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Called when a form is submitted</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Called when the user navigates away from the page.</dd> +</dl> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("DOMParser")}}</dt> + <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd> + <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> + <dt>{{domxref("Window.QueryInterface")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dt>{{domxref("Window.XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> +</ul> |