Opening a new window using JavaScript
Despite developing a bad reputation in recent years, pop-up windows are still an integral part of many good web applications. This quick tutorial will show you how to create and control a pop-up window using JavaScript.
Creating the popUp window function
The first thing we need to do is create the JavaScript function that will launch the new window. We’ll call it “popUp.” The function is created by inserting the following code into the <head> of the HTML document.
<script type="javascript">
function popUp() {
}
</script>
At this point, our popUp function does nothing. We have to add code inside the function to make it work.
<script type="javascript">
function popUp() {
window.open("url.html", "name_of_window", "width=400,height=200,left=20,top=20,scrollbars=no,menubar=no, resizable=no,location=no,toolbar=no");
}
</script>
The pop-up window is executed via the “open” method of the “window” object. The parameters passed are the URL of the window to open (I’ve named mine “url.html”), the name of the window (by giving the window a name, you can reference it via JavaScript later on if you so choose), and the features of the window. The features are the width in pixels, the height in pixels, position from the left of the screen, position from the top of the screen, display of the scrollbars (yes or no), display of the menubar (yes or no), enable the window to be resized by the user (yes or no), display of the location bar (yes or no), and display of the browser toolbar (yes or no). Note that these features can be in any order, so long as their syntax is correct.
Calling the popUp window function
Now that we have our JavaScript window function, we’ll need to call it in order to open a new window with “url.html” inside. You can call JavaScript functions in a variety of ways, but in this case you’ll likely call it when someone clicks a text or image link. Here’s how we call the function:
<a href="JavaScript:popup();">Open url.html in a new window</a>
Creating an advanced window function using JavaScript
In our popUp function, we open a single HTML file when a link is clicked. What if we wanted a JavaScript function that would open virtually any HTML file using the same window attributes each time? Obviously we wouldn’t want to write a separate function for each new window. The solution is to pass our popUp function an “argument,” and modify the function slightly.
Here’s how this would be accomplished:
<script type="javascript">
function popUp(URL) {
window.open(URL, "name_of_window", "width=400,height=200,left=20,top=20,scrollbars=no,menubar=no, resizable=no,location=no,toolbar=no");
}
</script>
And to call the function:
<a href="JavaScript:popup(‘page1.html’);">Open page1.html in a new window</a>
<a href="JavaScript:popup(‘page2.html’);">Open page2.html in a new window</a>
<a href="JavaScript:popup(‘page3.html’);">Open page3.html in a new window</a>
Note that, because each URL is opened using the same function, the pages will load in the same window. That is, if the window is already open, clicking the link to open page2.html will REPLACE page1.html, not open an additional window.
Post a Comment
You must be logged in to post a comment.