Getting Different pages according to the links we cliked

@sanatpadhyMay 26.2005

Hi All,

I am new to JavaScript. I need some fuctionality like this:

I have got one index.htm file. There so many links are there all pointing to the same file i.e. main.htm. main.htm is nothing but a frameset having left, top and body frames. The requirement is, I have to get different body content (different files) according to the links I click on.

Can anyone help me on this? An example will be of much help to me.

Waiting for an early response.

Thanks in advance.
Sanat

to post a comment

JavaScript

8 Comments(s) _↴

@phpnoviceMay 26.2005 — #The link should be:

href="main.htm?url=somepage.htm"

Then, server-side code or JavaScript in the FRAMESET page would extract this information and plug it into the main FRAME for the desired result. If no informaiton is supplied, then that code should have a default url which it can load into the main FRAME, instead.

@sanatpadhyauthorMay 26.2005 — #Can I get any code for this.

@phpnoviceMay 26.2005 — #Server-side? ...or, JavaScript?

@sanatpadhyauthorMay 27.2005 — #Can I get any JavaScript code for this please.

@sanatpadhyauthorMay 27.2005 — #My code is something like this:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
 <html>
 <head>
 <script type="text/javascript" src="js/ParseQueryString.js"></script>
 
 <script language="JavaScript">
 var pqs = new ParseQueryString();
 var page;
 if(pqs.param("page") == 1){
 page="body1.htm";
 }
 else if (pqs.param("page") == 2){
 page="body2.htm";
 }
 </script>
 </head>
 
 <frameset rows="52,*" cols="*" frameborder="NO" border="0" framespacing="0">
 <frame src="top_blank.htm" name="topFrame" scrolling="NO" noresize >
 <frameset cols="180,*" frameborder="NO" border="0" framespacing="0">
 <frame src="left_blank.htm" name="leftFrame" scrolling="NO" noresize>
 <frame src="***" name="mainFrame">
 </frameset>
 </frameset>
 <noframes><body>
 </body></noframes>
 </html>[/CODE]

Here is the script which I got from net

[CODE]/* ParseQueryString v1.0.1
 
 Changes since v1.0.0
 * bugfix for Netscape v4.79 browsers
 
 Copyright (c) 2004, Jeff Mott. All rights reserved.
 This is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License.
 <http://www.gnu.org/licenses/gpl.txt> */
 
 Object.prototype.clone = function()
 {
 var o = {};
 var property;
 
  for (property in this) {
   if (typeof this[property] == "object")
   o[property] = this[property].clone();
   else
   o[property] = this[property];
  }
 
  return o;
 }
 
 Array.prototype.clone = function()
 {
 var i;
 var a = [];
 
  for (i = 0; i < this.length; ++i) {
   if (typeof this[i] == "object")
   a[i] = this[i].clone();
   else
   a[i] = this[i];
  }
 
  return a;
 }
 
 String.prototype.decodeURL = function() {
 /* unescape has been deprecated in JavaScript 1.5 and later
 this line may need to be changed in a future version */
 return unescape(this.replace(/+/g, " "));
 }
 
 function ParseQueryString()
 {
 var parameters = {};
 var parameterNames = [];
 
  function init()
  {
   var i;
   var pair, pairs;
   var name, value;
 
   if (location.search.length < 2)
   return;
 
   pairs = location.search.substr(1).split(/[&;]/);
 
   for (i = 0; i < pairs.length; ++i)
   {
   pair = pairs[i].split(/=/);
 
   name = pair[0].decodeURL();
   if (pair[1] == undefined)
   continue;
   else
   value = pair[1].decodeURL();
 
   if (parameters[name] == undefined) {
   parameters[name] = [value];
   parameterNames.push(name);
   }
   else
   parameters[name].push(value);
   }
  }
  init();
 
  var scalarParamIndex = 0;
 
  this.param = function(name) {
   if (arguments.length)
   if (parameters[name] == undefined)
   return undefined;
   else
   return parameters[name][0];
   else {
   if (scalarParamIndex == parameterNames.length) {
   scalarParamIndex = 0;
   return undefined;
   }
   else
   return parameterNames[scalarParamIndex++];
   }
  }
 
  this.params = function(name) {
   if (arguments.length)
   if (parameters[name] == undefined)
   return null;
   else
   return parameters[name].clone();
   else
   return parameterNames.clone();
  }
 }[/CODE]

Now I'm able to get the parameter but how can I display different pages.

i.e what should I write instead of "***" so that I get the desired result.

Is there any other way to do this?

@blah1985May 27.2005 — #heres a non-framed option. Put a div up with an id example <div id="itsMe"></div> then use document.getElementById('itsMe').innerHTML='code'; or for IE document.all('itsMe').innerHTML='code';

Here is an example for you

[CODE]function setInnerHTML(whichObject, theHTML)
 {
 var theObject;
 
  if (document.getElementById){ theObject = document.getElementById(whichObject); }
  else if (document.all){ theObject = document.all[whichObject]; }
  else if (document.layers){ theObject = document.layers[whichObject]; }
 
  theObject.innerHTML = theHTML;
 }[/CODE]

