JavaScript has number of properties and functions to play with browser windows.
Following are some of the important...
window.innerHeight - the inner height of the browser window (in pixels)
window.innerWidth - the inner width of the browser window (in pixels)
Please note the Internet Explorer lower than the versions 9 supports only
document.documentElement.clientHeight
document.documentElement.clientWidth
or
document.body.clientHeight
document.body.clientWidth
Some other methods:
window.open() - open a new window
window.close() - close the current window
window.moveTo() - move the current window
window.resizeTo() - resize the current window
A general syntax for the window.open method is as below
The syntax of the window.open method is given below:
open (URL, windowName[, windowFeatures])window.open ("http://www.myexample.com", "mywindow","status=1,toolbar=1");
he table shows the features and the string tokens you can use:
| status | The status bar at the bottom of the window. | ||||
| toolbar | The standard browser toolbar, with buttons such as Back and Forward. | ||||
| location | The Location entry field where you enter the URL. | ||||
| menubar | The menu bar of the window | ||||
| directories | The standard browser directory buttons, such as What’s New and What’s Cool | ||||
| resizable | Allow/Disallow the user to resize the window. | ||||
| scrollbars | Enable the scrollbars if the document is bigger than the window | ||||
| height | Specifies the height of the window in pixels. (example: height=’350′) | ||||
| width | Specifies the width of the window in pixel |
We can also move the popup window to our desired location on Screen
function mypopup() |
{ |
mywindow = window.open("http://myexample.com", "mywindow", "location=1,status=1,scrollbars=1, width=100,height=100"); |
mywindow.moveTo(0, 0); |
} |
we can also specify a window size.
var monkeyWindow = window.open("monk.html", "win1", "width=420,height=380");
Filling out the Newly opened window with Content
Popup windows are the Rodney Dangerfield of browser features, thanks to their abuse by aggressive marketers. But they have their legitimate uses. If you plan to use them, you'll have to deal with popup blockers, which you'll learn to do shortly. This chapter and the next one teach you the code that creates the window. This is the basic, barebones statement.
var myWindow = window.open();
The code above opens a blank window of maximum size and gives it a handle, a variable that refers to this particular window—in this case, monkeyWindow. Depending on the browser, the window may open on top of the previous window, in a new tab, or even in a new copy of the browser. You can't control this. There are three ways to fill a new window with content, You can use the write method to put HTML content on the screen...
var myWindow = window.open();
var windowContent = "<img src= 'https://2.bp.blogspot.com/-uGuw5Jqiwp4/W5VkXeddvDI/AAAAAAAAABk/TraamLKbwzwLSZfzy9s_EZO6a0FN8HWTwCK4BGAYYCw/s1600/Logo.png'><h1>This Website is a wonderful tutorial about Java</h1>
<p>This website teaches you Java in quite Simple and easy way</p>";
myWindow.document.write(windowContent);
Here's the line-by-line breakdown:
1. Opens a new window and assigns it the handle monkeyWindow
2. Assigns text to the variable windowContent
3. Fills the window with the text
Things to notice:
Inside the main quotes that enclose the whole string, any quoted text must be in single quotes, as in <img src='monkey.jpg'>.
Using the document.write method, you place the HTML string on the page. We can designate the window by its handle, the variable that you declared when you opened the window. The document.write method in this example is used to fill an empty window with content. We could also use it to write to a window that already has content. But it will overwrite all the HTML of the original document, replacing its content entirely.
Instead of assigning the HTML string to a variable and specifying the variable inside the parentheses, we could just put the HTML string inside the parentheses, enclosed in quotes of course. But this would be even more unwieldy than the example code.\
The second way to fill the window with content is to assign a document to it, by simply wrting like
myWindow.location.assign("https://hittutorialpoint.blogspot.com/p/blog-page.html");
...or...
myWindow.location.href = "https://hittutorialpoint.blogspot.com/p/blog-page.html";
The third and most common way to fill the window with content is to include the document assignment in the statement that opens the window.
var myWindow = window.open("https://hittutorialpoint.blogspot.com/p/blog-page.html");
If the document we're opening in the popup shares the same host and directory as the original document, we can just write...
var myWindow = window.open("blog-page.html");
This is how you close a window.
myWindow.close();
