Javascript Reference Guide

 
 
This guide contains useful Javascript tips.

rss feed






Popup window.



Example 1:
There are several ways (method 1-5) to open a popup window but only method 1 is correct.

By using method 1:
  • the statusbar indicates the location
  • search engines can find the correct page

Code
    <script type="text/javascript" language="JavaScript" >
    function demoPopup(url) {
        var popwin = window.open(url, 
        "testWindow", "width=200,height=100,toolbar=no,
        resizable=no,status=no,menubar=no,scrollbars=no");
        popwin.focus();
    }
    </script> 
 
    <a href="../../popupwindow/helloworld.html" onclick="demoPopup(this.href);
        return false;">
        Method 1 (Correct): Click to open a pop-up window
    </a> 
 
    <a href="javascript:demoPopup('../../popupwindow/helloworld.html')">
        Method 2 (Wrong): Click to open a pop-up window
    </a>

    <a href="" onclick="demoPopup('../../popupwindow/helloworld.html');return false;">
        Method 3 (Wrong): Click to open a pop-up window
    </a>
 
    <a href="#" onclick="demoPopup('../../popupwindow/helloworld.html');return false;">
        Method 4 (Wrong): Click to open a pop-up window
    </a> 

    <a href="javascript:void(0)" onclick="demoPopup('../../popupwindow/helloworld.html')">
        Method 5 (Wrong): Click to open a pop-up window
    </a>
 
Result

Method 1 (Correct): Click to open a pop-up window
Method 2 (Wrong): Click to open a pop-up window
Method 3 (Wrong): Click to open a pop-up window
Method 4 (Wrong): Click to open a pop-up window
Method 5 (Wrong): Click to open a pop-up window





Example 2:
Open a popup window within a form after a button is pressed.

Code
<form method="post" action="../../popupwindow/helloworld.html" target="result" onclick=
"window.open('../../popupwindow/helloworld.html','result','width=400,height=400'); return false" 
name="example2Form">
   <input type="submit" name="submit" value="Press button" /> 
</form>
 
Result





Example 3:
Automatically open a popup window within a form.

Code
demo1.html

<form method="post" action="../../popupwindow/helloworld.html" target="result" onclick=
"window.open('../../popupwindow/helloworld.html','result','width=400,height=400')"
name="example3Form">
   <script type="text/javascript" language="javascript">
      document.example3Form.onclick();
   </script>
</form> 
Result

Load page demo1.html.