Skip to content

Commit 6e3a0ab

Browse files
committed
translated first part
1 parent 132edde commit 6e3a0ab

File tree

1 file changed

+69
-70
lines changed

1 file changed

+69
-70
lines changed

3-frames-and-windows/01-popup-windows/article.md

Lines changed: 69 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,95 @@
1-
# Popups and window methods
1+
# Metodi per popups and window
22

3-
A popup window is one of the oldest methods to show additional document to user.
3+
L'apertura di una finestra di popup è uno dei metodi più antichi utilizzato per mostrare ulteriori pagine all'utente.
44

5-
Basically, you just run:
5+
Crearne una è molto banale:
66
```js
77
window.open('https://javascript.info/')
88
```
99

10-
...And it will open a new window with given URL. Most modern browsers are configured to open url in new tabs instead of separate windows.
10+
...Il codice visto sopra aprirà una nuova finestra all URL fornito. La maggior parte dei browser moderni aprirà l'url in un'altra tab piuttosto che aprire una nuova finestra.
1111

12-
Popups exist from really ancient times. The initial idea was to show another content without closing the main window. As of now, there are other ways to do that: we can load content dynamically with [fetch](info:fetch) and show it in a dynamically generated `<div>`. So, popups is not something we use everyday.
12+
Le finestre a popup esistono da molto tempo. Lo scopo iniziale era quello di utilizzarle per mostrare del contenuto aggiuntivo senza dover chiudere la finestra principale. Ad oggi, esistono altri modi per farlo: ad esempio, possiamo caricare il contenuto dinamicamente utilizzando [fetch](info:fetch) e mostrando il contenuto in un `<div>` generato dinamicamente. Quindi, i popup, non sono una cosa che utilizziamo molto spesso.
1313

14-
Also, popups are tricky on mobile devices, that don't show multiple windows simultaneously.
14+
Inoltre, i popup possono essere ingannevoli su dispositivi mobile, poiché non verranno mostrare più finestra contemporaneamente.
1515

16-
Still, there are tasks where popups are still used, e.g. for OAuth authorization (login with Google/Facebook/...), because:
16+
Ciònonostante, esistono alcune applicazioni in cui i popup sono ancora utilizzati, e.g. per il login OAuth (login con Google/Facebook/...), perché:
1717

18-
1. A popup is a separate window which has its own independent JavaScript environment. So opening a popup from a third-party, non-trusted site is safe.
19-
2. It's very easy to open a popup.
20-
3. A popup can navigate (change URL) and send messages to the opener window.
18+
1. Un popup è una finestra separata con un suo ambiente JavaScript separato. Quindi l'apertura di un popup da un sito di terze parti, che potrebbe non essere affidabile, è un operazione sicura.
19+
2. E' molto semplice aprire un popup.
20+
3. Un popup può navigare (cambiare URL) ed inviare messaggi alla finestra che lo ha generato.
2121

22-
## Popup blocking
22+
## Blocco dei popup
2323

24-
In the past, evil sites abused popups a lot. A bad page could open tons of popup windows with ads. So now most browsers try to block popups and protect the user.
24+
In passato, i siti con scopi maligni, abusavano dei popup. Una pagina con pessimi intenti, poteva aprire decine di finestre di ads. Per questo motivo, molti browser moderni tendono a bloccare le finestere di popup, per proteggere gli utenti.
2525

26-
**Most browsers block popups if they are called outside of user-triggered event handlers like `onclick`.**
26+
**Molti browser bloccano i popup se questi vengono invocati da eventi non generati da utente. Un evento permesso è quello di `onclick`.**
2727

28-
For example:
28+
Ad esempio:
2929
```js
30-
// popup blocked
30+
// popup bloccato
3131
window.open('https://javascript.info');
3232

33-
// popup allowed
33+
// popup permesso
3434
button.onclick = () => {
3535
window.open('https://javascript.info');
3636
};
3737
```
3838

39-
This way users are somewhat protected from unwanted popups, but the functionality is not disabled totally.
39+
In questo modo gli utenti sono protetti. almeno parzialmente, dai popup indesiderati, ma allo stesso tempo la funzionalità di popup non viene completamente disattivata.
4040

41-
What if the popup opens from `onclick`, but after `setTimeout`? That's a bit tricky.
41+
Cosa accadrebbe nel caso in cui un popup viene aperto in seguito ad un evento di `onclick`, ma dopo un `setTimeout`? Questa domanda può essere ingannevole.
4242

43-
Try this code:
43+
Provate voi stessi questo codice:
4444

