window.open()/ window.close()window object method open() allows you to open up new browser windows (popups). Various browser policies and user settings may prevent you from opening a popup (due to abuse of the technique for marketing purposes), but generally you should be able to open a new window if it was initiated by the user. Otherwise, if you try to open a popup as the page loads, it will most likely be blocked, because the user didn't initiate it explicitly.
window.open() accepts the following parameters.
Comma-separated list of features, such as:
| Parameters | Description |
|---|---|
| URL | to load in the new window |
| Name | Name of the new window, which can be used as the value of a form's target attribute |
| resizable | should the user be able to resize the new window |
| width | width of the popup |
| height | height of the popup |
| status | should the status bar be visible and so on |
window.open() returns a reference to the window object of the newly created browser instance.
var popup = window.open('http://www.rookienerd.com', 'packt', 'width=300,height=300,resizable=yes');popup points to the window object of the popup. You can check if popup has a falsy value, which means that the popup was blocked.
popup.close() //closes the new window.
It's best to stay away from opening new windows for accessibility and usability reasons. Alternatively this can be achieved by using a floating <div> inside the page.
window.moveTo(), window.resizeTo()window object methods like moveTo() and resizeTo() to locate and position the browser window in the screen.
| Properties | Description |
|---|---|
| window.moveTo(100, 100) | will move the browser window to screen location x = 100 and y = 100 (counted from the top left corner). |
| window.moveBy(10, -10) | will move the window 10 pixels to the right and 10 pixels up from its current location. |
| window.resizeTo(x, y)/ window.resizeBy(x, y) | accept the same parameters as the move methods but they resize the window as opposed to moving it. |
