<a href="http://destination.html"For more info on all the available parameters, see the w3chools.com article on HTML open()
onclick="var newWin = window.open(this.href,
'mywin','right=0,top='40',height='500',
menubar='yes',scrollbars='auto',
resizable='yes'); newWin.focus();
return false;">Destination Title</a>
The example code above is awfully long. What if you have a list or database of 500 product items that the user might randomly select for display in this handy single window? It would be better to store all the window.open() parameters in a separate script than to type them in each link. Less maintenance, smaller file size!
Use Javascript to open a new, reusable window
There is some additional code in the script below that makes it more robust. I can't take credit for it and I can't identify my original source because the same code is found in many scripts and tutorials on the web. I'm still grateful for it, though in a diffuse gauzy way.In Javascript, everything following // is a comment. You can remove all the comments if you use the script, but I recommend keeping the commented opening and closing CDATA lines if you want your XHTML document to validate.
<script type="text/javascript">Phew!
//<![CDATA[
var newwindow = '';
function openwin(url) {
// Check to see if newwindow is already open.
// If so, display the url in it.
if (!newwindow.closed && newwindow.location) {
newwindow.location.href = url;
} else {
// If it is not open, open it.
// The next 3 lines of code contain the window
// parameters and are wrapped to fit this post.
// Glue them together.
newwindow=window.open(url,'newWin','right=0,top=40,
height=500,width=500,menubar=yes,toolbar=yes,
scrollbars=auto,resizable=yes');
// If there is no parent window, use blunt force
if (!newwindow.opener) newwindow.opener = self;
}
// If focus method is allowed, let newwindow grab it
// and magically appear on top, even from the Taskbar
if (window.focus) {newwindow.focus()}
return false;
}
//]]>
</script>
This is what the window variables and specs mean:
- The url is a variable. When clicked, each link specifies it's own url (this.href) as the value.
- window name is 'newWin', but it could be anything, even 'name'
- Open the new window 0px from the right and 40px from the top
- Make the window 500px high and 500px wide
- Display the browser's menubar,toolbar,scrollbars when needed, and note that you can use 1 instead of yes, and 0 instead of no
- Allow user to resize the window
<a href='http://destination.html'That's it! The code block inside (not including) the <script> tags can be moved to an external file with a .js extension. Keeping scripts separate from HTML code means that you can use the same script with many HTML files. Remove the CDATA lines if you do this and call the script like this, in the <head> of your document:
onclick='return openwin(this.href)'>
<script type="text/javascript" src="yourFilename.js"></script>For more help, just Google javascript window.open. Enjoy!
0 comments:
Post a Comment