4545
```js run
46-
// open after 3 seconds
46+
// si aprirà dopo 3 secondi
4747
setTimeout(() => window.open('http://google.com'), 3000);
4848
```
4949

50-
The popup opens in Chrome, but gets blocked in Firefox.
50+
Il popup si apre in Chrome, ma viene bloccato in Firefox.
5151

52-
...If we decrease the delay, the popup works in Firefox too:
52+
...Se proviamo a ridurre il delay, il popup si aprirà anche in Firefox:
5353

5454
```js run
55-
// open after 1 seconds
55+
// si aprirà dopo 1 secondo
5656
setTimeout(() => window.open('http://google.com'), 1000);
5757
```
5858

59-
The difference is that Firefox treats a timeout of 2000ms or less are acceptable, but after it -- removes the "trust", assuming that now it's "outside of the user action". So the first one is blocked, and the second one is not.
59+
La differenza sta nel fatto che Firefox tratta un timeout di 2000ms, o inferiore, come accettabile, qualsiasi valore che sia superiore verrà trattato come "inaffidabile", assumendo che un tale tiemeout is "fuori dall'azione dell'utente". Quindi nel primo caso il popup viene bloccato, mentre nel secondo no.
6060

6161
## window.open
6262

63-
The syntax to open a popup is: `window.open(url, name, params)`:
63+
La sintassi da utilizzare per aprire un popup è: `window.open(url, name, params)`:
6464

6565
url
66-
: An URL to load into the new window.
66+
: Un URL da caricare nella nuova finestra.
6767

6868
name
69-
: A name of the new window. Each window has a `window.name`, and here we can specify which window to use for the popup. If there's already a window with such name -- the given URL opens in it, otherwise a new window is opened.
69+
: Un nome per la nuova finestra. Ogni finestra possiede un `window.name`, e qui possiamo specificare quale finestra utilizzare per aprire il popup. Se esiste già una finestra con lo stesso nome, l'URL fornito verrà aperto in quest'ultima, altrimenti verrà aperta una nuova finestra.
7070

7171
params
72-
: The configuration string for the new window. It contains settings, delimited by a comma. There must be no spaces in params, for instance: `width=200,height=100`.
72+
: La configurazione, sotto forma di stringa, da fornire alla nuova finestra. Contiene le impostazioni, separate da virgola. Non devono essere contenuti spazi nella configurazione, ad esempio: `width=200,height=100`.
7373

74-
Settings for `params`:
74+
Impostazioni disponibili in `params`:
7575

76-
- Position:
77-
- `left/top` (numeric) -- coordinates of the window top-left corner on the screen. There is a limitation: a new window cannot be positioned offscreen.
78-
- `width/height` (numeric) -- width and height of a new window. There is a limit on minimal width/height, so it's impossible to create an invisible window.
79-
- Window features:
80-
- `menubar` (yes/no) -- shows or hides the browser menu on the new window.
81-
- `toolbar` (yes/no) -- shows or hides the browser navigation bar (back, forward, reload etc) on the new window.
82-
- `location` (yes/no) -- shows or hides the URL field in the new window. FF and IE don't allow to hide it by default.
83-
- `status` (yes/no) -- shows or hides the status bar. Again, most browsers force it to show.
84-
- `resizable` (yes/no) -- allows to disable the resize for the new window. Not recommended.
85-
- `scrollbars` (yes/no) -- allows to disable the scrollbars for the new window. Not recommended.
76+
- Posizione:
77+
- `left/top` (numeric) -- coordinate della finestra rispetto all'angolo in alto a sinistra dello schermo. C'è però una limitazione: una nuova finestra non può essere posizionata fuori dallo schermo.
78+
- `width/height` (numeric) -- larghezza ed altezza della nuova finestra. Anche le dimensioni width/height hanno delle limitazioni in quanto dimensioni minime, quindi è impossibile creare finestre invisibili.
79+
- Caratteristiche della finestra:
80+
- `menubar` (yes/no) -- per mostrare o nascondere il menu del browser nella nuova finestra.
81+
- `toolbar` (yes/no) -- per mostrare o nascondere la barra di navigazione del browser (back, forward, reload etc) nella nuova finestra.
82+
- `location` (yes/no) -- per mostrare o nascondere il campo URL nella nuova finestra. Firefox and IE non permettono di nasconderlo.
83+
- `status` (yes/no) -- per mostrare o nascondere la barra di stato. Anche in questo caso, molti browser non permettono di nasconderla.
84+
- `resizable` (yes/no) -- permette di disabilatare il ridemensionamento della nuova finestra. Sconsigliato.
85+
- `scrollbars` (yes/no) -- permette di disabilitare la scrollbar nella nuova finestra. Sconsigliato.
8686