Also you'll need to determain WHAT html to write. This can be accomplished by using the http://website.com/main.htm[B]?AnyNum[/B] (AnyNum is defined in the link.)

than to check what it is use a split on the url like so

[CODE]var urlV = top.location.href.split('?'); //splits the Url at the ?
 //urlV[1] is the Number after[/CODE]

and the final product

[CODE]
 <html>
 <head>
 <title>Test Page</title>
 <script>
 //<!--
 function checkURL()
 {
 var urlV = top.location.href.split('?');
 
  setInnerHTML(urlV[1]);
 
 }
 
 function setInnerHTML(theHTML)
 {
 
 if(navigator.appName == "Microsoft Internet Explorer")
 {
 if(theHTML==1)
 {
 document.all('itsMe').innerHTML ='<h1>Page One is HERE!</h1>';//Change Inner HTML
 document.title='Page One';//Change Title Of the Page
 }
 if(theHTML==2)
 {
 document.all('itsMe').innerHTML ='<strong>Page Two's is HERE!</strong>';//Change Inner HTML
 document.title='Page Two';//Change Title Of the Page
 }
 if(theHTML==3)
 {
 document.all('itsMe').innerHTML ='Me page Three!';//Change Inner HTML
 document.title='Page Three';//Change Title Of the Page
 } 
 }
 else
 {
 if(theHTML==1)
 {
 document.getElementById('itsMe').innerHTML ='<h1>Page One is HERE!</h1>';//Change Inner HTML
 document.title='Page One';//Change Title Of the Page
 }
 if(theHTML==2)
 {
 document.getElementById('itsMe').innerHTML ='<strong>Page Two's is HERE!</strong>';//Change Inner HTML
 document.title='Page Two';//Change Title Of the Page
 }
 if(theHTML==3)
 {
 document.getElementById('itsMe').innerHTML ='Me page Three!';//Change Inner HTML
 document.title='Page Three';//Change Title Of the Page
 }
 }
 
 
 }
 //window.onLoad=checkURL();
 //-->
 </script>
 </head>
 <body>
 <div id="itsMe"></div><BR>
 <a href="#?1">I go to 1</a><BR>
 <a href="#?2">I go to 2</a><BR>
 <a href="#?3">I go to 3</a><BR>
 <a href="javascript:checkURL();">Change Content</a><BR>
 </body>
 </html>
 [/CODE]

Phew wasn't that Fun?

@phpnoviceMay 27.2005 — #Can I get any JavaScript code for this please.[/QUOTE]
Basically, you just omit the [b]src[/b] attribute from the main FRAME tag specification. Then, the following JavaScript is executed upon FRAMESET load:

<i>
 </i>default = true;
 keys = top.location.search.substr(1).split("&amp;");
 for (x=0; x&lt;keys.length; x++) {
 keys[x] = keys[x].replace(/+/g, " ").split("=");
 keys[x][0] = unescape(keys[x][0]);
 keys[x][1] = unescape(keys[x][1]);
 if (keys[x][0] == "url") {
 top.frames["mainFrame"].location.href = keys[x][1];
 default = false;
 }
 }
 if (default) {
 top.frames["mainFrame"].location.href = "default.htm";
 }

Now I'm able to get the parameter but how can I display different pages.

i.e what should I write instead of "***" so that I get the desired result.

Is there any other way to do this?[/QUOTE]
Notice how I'm supporting a default page to be loaded into the main frame in my code?

@sanatpadhyauthorMay 27.2005 — #Finally I did that in some other way.

I wrote a JavaScript like this:

[CODE]function displayPage(page){
 document.write("<html>");
 document.write("<head>");
 document.write("<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">");
 document.write("<title>Untitled Document</title>");
 document.write("</head>");
 document.write("<frameset rows="52,*" cols="*" frameborder="NO" border="0" framespacing="0">");
 document.write("<frame src="top_blank.htm" name="topFrame" scrolling="NO" noresize >");
 document.write("<frameset cols="180,*" frameborder="NO" border="0" framespacing="0">");
 document.write("<frame src="left_blank.htm" name="leftFrame" scrolling="NO" noresize>");
 document.write("<frame src="" +page+"" name="mainFrame">");
 document.write("</frameset>");
 document.write("</frameset>");
 document.write("<noframes><body>");
 document.write("</body></noframes>");
 document.write("</html>");
 }[/CODE]

Now in my page I'll make a link like this

<a href="javascript:displayPage('pageURI')">Something</a>

It works fine.

Thanks all.

Also in #JavaScript _↴

Unicode xsl - How?Random position for images How Would This Url Read?

Success!

Help @sanatpadhy spread the word by sharing this article on Twitter...

Tweet This

Getting Different pages according to the links we cliked

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Getting Different pages according to the links we cliked

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