Let's open a new window (as shown in the textbook with this link.
<p>Let's open a new window with this <a href="javascript:location='example10.html'; window.open('../index.html', 'demo1','height=400,width=500,top=50,left=50,scrollbars=yes,toolbar=yes,status=yes,menubar=yes,location=yes,resizable=yes')">link</a>.</p>
(Note that the defaults for all of those 'browser chrome' settings is yes, so you can leave them out if you don't want to say no for them. Also, don't put any space in among the height, width, top, left, and chrome settings!)
Let's not specify the extra settings and let it open in a new window with this link.
<p>Let's not specify the extra settings and let it open in a new window
with this
<a href="javascript:location='example10.html';
window.open('../index.html', 'demo2')">link</a>.</p>
(Depending on your browser and its settings, the new window may open as a separate window, or it may open as a new tab. In either case, the new window should have focus and be in front.)
I don't like having to specify the current page URL, so let's try this link.
<p>I don't like having to specify the current page URL, so let's try
this
<a href="javascript:;" onclick="window.open('../index.html',
'demo3')">link</a>.</p>
(The example above uses a null link, and an onclick handler to open the window.)
Let's open more than one page into the same window with this link and then this link.
<p>Let's open more than one page into the same window with this
<a href="javascript:;" onclick="window.open('../index.html',
'demo4', 'height=400,width=500,top=50,left=50')">link</a>
and then this
<a href="javascript:;" onclick="myWindow=window.open('http://www.la.unm.edu',
'demo4', 'height=400,width=500,top=50,left=50'); myWindow.focus()">link</a>.</p>
(In the example above, the first link opens a window with the name demo4. You don't see that name, but it's the name of the new window. The second link opens a different page into the same window, replacing the first page, since it also was target to demo4. ALSO, notice that I did something different in the second link by making the window object myWindow, and then adding another JavaScript command, after the semicolon, that give focus to myWindow. This is important since otherwise the demo4 window would not automatically come to the front with its new content, because re-using an old window is not the same as making a new window...new windows automatically get focus.)
(This can also matter if somebody clicks on the link that makes a new window a second time, after the window has already been made but is now in back. The second click will NOT bring that window to the front, and it may appear that the link is not working. You can try this with the first link on this page. So, if you want to always make sure your new or reused windows come to the front, make the link like the second one above.)
Here's what a window looks like with all of the chrome turned off link.
<p>Here's what a window looks like with all of the chrome turned off
<a href="javascript:;" onclick="myWindow=window.open('http://www.la.unm.edu',
'demo5', 'height=400,width=500,top=50,left=50,scrollbars=no,toolbar=no,status=no,menubar=no,location=no,resizable=no');
myWindow.focus()">link</a>.</p>
(Note: Some browsers may not allow a script to turn of certain chrome items.)