Solved

iframe content as defined by an external page

Posted on 2003-10-22
6
169 Views
Last Modified: 2010-04-09
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
0
Comment
Question by:dtr
6 Comments
 
LVL 33

Accepted Solution

by:
knightEknight earned 250 total points
ID: 9598776
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
 

Author Comment

by:dtr
ID: 9599405
have you tested this? i like the sound of the idea but i can't seem to get it to work.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9599541
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 33

Expert Comment

by:knightEknight
ID: 9599548
start by opening pageB and pageC and clicking on the links.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9599923
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10428545
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now