Window open() methode

Definitie en gebruik

open() Deze methode opent een nieuw browser venster of een nieuwe tab, afhankelijk van uw browser instellingen en parameterwaarden.

Zie ook:

close() methode

Voorbeeld

Voorbeeld 1

Open "www.codew3c.com" in een nieuwe browser tab:

window.open("https://www.codew3c.com");

Try it yourself

Meer voorbeelden worden verstrekt onder de pagina.

Syntaxis

window.open(url, name, features, replace)

Parameter

Parameter Description
url

Optioneel. De URL van de pagina die moet worden geopend.

Indien niet gespecificeerd urlDit zal een nieuwe lege venster of tab openen.
name Optioneel. De target eigenschap of de naam van het venster.
features Optioneel. Een lijst van items gescheiden door komma's, zonder spaties.
replace

Verouderd.

Bepaal of de URL een nieuwe entry in de geschiedenislijst moet maken of het huidige document in de geschiedenislijst moet vervangen.

Ondersteunde waarden zijn:

  • true - Vervang het huidige document in de geschiedenislijst met de URL
  • false - Maak een nieuwe entry in de geschiedenislijst voor de URL

Waarschuwing:Chrome gebruikt replace Wanneer deze parameter wordt gebruikt, wordt een uitzondering gegooid.

De name parameter ondersteunt de volgende waarden:

Value Description
_blank De URL wordt geladen in een nieuwe venster of tab. Standaard.
_parent De URL wordt geladen in het oude frame.
_self Vervang de huidige pagina met de URL.
_top URL replaces any frameset that may be loaded.
name Window name (does not specify the window title).

The features parameter supports the following values:

Value Description
fullscreen=yes|no|1|0 Whether to display the browser in full-screen mode. The default is no. Full-screen mode windows must also be in cinema mode. Only for IE.
height=pixels Window height, in pixels. The minimum value is 100.
left=pixels The left position (X coordinate) of the window, in pixels. Negative values are not allowed.
location=yes|no|1|0 Whether to display the address field. Only for Opera.
menubar=yes|no|1|0 Whether to display the menu bar.
resizable=yes|no|1|0 Whether the window can be resized. Only for IE.
scrollbars=yes|no|1|0 Whether to display the scroll bar. Only for IE, Firefox, and Opera.
status=yes|no|1|0 Whether to add a status bar.
titlebar=yes|no|1|0 Whether to display the title bar. It will be ignored unless the application called is an HTML application or a trusted dialog.
toolbar=yes|no|1|0 Whether to display the browser toolbar. Only for IE and Firefox.
top=pixels The top position (Y coordinate) of the window, in pixels. Negative values are not allowed.
width=pixels Window width, in pixels. The minimum value is 100.

Return value

Returns a reference to the new window, or null if the call fails.

Technical details

Description

open() method searches for an existing window or opens a new browser window. If name If a window that already exists is specified by the parameter, then it returns a reference to that window. The returned window will display url parameter specifies the document, but ignores features parameter. In the case of knowing only the window name, this is the only way JavaScript can obtain a reference to that window.

If not specified name parameters, or if the specified window does not exist, then open() method creates a new browser window. This new window will display url The URL specified by the parameter, whose name is name If specified, size and controls are determined by features parameter specifies. url is an empty string, then open() opens a new window.

name parameters specify the name of the new window. This name can only contain numbers, letters, or underscores. It can be used as a marker <a> and <form> The value of the target attribute is used to force the document to be displayed in this specified window.

When using the method Window.open() When loading a new document into an existing specified window, it can be passed to it replace parameter, gebruikt om aan te geven of het nieuwe document een eigen item heeft in de browserhistoriek of het huidige document vervangt. Als replace waarde is true, dan zal het nieuwe document het oude document vervangen. Als de waarde false is of wordt weggelaten, zal het nieuwe document een eigen item hebben in de browserhistoriek. De functionaliteit van dit parameter is vergelijkbaar met Location.replace() methode de functionaliteit die wordt aangeboden is zeer vergelijkbaar.

Meng niet door elkaar Window.open() is vergelijkbaar met Document.open() methodegebruikt Window.open()geïnterpreteerd open()gebruiken. In een HTML-eigenschap van een eventhandler wordt de functie open() meestal Document.open()，dus in dit geval moet je Window.open().

Venster eigenschappen

features is een lijst van eigenschappen die het venster moet weergeven, gescheiden door komma's. Als de waarde van deze optionele parameter leeg is of wordt weggelaten, wordt het venster alle eigenschappen weergegeven. Echter, als features specificeert een bepaalde eigenschap, dan worden de eigenschappen die niet in deze lijst voorkomen niet in het venster weergegeven. Let op, deze string bevat geen spaties of witruimte, en de format van elk element is als volgt:

feature[=waarde]

Voor de meeste eigenschappenwaarde van de waarde is yes of no. Na deze eigenschappen volgt een waarde waarden kunnen worden weggelaten, als deze eigenschap wordt vermeld, wordt aangenomen waarde De waarde is yes, als deze niet wordt vermeld, wordt aangenomen waarde De waarde is no. Echter, de waarden van de eigenschappen width of height waarde De waarde is vereist, zorg ervoor dat u hun pixelwaarden specificeert.

Browserondersteuning

Alle browsers ondersteunen open():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

Meer voorbeelden

Voorbeeld 2

Open een about:blank-pagina in een nieuw venster/kaart:

var mijnWindow = window.open("", "", "width=200,height=100");

Try it yourself

Voorbeeld 3

Open een nieuw venster genaamd "MsgWindow" en schrijf er wat tekst in:

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
mijnWindow.document.write("<p>Dit is 'MsgWindow'. Ik ben 200px breed en 100px hoog!</p>");

Try it yourself

Voorbeeld 4

Vervang de huidige venster met een nieuw venster:

var mijnWindow = window.open("", "_self");
myWindow.document.write("<p>Ik heb het huidige venster vervangen.</p>")

Try it yourself

Voorbeeld 5

Opent een nieuw venster en controleert zijn uiterlijk:

window.open("https://www.codew3c.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

Try it yourself

Voorbeeld 6

Opent meerdere tabs:

window.open("http://www.google.com/");
window.open("https://www.codew3c.com/");

Try it yourself

Voorbeeld 7

Opent een nieuw venster. Gebruik vervolgens close() om dit venster te sluiten:

function openWin() {
  myWindow = window.open("", "myWindow", "width=200,height=100");   // Opent een nieuw venster
}
function closeWin() {
  myWindow.close();   // Sluit dit nieuwe venster
}

Try it yourself

Voorbeeld 8

Opent een nieuw venster. Gebruik de name-eigenschap om de naam van het nieuwe venster te verkrijgen:

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>De naam van dit venster is: " + myWindow.name + "</p>");

Try it yourself

Voorbeeld 9

Gebruik de opener-eigenschap om een verwijzing naar het venster te verkrijgen dat het nieuwe venster heeft gemaakt:

var myWindow = window.open("", "myWindow", "width=200,height=100");   // Opent een nieuw venster
myWindow.document.write("<p>Dit is 'myWindow'</p>");   // Tekst in het nieuwe venster
myWindow.opener.document.write("<p>Dit is het bronvenster!</p>");  // Maakt een nieuw venster in het venster van de tekst

Try it yourself