iframe content as defined by an external page

hi all,

i am trying to get an iframe on a page to display different content from different external pages. this is quite hard to explain so i will use an example:


page A contains an iframe. page B has a link to page A. Page C also has a link to page A. Pages B and C do not have an iframe and are seperate to page A. Pages D and E are to be displayed in the iframe.

When i click the link on page B i want page D to be displayed in the iframe but when i click the link from page C i want page E to be displayed. is there any way i can achieve this using javascript/html as opposed to php. i am working on an established site and so switching to anything other than javascript/html would be a huge pain!


i hope someone can help. many thanks,

dtr
dtrAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

knightEknightCommented:
You could pass in the page to be displayed on the querystring and then use that to load the iframe.

pageA:

<HTML>
<HEAD>
<SCRIPT language="javascript">
 function querystring(name)   // returns a named value from the querystring
 {
    var tmp = unescape( location.search.substring(1) );
    var i   = tmp.toUpperCase().indexOf(name.toUpperCase()+"=");

    if ( i >= 0 )
    {
       tmp = tmp.substring( name.length+i+1 );
       i = tmp.indexOf("&");
       return( tmp = tmp.substring( 0, (i>=0) ? i : tmp.length ));
    }

    return("");
 }
</SCRIPT>
</HEAD>

<BODY onload='self.frames["myIFrame"].location=querystring("url");'>
<IFRAME name="myIFrame">
</BODY>
</HTML>


Then in your links, do this ...

in pageB:
<A href="pageA.htm?url=pageD.htm">

in pageC:
<A href="pageA.htm?url=pageE.htm">
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dtrAuthor Commented:
have you tested this? i like the sound of the idea but i can't seem to get it to work.
0
knightEknightCommented:
I made some clarification changes, but functionally this should be the same.  This works in IE as tested:

pageA.htm:
  <HTML>
  <HEAD>
  <SCRIPT language="javascript">
   function querystring(name)   // returns a named value from the querystring
   {
      var tmp = unescape( location.search.substring(1) );
      var i   = tmp.toUpperCase().indexOf(name.toUpperCase()+"=");

      if ( i >= 0 )
      {
         tmp = tmp.substring( name.length+i+1 );
         i = tmp.indexOf("&");
         return( tmp = tmp.substring( 0, (i>=0) ? i : tmp.length ));
      }

      return("");
   }

   function loadFrame(url)
   {
      if ( url && (url+="").length>0 )
         self.frames["myIFrame"].location=url;
   }

  </SCRIPT>
  </HEAD>

  <BODY onload='loadFrame(querystring("url"));'>
   <IFRAME name="myIFrame" id="myIFrame"></IFRAME>
  </BODY>
  </HTML>



pageB.htm:
  <HTML>
   <A href="pageA.htm?url=pageD.htm">A:D</A>
  </HTML>


pageC.htm:
  <HTML>
   <A href="pageA.htm?url=pageE.htm">A:E</A>
  </HTML>


pageD.htm:
  <HTML>
    page D
  </HTML>


pageE.htm:
  <HTML>
    page E
  </HTML>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

knightEknightCommented:
start by opening pageB and pageC and clicking on the links.
0
VincentPugliaCommented:
Hi,


  if pageA's iframe is defined as:

<script>
function doit(url)
{
  if (url.length != 0)
     theFrame.location = url;
 }
</script>
<body onload="doit(location.search.substr(1))">

<iframe name='theFrame'></iframe>
</body>


pageB/C's links:

<a href="pageA.html?http://members.aol.com/grassblad">GrassBlade Javascript</a>

Vinny
0
Michel PlungjanIT ExpertCommented:
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Split: knightEknight {http:#9599548} & VincentPuglia {http:#9599923}

Please leave any comments here within the next four days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

mplungjan
EE Cleanup Volunteer
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.