JavaScript biedt ingebouwde methoden om het browservenster te openen en te sluiten om extra bewerkingen uit te voeren, zoals een robotvenster enz. Deze methoden helpen bij het openen of sluiten van pop-ups in het browservenster. Hieronder volgen de venstermethoden:
De raam.open methode wordt gebruikt om een nieuwe webpagina in een nieuw venster te openen en venster.sluiten methode om webpagina te sluiten die is geopend door de window.open-methode. Bekijk de methode window.open() in detail:
Venster.open()
Het is een vooraf gedefinieerde venstermethode JavaScript gebruikt om het nieuwe tabblad of venster in de browser te openen. Dit is afhankelijk van uw browserinstelling of de parameters die zijn doorgegeven in de window.open()-methode, waardoor er een nieuw venster of tabblad wordt geopend.
Deze methode wordt ondersteund door bijna alle populaire webbrowsers, zoals Chrome, Firefox , enz. Hieronder volgen de syntaxis en parameters van de methode voor het openen van vensters -
Syntaxis
Deze functie accepteert vier parameters, maar deze zijn optioneel.
window.open(URL, name, specs, replace);
Of
U kunt deze functie ook gebruiken zonder de raam trefwoord zoals hieronder weergegeven:
open(URL, name, specs, replace)
Er is geen verschil tussen beide syntaxis.
Parameterlijst
Hieronder vindt u de lijst met parameters van de methode window.open(). Merk op dat - alle parameters van deze methode optioneel zijn en anders werken.
URL: Deze optionele parameter van de functie window.open() bevat de URL-reeks van een webpagina die u wilt openen. Als u in deze functie geen URL opgeeft, wordt er een nieuw leeg venster geopend ( over: leeg ).
git-status
naam: Met deze parameter kunt u de naam instellen van het venster dat u gaat openen. Het ondersteunt de volgende waarden:
| _blanco | De doorgegeven URL wordt in een nieuw tabblad/venster geladen. |
| _ouder | De URL wordt geladen in het bovenliggende venster of frame dat al is geopend. |
| _zelf | Door deze parameter door te geven, vervangt de URL de vorige uitvoer en wordt er een nieuw venster geopend in hetzelfde frame. |
| _bovenkant | URL vervangt elke frameset die kan worden geladen. |
| Naam | Geef de naam van het nieuwe venster op om de tekst of eventuele gegevens erop weer te geven. (Opmerking: niet de titel van het venster) |
De hierboven gespecificeerde waarden worden binnen een enkel of dubbel aanhalingsteken doorgegeven aan de functie window.open() op de naamparameterplaats.
specificaties: Deze parameter bevat de instellingen die worden gescheiden door een komma. Het element dat in deze parameter wordt gebruikt, mag geen spaties bevatten. bijv. breedte=150, hoogte=100 .
Het ondersteunt verschillende waarden.
vervangen: Net als de andere parameters van de methode window.open() is dit ook een optionele parameter. Het creëert een nieuw item of vervangt het huidige item in de geschiedenislijst. Het ondersteunt twee Booleaanse waarden; dit betekent dat het waar of onwaar retourneert:
| WAAR | Retourneert waar als de URL het huidige item of document in de geschiedenislijst vervangt. |
| Vals | Retourneert false als URL een nieuw item in de geschiedenislijst creëert. |
Waarden retourneren
Er wordt een nieuw geopend venster geretourneerd.
Voorbeelden
Hier zijn enkele voorbeelden van de functie window.open() om het browservenster/tabblad te openen. Standaard wordt de opgegeven URL geopend in een nieuw tabblad of venster. Zie de onderstaande voorbeelden:
1. open() met URL-parameter
Dit is een eenvoudig voorbeeld van een methode voor het openen van een venster met een website-URL erin. Wij hebben een knop gebruikt. Door op deze knop te klikken, zal de methode window.open() de website oproepen en openen in een nieuw browsertabblad.
Kopieer code
Click the button to open new window <br> <br> Open WindowTest het nu
Of
gemiddeld versus gemiddeld
Deze code kan worden geschreven zoals hieronder aangegeven:
Kopieer code
function openWindow() { window.open('https://www.javatpoint.com'); } Click the button to open new window <br> <br> Open Window Test het nu Uitvoer
Wanneer u hierop klikt Open raam knop, wordt de javatpoint-site geopend in een nieuw tabblad in hetzelfde venster.
Zie de onderstaande schermafbeelding:
2. open() zonder parameters
In dit voorbeeld geven we geen enkele parameter door aan de functie window.open(), zodat het nieuwe tabblad in het vorige venster wordt geopend.
Kopieer code
function openWindow() { window.open(); } Click the button to open new window <br> <br> Open Window Test het nu Uitvoer
css een afbeelding centreren
Wanneer u bovenstaande code uitvoert, verschijnt er een knop bij.
Wanneer u hierop klikt Open raam knop, er wordt een leeg venster geopend in een nieuw tabblad.
3. open() met naamparameters
In dit voorbeeld specificeren we de _ouder bij de naamparameter. U kunt elk van deze waarden (_parent, _blank, _top, etc.) erin doorgeven.
Kopieer code
function openWindow() { window.open('https://gmail.com', '_parent'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window Test het nu Uitvoer
Voer de code uit en krijg de uitvoer zoals hieronder weergegeven. Dit bevat een knop waarop u kunt klikken en de nieuwe URL in hetzelfde bovenliggende venster kunt openen.
Wanneer u op deze knop klikt, wordt Gmail geopend onder hetzelfde bovenliggende venster.
Wanneer u de verschillende waarden in de tweede parameter doorgeeft, ziet u het verschil voor verschillende waarden.
4. Definieer de grootte voor het nieuwe venster
In dit voorbeeld specificeren we de hoogte en breedte voor het nieuwe venster. Hiervoor gebruiken we de derde parameter ( specificaties ) in de methode window.open() en geef de hoogte en breedte van het venster, gescheiden door een komma, door aan deze functie. Het venster wordt dus geopend in de opgegeven grootte.
Kopieer code
function openWindow() { window.open('', '', 'width=300,height=200'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window Test het nu Uitvoer
Voer de bovenstaande code uit en krijg de uitvoer zoals hieronder weergegeven. Dit bevat een knop waarop u kunt klikken en de nieuwe URL in hetzelfde bovenliggende venster kunt openen.
Wanneer u op deze knop klikt, wordt een nieuw leeg venster geopend onder het bovenliggende venster van grootte.
Houd er rekening mee dat u de URL ook kunt doorgeven aan de methode window.open() om een website te openen.
Open een nieuw venster met een naam en een bericht
We kunnen elke door de gebruiker gedefinieerde tekst of elk formulier in een nieuw venster weergeven dat we met een klik op de knop gaan openen. Hiervoor moeten we een naam aan het nieuwe venster geven en er wat tekst in schrijven. Deze naam wordt doorgegeven aan de methode window.open(). Zie de onderstaande code hoe deze wordt geïmplementeerd met daadwerkelijke codering.
Kopieer code
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 Test het nu Uitvoer
Voer de code uit en krijg de uitvoer zoals hieronder weergegeven. Het bevat een knop waarop u kunt klikken en de nieuwe URL in hetzelfde bovenliggende venster kunt openen.
Wanneer u op deze knop klikt, wordt een nieuw venster geopend met een door de gebruiker gedefinieerd bericht onder het bovenliggende venster met de grootte 300*150.
JavaScript biedt ook de ingebouwde methode, namelijk close() om het browservenster te sluiten.
Sluit het venster geopend door window.open()
In dit voorbeeld laten we u zien hoe u het venster of tabblad sluit dat is geopend met de methode window.open(). Ten eerste openen we een website-URL in een nieuw venster (grootte gedefinieerd in code) met een klik op de knop en gebruiken we vervolgens een andere knop om dat geopende venster te sluiten. Zie de onderstaande code hoe het zal worden gedaan:
Kopieer code
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 Test het nu Uitvoer
Romeins cijfer 1 tot 100
Wanneer u de code uitvoert, krijgt u het onderstaande antwoord:
Klik op de Open Javatpoint om de Javatpoint-tutorialwebsite te openen. We hebben de grootte (hoogte en breedte) gespecificeerd van het nieuwe pop-upvenster dat moet worden geopend.
Als u op de Sluit Javatpoint knop, wordt dit geopende venster geminimaliseerd.
Browserondersteuning
Verschillende webbrowsers ondersteunen de methode window.open(), zoals:
- Chroom
- Mozilla Firefox
- Internet Explorer (IE)
- Opera
- Safari, enz.
U kunt de methode window.open() gebruiken en uitvoeren in de bovenstaande browsers.