8787

88-
There is also a number of less supported browser-specific features, which are usually not used. Check <a href="https://developer.mozilla.org/en/DOM/window.open">window.open in MDN</a> for examples.
88+
Ci sono molte altre caratterstiche meno supportate e specifiche per alcuni browser, che generalmente non vengono utilizzate. Potete trovare degli esempi di queste nella documentazione <a href="https://developer.mozilla.org/en/DOM/window.open">window.open di MDN</a>.
8989

90-
## Example: a minimalistic window
90+
## Esempio: una finestra minimalista
9191

92-
Let's open a window with minimal set of features, just to see which of them browser allows to disable:
92+
Proviamo ad aprire una finestra con un limitato insieme di caratteristiche, in modo tale da renderci conto quali di queste i browser ci permettono di disabilitare:
9393

9494
```js run
9595
let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
@@ -98,9 +98,9 @@ width=0,height=0,left=-1000,top=-1000`;
9898
open('/', 'test', params);
9999
```
100100

101-
Here most "window features" are disabled and window is positioned offscreen. Run it and see what really happens. Most browsers "fix" odd things like zero `width/height` and offscreen `left/top`. For instance, Chrome open such a window with full width/height, so that it occupies the full screen.
101+
In questo esempio, molte delle "caratteristiche della finestra" sono disabilitate e la finestra viene posizionata fuori dallo schermo. Provate ad eseguirla per vedere cosa accade. La maggior parte dei browser sistemerà "le proprietà stane", come ad esempio il valore zero per `width/height` ed il posizionamento fuori dallo schermo impostato con `left/top`. Ad esempio, Chrome aprirà questa finestra a dimensione massima, in modo tale che questa occupi l'intero schermo.
102102

103-
Let's add normal positioning options and reasonable `width`, `height`, `left`, `top` coordinates:
103+
Proviamo ora ad aggiungere delle opzioni di posizionamento impstando `width`, `height`, `left`, `top` con valori ragionevoli:
104104

105105
```js run
106106
let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
@@ -109,34 +109,34 @@ width=600,height=300,left=100,top=100`;
109109
open('/', 'test', params);
110110
```
111111

112-
Most browsers show the example above as required.
112+
La maggior parte dei browser mostrerà l'esempio sopra esattamente con i parametri come richiesti.
113113

114-
Rules for omitted settings:
114+
Le regole applicate per le impostazioni omesse sono:
115115

116-
- If there is no 3rd argument in the `open` call, or it is empty, then the default window parameters are used.
117-
- If there is a string of params, but some `yes/no` features are omitted, then the omitted features assumed to have `no` value. So if you specify params, make sure you explicitly set all required features to yes.
118-
- If there is no `left/top` in params, then the browser tries to open a new window near the last opened window.
119-
- If there is no `width/height`, then the new window will be the same size as the last opened.
116+
- Se non viene fornito il terzo argomento alla funzione `open`, oppure è vuoto, allora vengono utilizzati i parametri di default della finestra.
117+
- Se viene fornita una stringa di parametri, ma vengono omesse proprietà di tipo `si/no`, allora verranno impostate di default a `no`. Quindi nel caso in cui forniste dei parametri, assicuratevi di impostarli esplicitamente a `yes`.
118+
- Se non vengono forniti i parametri `left/top`, allora il browser aprirà la nuova finestra vicino all'ultima aperta.
119+
- Se non vengono forniti i parametri `width/height`, allora il browser aprirà la nuova finestra con la stessa diemensione dell'ultima aperta.
120120

121-
## Accessing popup from window
121+
## Accedere al popup dalla finestra
122122

123-
The `open` call returns a reference to the new window. It can be used to manipulate it's properties, change location and even more.
123+
L'invocazione di `open` torna un riferimento alla finestra appena aperta. Può quindi essereu utilizzato per manipolarne le proprietà, cambiarne la posizione e molto altro.
124124

125-
In this example, we generate popup content from JavaScript:
125+
In questo esempio, generiamo del contenuto per il popup tramite JavaScript:
126126

127127
```js
128128
let newWin = window.open("about:blank", "hello", "width=200,height=200");
129129

130130
newWin.document.write("Hello, world!");
131131
```
132132

133-
And here we modify the contents after loading:
133+
Ed ora, dopo il caricamento, lo modifichiamo:
134134

