JavaScript offre metodi integrati per aprire e chiudere la finestra del browser per eseguire operazioni aggiuntive come la finestra del robot, ecc. Questi metodi aiutano ad aprire o chiudere i popup della finestra del browser. Di seguito sono riportati i metodi della finestra:
IL finestra.aperta Il metodo viene utilizzato per aprire una nuova pagina Web in una nuova finestra e finestra.chiudi metodo per chiudere la pagina Web aperta dal metodo window.open. Vedi il metodo window.open() in dettaglio:
Finestra.aperta()
È un metodo di finestra predefinito di JavaScript utilizzato per aprire la nuova scheda o finestra nel browser. Ciò dipenderà dalle impostazioni del browser o dai parametri passati nel metodo window.open() che consentirà di aprire una nuova finestra o scheda.
Questo metodo è supportato da quasi tutti i browser Web più diffusi, come Chrome, Firefox , ecc. Di seguito sono riportati la sintassi e i parametri del metodo di apertura della finestra:
Sintassi
Questa funzione accetta quattro parametri, ma sono facoltativi.
window.open(URL, name, specs, replace);
O
cosa sono i selettori nei css
È possibile utilizzare questa funzione anche senza utilizzare il finestra parola chiave come mostrato di seguito:
open(URL, name, specs, replace)
Non c'è differenza tra le due sintassi.
Elenco parametri
Di seguito è riportato l'elenco dei parametri del metodo window.open(). Tieni presente che tutti i parametri di questo metodo sono facoltativi e funzionano in modo diverso.
URL: Questo parametro opzionale della funzione window.open() contiene la stringa URL di una pagina web che desideri aprire. Se non specifichi alcun URL in questa funzione, si aprirà una nuova finestra vuota ( su bianco ).
nome: Usando questo parametro, puoi impostare il nome della finestra che stai per aprire. Supporta i seguenti valori:
| _vuoto | L'URL passato verrà caricato in una nuova scheda/finestra. |
| _genitore | L'URL verrà caricato nella finestra principale o nel frame già aperto. |
| _se stesso | Passando questo parametro, l'URL sostituirà l'output precedente e si aprirà una nuova finestra nello stesso frame. |
| _superiore | L'URL sostituisce qualsiasi set di frame che può essere caricato. |
| Nome | Fornire il nome della nuova finestra per mostrare il testo o eventuali dati su di essa. (Nota: non il titolo della finestra) |
I valori sopra specificati vengono passati tra virgolette singole o doppie alla funzione window.open() al posto del parametro name.
Specifiche: Questo parametro contiene le impostazioni separate dalla virgola. L'elemento utilizzato in questo parametro non può contenere spazi bianchi, ad esempio, larghezza=150, altezza=100 .
Supporta diversi valori.
sostituire: Come gli altri parametri del metodo window.open(), anche questo è un parametro facoltativo. Crea una nuova voce o sostituisce la voce corrente nell'elenco della cronologia. Supporta due valori booleani; ciò significa che restituisce vero o falso:
| VERO | Restituisce vero se l'URL sostituisce la voce o il documento corrente nell'elenco della cronologia. |
| Falso | Restituisce false se l'URL crea una nuova voce nell'elenco della cronologia. |
Valori restituiti
Restituirà una finestra appena aperta.
Esempi
Ecco alcuni esempi della funzione window.open() per aprire la finestra/scheda del browser. Per impostazione predefinita, l'URL specificato si apre in una nuova scheda o finestra. Vedi gli esempi qui sotto:
1. open() con parametro URL
Questo è un semplice esempio di metodo di apertura della finestra con l'URL di un sito Web al suo interno. Abbiamo utilizzato un pulsante. Facendo clic su questo pulsante, il metodo window.open() chiamerà e aprirà il sito Web in una nuova scheda del browser.
Copia codice
Click the button to open new window <br> <br> Open WindowProvalo adesso
O
Questo codice può essere scritto come indicato di seguito:
Copia codice
function openWindow() { window.open('https://www.javatpoint.com'); } Click the button to open new window <br> <br> Open Window Provalo adesso Produzione
Quando fai clic su questo Finestra aperta pulsante, il sito Javatpoint si aprirà in una nuova scheda all'interno della stessa finestra.
Guarda lo screenshot qui sotto:
2. open() senza parametri
In questo esempio, non passeremo alcun parametro alla funzione window.open() in modo che la nuova scheda si apra nella finestra precedente.
Copia codice
function openWindow() { window.open(); } Click the button to open new window <br> <br> Open Window Provalo adesso Produzione
Quando eseguirai il codice sopra, apparirà un pulsante con esso.
Quando fai clic su questo Finestra aperta pulsante, si aprirà una finestra vuota in una nuova scheda.
3. open() con parametri del nome
In questo esempio specificheremo il file _genitore nel parametro del nome. Puoi passare uno qualsiasi di questi valori (_parent, _blank, _top, ecc.).
Copia codice
function openWindow() { window.open('https://gmail.com', '_parent'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window Provalo adesso Produzione
Esegui il codice e ottieni l'output come indicato di seguito. Questo conterrà un pulsante per fare clic e aprire il nuovo URL nella stessa finestra principale.
Quando fai clic su questo pulsante, Gmail si aprirà nella stessa finestra principale.
esempio di nome utente
Quando passerai i diversi valori nel secondo parametro, vedrai la differenza per valori diversi.
4. Definire la dimensione della nuova finestra
In questo esempio specificheremo l'altezza e la larghezza della nuova finestra. Per questo utilizzeremo il terzo parametro ( Specifiche ) nel metodo window.open() e passa l'altezza e la larghezza della finestra separate da una virgola a questa funzione. Quindi, la finestra si aprirà nella dimensione specificata.
Copia codice
function openWindow() { window.open('', '', 'width=300,height=200'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window Provalo adesso Produzione
Esegui il codice sopra e ottieni l'output come indicato di seguito. Questo conterrà un pulsante per fare clic e aprire il nuovo URL nella stessa finestra principale.
Quando si fa clic su questo pulsante, si aprirà una nuova finestra vuota sotto la finestra principale di dimensione.
Tieni presente che puoi anche passare l'URL al metodo window.open() per aprire qualsiasi sito web.
Apri una nuova finestra con un nome e con un messaggio
Possiamo mostrare qualsiasi testo o modulo definito dall'utente in una nuova finestra che apriremo facendo clic sul pulsante. Per questo, dobbiamo fornire un nome qualsiasi alla nuova finestra e scrivere del testo al suo interno. Questo nome passerà al metodo window.open(). Vedi il codice qui sotto come verrà implementato con la codifica effettiva.
Copia codice
function openWindow() { var newtab = window.open('', 'anotherWindow', 'width=300,height=150'); newtab.document.write('<p> This is 'anotherWindow'. It is 300px wide and 150px tall new window! </p>'); } <b> Click the button to open the new user-defined sized window </b> <br> <br> Open Window Provalo adesso Produzione
Esegui il codice e ottieni l'output come indicato di seguito. Conterrà un pulsante per fare clic e aprire il nuovo URL nella stessa finestra principale.
Quando si fa clic su questo pulsante, si aprirà una nuova finestra con un messaggio definito dall'utente sotto la finestra principale di dimensioni 300*150.
JavaScript offre anche il metodo integrato, ovvero close() per chiudere la finestra del browser.
Chiude la finestra aperta da window.open()
In questo esempio, ti mostreremo come chiudere la finestra o la scheda aperta dal metodo window.open(). Innanzitutto, apriremo l'URL di un sito Web in una nuova finestra (dimensione definita nel codice) facendo clic su un pulsante, quindi utilizzeremo un altro pulsante per chiudere la finestra aperta. Vedi il codice seguente come sarà fatto:
Copia codice
Open and close window method example // function to open the new window tab with specified size function windowOpen() { var newWindow = window.open( 'https://www.javatpoint.com/', '_blank', 'width=500, height=350'); } // function to close the window opened by window.open() function windowClose() { newWindow.close(); } <h2> Window open() and close() method </h2> <b> Click the button to open Javatpoint tutorial site </b> <br> Open Javatpoint <br> <br> <b> Click the button to close Javatpoint tutorial site </b> <br> Close Javatpoint Provalo adesso Produzione
Quando eseguirai il codice, otterrai la risposta come mostrato di seguito:
Clicca il Apri Javatpoint pulsante per aprire il sito Web del tutorial Javatpoint. Abbiamo specificato la dimensione (altezza e larghezza) della nuova finestra pop-up da aprire.
Se fai clic su Chiudi Javatpoint pulsante, questa finestra aperta verrà ridotta a icona.
Supporto del browser
Diversi browser Web supportano il metodo window.open(), come ad esempio:
- Cromo
- Mozilla Firefox
- Internet Explorer (IE)
- musica lirica
- Safari, ecc.
Puoi utilizzare ed eseguire il metodo window.open() su questi browser sopra.