JavaScript ponúka vstavané metódy na otváranie a zatváranie okna prehliadača na vykonávanie ďalších operácií, ako je napríklad okno robota atď. Tieto metódy pomáhajú otvárať alebo zatvárať kontextové okná prehliadača. Nasledujú metódy okna:
The okno.otvoriť metóda sa používa na otvorenie novej webovej stránky do nového okna a okno.zavrieť metóda na zatvorenie webovej stránky otvorenej metódou window.open. Pozrite si podrobne metódu window.open():
Window.open()
Je to preddefinovaná metóda okna JavaScript slúži na otvorenie novej karty alebo okna v prehliadači. To bude závisieť od nastavenia vášho prehliadača alebo parametrov odovzdaných v metóde window.open(), ktorá otvorí nové okno alebo kartu.
Túto metódu podporujú takmer všetky populárne webové prehliadače, ako je Chrome , Firefox , atď. Nasleduje syntax a parametre metódy otvárania okna -
Syntax
Táto funkcia akceptuje štyri parametre, ale sú voliteľné.
window.open(URL, name, specs, replace);
Alebo
Túto funkciu môžete použiť aj bez použitia okno kľúčové slovo, ako je uvedené nižšie:
open(URL, name, specs, replace)
Medzi oboma syntaxami nie je žiadny rozdiel.
Zoznam parametrov
Nižšie je uvedený zoznam parametrov metódy window.open(). Všimnite si, že - všetky parametre tejto metódy sú voliteľné a fungujú inak.
URL: Tento voliteľný parameter funkcie window.open() obsahuje reťazec URL webovej stránky, ktorú chcete otvoriť. Ak v tejto funkcii nešpecifikujete žiadnu URL, otvorí sa nové prázdne okno ( about:blank ).
názov: Pomocou tohto parametra môžete nastaviť názov okna, ktoré sa chystáte otvoriť. Podporuje nasledujúce hodnoty:
| _blank | Odovzdaná adresa URL sa načíta na novú kartu/okno. |
| _rodič | Adresa URL sa načíta do nadradeného okna alebo rámca, ktorý je už otvorený. |
| _ja | Odovzdaním tohto parametra URL nahradí predchádzajúci výstup a v rovnakom rámci sa otvorí nové okno. |
| _top | Adresa URL nahrádza ľubovoľnú sadu rámcov, ktorú je možné načítať. |
| názov | Zadajte názov nového okna, aby sa v ňom zobrazil text alebo akékoľvek údaje. (Poznámka – nie názov okna) |
Vyššie špecifikované hodnoty sú odovzdané v jednoduchých alebo dvojitých úvodzovkách do funkcie window.open() na mieste parametra name.
špecifikácie: Tento parameter obsahuje nastavenia, ktoré sú oddelené čiarkou. Prvok použitý v tomto parametri nemôže mať medzery, napr. šírka=150,výška=100 .
Podporuje viacero hodnôt.
nahradiť: Rovnako ako ostatné parametre metódy window.open(), aj toto je voliteľný parameter. Buď vytvorí nový záznam, alebo nahradí aktuálny záznam v zozname histórie. Podporuje dve boolovské hodnoty; to znamená, že vráti hodnotu true alebo false:
| Pravda | Vráti hodnotu true, ak adresa URL nahradí aktuálny záznam alebo dokument v zozname histórie. |
| Nepravdivé | Vráti hodnotu false, ak adresa URL vytvorí nový záznam v zozname histórie. |
Návratové hodnoty
Vráti novo otvorené okno.
Príklady
Tu je niekoľko príkladov funkcie window.open() na otvorenie okna/karty prehliadača. V predvolenom nastavení sa zadaná adresa URL otvorí na novej karte alebo v novom okne. Pozrite si príklady nižšie:
1. open() s parametrom URL
Toto je jednoduchý príklad metódy otvárania okna s adresou URL webovej stránky. Použili sme tlačidlo. Kliknutím na toto tlačidlo zavolá metóda window.open() a otvorí webovú stránku na novej karte prehliadača.
Kopírovať kód
Click the button to open new window <br> <br> Open WindowOtestujte si to
Alebo
Tento kód je možné napísať tak, ako je uvedené nižšie -
Kopírovať kód
function openWindow() { window.open('https://www.javatpoint.com'); } Click the button to open new window <br> <br> Open Window Otestujte si to Výkon
Keď kliknete na toto Otvorte okno tlačidlo, stránka javatpoint sa otvorí na novej karte v tom istom okne.
Pozrite si snímku obrazovky nižšie:
2. open() bez parametrov
V tomto príklade neodovzdáme funkcii window.open() žiadny parameter, takže nová karta sa otvorí v predchádzajúcom okne.
Kopírovať kód
function openWindow() { window.open(); } Click the button to open new window <br> <br> Open Window Otestujte si to Výkon
Keď vykonáte vyššie uvedený kód, zobrazí sa s ním tlačidlo.
Keď kliknete na toto Otvorte okno sa na novej karte otvorí prázdne okno.
3. open() s parametrami názvu
V tomto príklade špecifikujeme _rodič v parametri name. Môžete doň odovzdať ktorúkoľvek z týchto hodnôt (_parent, _blank, _top atď.).
Kopírovať kód
function openWindow() { window.open('https://gmail.com', '_parent'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window Otestujte si to Výkon
Vykonajte kód a získajte výstup, ako je uvedené nižšie. Toto bude obsahovať tlačidlo na kliknutie a otvorenie novej adresy URL v tom istom rodičovskom okne.
Keď kliknete na toto tlačidlo, Gmail sa otvorí pod rovnakým rodičovským oknom.
Keď prejdete rôznymi hodnotami v druhom parametri, uvidíte rozdiel pre rôzne hodnoty.
otvorte ponuku nastavení
4. Definujte veľkosť nového okna
V tomto príklade zadáme výšku a šírku nového okna. Na tento účel použijeme tretí parameter ( špecifikácie ) v metóde window.open() a tejto funkcii odovzdajte výšku a šírku okna oddelenú čiarkou. Okno sa teda otvorí v zadanej veľkosti.
Kopírovať kód
function openWindow() { window.open('', '', 'width=300,height=200'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window Otestujte si to Výkon
Vykonajte vyššie uvedený kód a získajte výstup, ako je uvedené nižšie. Toto bude obsahovať tlačidlo na kliknutie a otvorenie novej adresy URL v tom istom nadradenom okne.
Po kliknutí na toto tlačidlo sa pod nadradeným oknom veľkosti otvorí nové prázdne okno.
Upozorňujeme, že adresu URL môžete tiež odovzdať metóde window.open() na otvorenie ľubovoľnej webovej lokality.
Otvorte nové okno s menom a správou
V novom okne, ktoré otvoríme kliknutím na tlačidlo, môžeme zobraziť ľubovoľný text alebo formulár definovaný používateľom. Na to musíme novému oknu zadať ľubovoľný názov a napísať doň nejaký text. Tento názov prejde do metódy window.open(). Pozrite si nižšie uvedený kód, ako bude implementovaný so skutočným kódovaním.
Kopírovať kód
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 Otestujte si to Výkon
Vykonajte kód a získajte výstup, ako je uvedené nižšie. Bude obsahovať tlačidlo na kliknutie a otvorenie novej adresy URL v tom istom nadradenom okne.
Po kliknutí na toto tlačidlo sa otvorí nové okno s používateľom definovanou správou pod nadradeným oknom veľkosti 300*150.
JavaScript ponúka aj vstavanú metódu, t. j. close() na zatvorenie okna prehliadača.
Zatvorte okno otvorené pomocou window.open()
V tomto príklade vám ukážeme, ako zavrieť okno alebo kartu otvorenú metódou window.open(). Najprv kliknutím na tlačidlo otvoríme adresu URL webovej stránky v novom okne (veľkosť definovaná v kóde) a potom pomocou iného tlačidla zatvoríme otvorené okno. Pozrite si nižšie uvedený kód, ako to bude vykonané:
Kopírovať kód
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 Otestujte si to Výkon
Keď spustíte kód, dostanete odpoveď, ako je uvedené nižšie:
Kliknite na Otvorte Javatpoint tlačidlo na otvorenie webovej stránky s výukovým programom Javatpoint. Zadali sme veľkosť (výšku a šírku) nového kontextového okna, ktoré sa má otvoriť.
Ak kliknete na Zatvorte Javatpoint tlačidlo, toto otvorené okno sa minimalizuje.
Podpora prehliadača
Niekoľko webových prehliadačov podporuje metódu window.open(), ako napríklad:
- Chrome
- Mozilla Firefox
- Internet Explorer (IE)
- Opera
- Safari atď.
V týchto vyššie uvedených prehliadačoch môžete použiť a spustiť metódu window.open().