JavaScript Dynamic Links and Menus
JavaScript Dynamic Links and Menus Many sites use JavaScript to create links to other website pages. Here is some example code with diffe...
https://iongcid.blogspot.com/2017/11/javascript-dynamic-links-and-menus.html
JavaScript Dynamic Links and Menus
Many sites use JavaScript to create links to other website pages. Here is some examplecode with different link types that you may want to avoid:
<HTML>
<head>
<title>Link Examples ~ Things to stay away from</title>
<script type="text/javascript">
function gotoLocationX(){
window.location.href='http://www.cnn.com';
}
function gotoLocationY(){
window.location.href='http://www.yahoo.com';
}
function gotoLocationZ(){
window.location.href='http://www.google.com';
}
</script>
</head>
<body>
Example 1:
<a href="#" onClick="javascript:window.location.href=
'http://www.cnn.com'">News on CNN</a>
<br><br>
Example 2:
<a href="#" onClick="javascript:gotoLocationY()">Yahoo Portal</a>
<br><br>
Example 3:
<form>
<input name="mybtn" value="Google Search Engine" type=button
onClick="window.location.href='http://www.google.com'">
</form>
<br><br>
</body>
</html>
When you open this code in your browser, you will see a screen similar to Figure 8-2. This is not to say that you can never use dynamic links. You obviously can, but you
need to think about tweaking your code to help web spiders see what they need to see.
Looking back at the preceding example, instead of this:
<a href="#" onClick="javascript:gotoLocationY()">Yahoo Portal</a>
use this:
<a href="http://www.yahoo.com" onClick="javascript:gotoLocationY()">
Yahoo Portal</a>
 |
| Figure 8-2. Bad link examples output |
such variant:
<html>
<head>
<script type="text/javascript">
function goTo( form ) {
var optionIndex = form.menuOption.selectedIndex;
if ( optionIndex == 0 ) {
//do nothing
} else {
selectedURL = form.menuOption.options[ optionIndex ].value;
window.location.assign( selectedURL );
}
}
</script>
</head>
<body>
<h1>Menu Example</h1>
<form name="myform">
<select name="menuOption" size="1" onChange="goTo( this.form )">
<option>Menu Options (choose below)</option>
<option value="http://www.abcde.com/keyword1.html">Link 1</option>
<option value="http://www.abcde.com/keyword2.html">Link 2</option>
<option value="http://www.abcde.com/keyword3.html">Link 3</option>
<option value="http://www.abcde.com/keyword4.html">Link 4</option>
<option value="http://www.abcde.com/keyword5.html">Link 5</option>
</select>
</form>
</body>
</HTML>
This HTML code renders in your browser as shown in Figure 8-3. Note that the figure
represents the state of the drop-down box upon clicking the down arrow button. If you click on any of the choices shown in Figure 8-3, your browser opens the corresponding link. The basic problem with this approach is that we are using a nonstandard link to go to a particular page. This type of linking would present problems to web spiders, and hence would leave some of your links unspidered. There are even worse Figure 8-2. Bad link examples output.
Book : John I. Jerkovic
Post a Comment