coding180 icon
Coding180
JavaScript - open new window (window.open)

JavaScript - open new window (window.open)

Home > Tutorials > JavaScript > Common Interaction Methods


The window.open() method can find an existing or newly created browser window.

Syntax:

window.open([URL], [window name], [parameter string])

open() Parameter Description:

URL: optional parameter, the URL or path of the webpage to be displayed in the window. If this parameter is omitted, or its value is an empty string, then the window does not display any documents.

Window name: optional parameter, the name of the window to be opened.

1. The name consists of letters, numbers and underscore characters.

2. "_top", "_blank", and "_self" have special meanings.

  •  _blank: Display the landing page in a new window  
  • _self: display the target page in the current window.
  • _top: display the target page in the upper window in the frame page

3. Only one window with the same name can be created. If you want to create multiple windows, the names cannot be the same.  

4. name cannot contain spaces. Parameter string: optional parameter, setting window parameters, each parameter is separated by a comma.

For example: open the http://www.google.com website, the size is 300px by 200px, no menu, no toolbar, no status bar, and a window with scroll bars:

    <script type="text/javascript"> 
    window.open('http://google.com', '_blank',
            'width=300, height=200, menubar=no, toolbar=no, status=no, scrollbars=yes')
    </script>

Note: The running results consider browser compatibility issues.

Task - Exercise - 14

  1. Add the code on the 8th line to create a new window when a button is clicked.
  2. Open the http://www.coding180.com webpage in a new window with a width of 600 and a height of 400.
  3. 100 pixels from the top of the screen, and 0 pixels from the left of the screen.

Task Code

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
  function Open(){
      

  }
</script>
</head>
<body>
    <input name="button" type="button" onClick="Wopen()" value="Click 
here,Open the new window!" / >
</body>
</html>

 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel