Develop a webpage for placing the window on the screen and working with child window
3 min readJan 5, 2021
LABORATORY OBJECTIVE:
1. To write JavaScript to manipulate the specified attributes of window object in the given manner.
2. Develop JavaScript to create and manipulate child windows.
Window Object
- JavaScript‘s “window” object represents the browser window or, the frame that a document is displayed in.
- The properties of a particular instance of Window might include its size, the buttons, scrollbars, browser frame, position, and so on.
- The methods of the Window object include the creation and destruction of generic windows and the handling of special case windows such as alert, confirmation, and prompt dialogs.
Opening and Closing Window
- The Window object methods open( ) and close( ) are used to create and destroy a window, respectively.
- When you open a window, you can set its URL, name, size, buttons, and other attributes, such as whether or not the window can be resized.
- Syntax
window.open (url, name, features)- Where,
- url is a URL that indicates the document to load into the window.
- name is the name for the window (which is useful for referencing later on using the target attribute of HTML links).
- features is a comma-delimited string that lists the features of the window. - Example
mywindow = open("http://www.yahoo.com", "yahoo", "height=300,
width=200, scrollbars=yes")- This would open a window to Yahoo with height 300 pixels, width 200 pixels, and scrollbars, as shown here:
Program: Write a JavaScript program to create a new child window
<html>
<head>
<title>Open new window</title>
<script>
function openWindow()
{
myWindow = window.open('hello.html', 'My Window', 'top=100,
left=100, width=250, height=100,status=1')
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Open Window" onclick="openWindow()"/>
</form>
</body>
</html>
Window Features
Writing Content to Newly Created Window
- We can write content to newly created windows once they are created either using the standard document.write() method or potentially even manipulate the window with DOM methods.
- Consider the script here,
var myWindow = open('','mywin', 'height=300, width=300');
myWindow.document.write('Hi there.');
myWindow.document.write('This is my new window');
myWindow.document.close();
myWindow.focus();- It is possible to write out HTML to the newly created window dynamically, so you could use something like
myWindow.document.writeln("<html>");
myWindow.document.writeln("<head>");
myWindow.document.writeln("<title>New Window</title>");
myWindow.document.writeln("</head>");
myWindow.document.writeln("<body>");
myWindow.document.writeln("<h1>I am Newly Created Window</h1>");
myWindow.document.writeln("</body>");
myWindow.document.writeln("</html>");Program: Write a JavaScript program to write content on child window
<html>
<head>
<script>
function init()
{
var win = window.open("", "MyWindow", "width=100, height=100")
win.document.write("<h3>Hello World!!!</h3>")
}
</script>
</head><body onload="init()">
</body></html>
Sample Program
Develop a program to create and open multiple windows
<html>
<head>
<script>
function createWindows()
{
for(i=0; i<5; i++)
{
var mywin = window.open("", "win"+i, "width=100, height=100")
}
}
</script>
</head><body>
<form>
<input type="button" value="Create Windows" onclick="createWindows()"/>
</form>
</body></html>
Thank you for your support
You can try out my apps available on Google Play Store