Opening a small (or child ) window from a main ( or parent ) window
We can open a small window known as child window by clicking a button or a link or a image of a main window. We can control the width, height and location ( alignment from top left corner of the screen ) of the small window from the main window.
Opening closing & Passing data from Child window to parent window in JavaScript & refreshing main
Here we can control the status bar, tool bar and resize the child window from the main window. By changing the value of status to 1 form 0 (status=1;) we can display the status bar for the child window. Same way by making the toolbar=1; we can display the tool bars for the small window. We can change the value of left to position the window horizontally. If we make the value of left to 0 like left=0; to align the window to left edge of the screen. Same way by making the top=0; we can place the window at the top of the screen. Don't forget to refresh the parent window every time you change the parameters. Here is the code at the parent window to display the link. Click the demo link to see how the window opens.
Click here to open the child window
Here is the code of the above link
<a href="javascript:void(0);" NAME="Error Handling"
title="ZeroDivisionError handling"
onClick=window.open("window-child.html","Ratting","width=550,height=170,left=150,top=200,toolbar=0,status=0,");>Click here to open the child window</a>
Here is the code of this button
<input type=button onClick=window.open("window-child.html","Ratting","width=550,
height=170,left=150,top=200,toolbar=0,status=0,"); value="Open Window">
JQuery Manaing Parent & Child window
Pass the data betweeen parent and child window and refreshing part of the parent window once Data is changed at child window.
Pass the data betweeen parent and child window and refreshing part of the parent window once Data is changed at child window.
Scrollbar on child window
We can add scroll bar to child window by adding scrollbars=1 while opening the window. Here is the modified code.<a href="javascript:void(0);"
NAME="My Window Name" title=" My title here "
onClick=window.open("window-child.html","Ratting","width=550,height=170,0,status=0,scrollbars=1");>Click here to open the child window</a>
Questions
- How can I open a new child window in JavaScript?
- What are the different methods available to open a child window using JavaScript?
- Can I customize the size and position of the child window when opening it?
- How can I pass data between the parent window and the child window?
- Is it possible to control the behavior of the child window, such as disabling specific browser features?
- What are the security considerations when opening child windows in JavaScript?
- How can I detect if the child window has been closed by the user?
- Are there any events or callbacks available to handle actions in the child window from the parent window?
- Can I open multiple child windows from the same parent window?
- What are some best practices for managing and interacting with child windows in JavaScript?
Window object Reference Window close Passing data from Child window to parent window Passing data from Parent to Child Window
Subscribe to our YouTube Channel here
This article is written by plus2net.com team.
▼ More on JavaScript Date
Displaying current date and timeDate object & displaying current date and time on button clickgetTime() : Date calculations by using milliseconds that is passed from January 1, 1970 Displaying Current Month using getMonth() functionDisplaying present Year using getFullYear()Showing Current Date using getDate() functionDisplaying Current Day using getDay() functionDisplaying Current Minutes using getMinutes() functionDisplaying Current Hours using getHours() functiongetUTCHours: Display UTC hour or GMT HourgetUTCMinutes: Display UTC minutes or GMT minutesDisplaying Current Second using getSeconds() functiongettimezoneoffset() to get difference in UTC time and local time in minutessetMinutes: Setting the minutes of a date object to fix valuesetHours() Setting the minutes of a date object to fix valuesetDate() Setting the date part of the date objectsetMonth(): Setting the month part of date objectsetFullYear(): Setting the year part of the date objectsetMinutes(): Setting the minutes part of the date objecttoString():Converting date to string toLocaleString() Converting to local date stringtoDateString() Date to String conversiontoLocaleDateString() Converting to local date stringtoTimeString() Converting time part of date object to a string toUTCString to convert date object to Universal Standard StringTimer function to set time for reminder alertTimer Resetting the timer functionRecursive timer to trigger a code block after a particular intervalCountdown script displaying days , hours , minutes and seconds left from an eventDisplaying changing Clock showing date and time in a web pageProjects using date object
| Thangavel | 20-08-2012 |
| thank you:friend:)how to pass the value from child window to parent window | |
| Peter | 25-08-2012 |
| Thank you! This helped me so much | |
| bhushan wagh | 28-05-2014 |
| Thanks a lot,it's really cool exam. | |
| Wenceslau | 22-07-2014 |
| Thank you. It helped me a lot. | |
| Jessilyn | 26-09-2014 |
| You just saved me hours of time. | |
| Thomas | 06-04-2015 |
| How to open sub window in the same page without new browser tag | |
| smo | 06-04-2015 |
| You can hide or display a layer by managing through css | |
16-06-2023 | |
| Can I do this with desktop app? | |
16-06-2023 | |
| How ca we open a desktop app in a child window of another desktop app? | |
22-07-2023 | |
| FRom the desktop add you can click the link with URL to open browser with the specified url. It depends on the app you are using. | |