135135
```js run
136136
let newWindow = open('/', 'example', 'width=300,height=300')
137137
newWindow.focus();
138138

139-
alert(newWindow.location.href); // (*) about:blank, loading hasn't started yet
139+
alert(newWindow.location.href); // (*) about:blank, il caricamento non è ancora iniziato
140140

141141
newWindow.onload = function() {
142142
let html = `<div style="font-size:30px">Welcome!</div>`;
@@ -146,19 +146,19 @@ newWindow.onload = function() {
146146
};
147147
```
148148

149-
Please note: immediately after `window.open`, the new window isn't loaded yet. That's demonstrated by `alert` in line `(*)`. So we wait for `onload` to modify it. We could also use `DOMContentLoaded` handler for `newWin.document`.
149+
Da notare: nel momento immediatamente successivo a `window.open`, la nuova finestra non è ancora stata caricata. Lo abbiamo dimostrato tramite `alert` in riga `(*)`. Quindi dovremo attendere l'evento `onload`, prima di poter effetuare modifiche. Possiamo utilizzare anche l'handler `DOMContentLoaded` per `newWin.document`.
150150

151-
```warn header="Same origin policy"
152-
Windows may freely access content of each other only if they come from the same origin (the same protocol://domain:port).
151+
```warn header="Politica della stessa origine"
152+
Le finestre possono accedere liberamente al contenuto delle altre, ma solamente se queste appartengono alla stessa origine (lo stesso protocol://domain:port).
153153
154-
Otherwise, e.g. if the main window is from `site.com`, and the popup from `gmail.com`, that's impossible for user safety reasons. For the details, see chapter <info:cross-window-communication>.
154+
Ad esempio, nel caso in cui il dominio della finestra principale sia `site.com`, mentre quello del popup sia `gmail.com`, allora l'accesso contenuto di quest'ultima non è permesso, per questioni di sicurezza. Per maggiori dettagli, vedi il capitolo <info:cross-window-communication>.
155155
```
156156

157-
## Accessing window from popup
157+
## Accedere alla finestra dal popup
158158

159-
A popup may access the "opener" window as well using `window.opener` reference. It is `null` for all windows except popups.
159+
Un popup può accedere alla finestra che lo ha generato, utilizzando il riferimento `window.opener`. Il quale è impostato a `null` per tutte le finestre ad eccezione di quelle di popup.
160160

161-
If you run the code below, it replaces the opener (current) window content with "Test":
161+
Se provate ad eseguire il codice qui sotto, vederte che il contenuto di questa pagina (pagina principale) verrà sostituito con la stringa "Test":
162162

163163
```js run
164164
let newWin = window.open("about:blank", "hello", "width=200,height=200");
@@ -168,20 +168,19 @@ newWin.document.write(
168168
);
169169
```
170170

171-
So the connection between the windows is bidirectional: the main window and the popup have a reference to each other.
171+
Quindi la connesione tra le finestre è bidirezionale: sia la pagina principale che quella di popup, possiedono entrambe dei riferiementi.
172172

173-
## Closing a popup
173+
## Chiudere un popup
174174

175-
To close a window: `win.close()`.
175+
Per chiudere una finestra di popup, possiamo utilizzare: `win.close()`.
176176

177-
To check if a window is closed: `win.closed`.
177+
Invece, per verificare se una finestra è chiusa possiamo utilizzare: `win.closed`.
178178

179-
Technically, the `close()` method is available for any `window`, but `window.close()` is ignored by most browsers if `window` is not created with `window.open()`. So it'll only work on a popup.
179+
Tecnicamente, il metodo `close()` è disponibile su tutte le finestre, ma nella pratica, `window.close()` viene ignorato dalla maggior parte dei browser se la finestra non è stata creata tramite un comando esplicito di `window.open()`. Quindi fuzionerà solamente con le finestre a popup.
180180

181-
The `closed` property is `true` if the window is closed. That's useful to check if the popup (or the main window) is still open or not. A user can close it anytime, and our code should take that possibility into account.
182-
183-
This code loads and then closes the window:
181+
La proprietà `closed` vale `true` se la finestra è chiusa. Questa risulta essere molto utile per verificare se il popup (oppure la finestra principale) è ancora aperto. Un utente potrebbe chiudere la finestra di popup in qualsiasi istante, ed il nostro codice dovrà essere pronto a gestire tale eventualità.
184182

183+
Il codice qui sotto, carica una finestra e la chiude immediatamente
185184
```js run
186185
let newWindow = open('/', 'example', 'width=300,height=300');
187186

0 commit comments

Comments
 (0)