Question

Linking to another page with an iframe

Asked by: verge02

Hi,

I have an index page with links (say index.html). When I click on a link, I would like to link to another page (say volume.html) with an iframe. The coding that I currently have for the iframe it this:

<iframe name="dteams" src="text/intro.html" width="400" height="430" scrolling="yes" frameborder="0" marginwidth="0" marginheight="0" ></iframe>

The default display page is intro.html as above.

There are two solutions that I am looking for:
1) I would sometimes like to specify a different page to appear in the iframe dteams (in volume.html) when linked from index.html

2) I would like to link to a specific location in the iframe dteams (in volume.html) when linked from index.html using <a name="something">

So... help!

Thanks!
Daniel

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

  • Plus...
  • 30 Day FREE access, no risk, no obligation
  • Collaborate with the world's top tech experts
  • Unlimited access to our exclusive solution database
  • Never be left without tech help again

Subscribe Now

Asked On
2004-03-17 at 18:36:54ID20922770
Tags

linking

,

iframe

,

page

,

another

Topic

JavaScript

Participating Experts
2
Points
350
Comments
20

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

  • "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
  • "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
  • "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Screenshot of Experts Exchange Knowledgebase

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Screenshot of an Article

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Screenshot of Experts Exchange Knowledgebase

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Related Solutions

  1. Page with iframe ?
    I have a page with an iframe in it and the outer part of the page has a button that I want to when clicked modify the contents of the iframe. The iframe statement I have is <!-- <p class="headlines" style="margin-bottom: 2px"> --> ...

Free Tech Articles

  1. WARNING: 5 Reasons why you should NEVER fix a computer for free.
    It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
  2. SCCM OSD Basic troubleshooting
    SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
  3. Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
    This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
  4. Create a Win7 Gadget
    This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
  5. Outlook continually prompting for username and password
    There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
  6. Backup Exchange 2010 Information Store using Windows Backup
    There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

  1. Avoiding Bugs in Microsoft Access
    Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
  2. Top 10 Best New Features in Visio 2010
    Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
  3. IT Consultant Business Secrets Revealed
    Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
  4. Disaster Recovery and Business Continuity
    Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
  5. Organize Your Visio Diagrams with Containers and Lists
    Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
  6. How to Us Objects, Properties, Events and Methods in Microsoft Access
    Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

 

by: ho_alanPosted on 2004-03-17 at 18:50:03ID: 10620537

see if this helps

<iframe id="dteams" name="dteams" src="text/intro.html" width="400" height="430" scrolling="yes" frameborder="0" marginwidth="0" marginheight="0" ></iframe>
<a name="link1" href=# onclick="document.getElementById('dteams').src='a.htm'">go to A</a>

 

by: verge02Posted on 2004-03-17 at 19:29:14ID: 10620706

Hi ho alan, thanks for your help...

I am not sure I was clear about what my problem was. Because your solution doesn't seem to work when I tried to implement it.

I need to click on a link from html page index.html that will bring me to another html page (vision.html) that contains the iframe dteams. This is the iframe code which is located in vision.html

<iframe id="dteams" name="dteams" src="text/intro.html" width="400" height="430" scrolling="yes" frameborder="0" marginwidth="0" marginheight="0" ></iframe>

So, when I click on a link from index.html, I need to go to vision.html (which contains the iframe),  but i need to specify which specific page to display in the iframe from index.html.

I hope it is clearer now. Thanks!

 

by: ho_alanPosted on 2004-03-17 at 20:01:49ID: 10620866

um... that means u want the part of containing iframe unchanged?
then u may try on frame

frame.html

<frameset rows="80%,20% >
<frame name="ifr" src="iframesrc.html">
<frame name="idx" src="index.html">
</frameset>

iframesrc.html
<html>
<iframe id="dteams" name="dteams" src="text/intro.html" width="400" height="430" scrolling="yes" frameborder="0" marginwidth="0" marginheight="0" ></iframe>
</html>

index.html
<html>
<a name="link1" href=vision.html>go to next page</a>
</html>


 

by: verge02Posted on 2004-03-17 at 20:12:25ID: 10620909

hmmm... no. the index.html page is totally unrelated to the vision.html page

so when i click on a link in index.html, it will take me to vision.html (which contains iframe)
index.html ---------------> vision.html

for instance, what i have in index.html is this:
<a href="vision.html">Vision</a>

It will take me to the vision.html right? But how can I also specify which page to load in the iframe section of vision.html?

 

by: jaysolomonPosted on 2004-03-17 at 20:48:52ID: 10621073

window.frames["iframeVision"].src = "http://google.com";


<iframe name="iframeVision"></iframe>


or in vision
<iframe src="http://google.com"></iframe>

???

 

by: ho_alanPosted on 2004-03-17 at 21:28:40ID: 10621212

um, let me make it clear first
u have a link in index.html
<a href="vision.html">vision</a>

in vision.html
u have a iframe
<iframe src... etc..></iframe>

now u want when u click "vision" in index.html, the iframe source in vision.html will be changed?

 

by: ho_alanPosted on 2004-03-17 at 22:13:41ID: 10621377

um.. see if this helps


index.html
<html>
<body>
<a href=vision.html?ifsrc=intro.htm>go to intro</a>
</body>
</html>

vision.html
<html>
<script>
function getSource()
{
   ifsrc=location.search.substring(1)
   ifsrc=ifsrc.substring(6,ifsrc.length)
   alert(ifsrc)
   document.getElementById('dteams').src = ifsrc
}
</script>
<body onLoad="getSource()">
<iframe id="dteams" name="dteams" width="400" height="430" scrolling="yes" frameborder="0" marginwidth="0" marginheight="0" ></iframe>
</body>
</html>

 

by: verge02Posted on 2004-03-17 at 23:20:55ID: 10621692

hey, you got it right... alan, this is what i want.

however, there is a slight problem. when i click on the link as soon as i load the page i want to go to (vision.html) i get pop-up warning with the iframe url (eg: intro.htm). I have to click OK first before the iframe laods. what do you think is the prob?

another thing is... just say in intro.html i have put a few codes of <a name="one"></a>, <a name="two"></a> just to get it load in a specific location of the page doesn't seem to work.

so in index.html i will put <a href=vision.html?ifsrc=intro.htm#one>go to intro</a>

do you have any idea?


i have already increased the points for your efforts. thanks!

 

by: ho_alanPosted on 2004-03-17 at 23:50:30ID: 10621858

ok, let me update the code a little bit

index.html
if u want to change "iframe source"
u can just replace <a name="page2.html"..etc..>

<html>
<body>
<a name="intro.html" href=# onclick="location.href='vision.html?ifsrc='+this.name">go to intro</a>
</body>
</html>

vision.html
the popup was due to "alert(ifsrc)" it's my testing code :-P

<html>
<script>
function getSource()
{
  ifsrc=location.search.substring(1)
  ifsrc=ifsrc.substring(6,ifsrc.length)
  document.getElementById('dteams').src = ifsrc
}
</script>
<body onLoad="getSource()">
<iframe id="dteams" name="dteams" width="400" height="430" scrolling="yes" frameborder="0" marginwidth="0" marginheight="0" ></iframe>
</body>
</html>

 

by: verge02Posted on 2004-03-18 at 00:13:09ID: 10621971

alan,

the code that i wanted already works when i remove the "alert(ifsrc)".

this is great!

there's one small minor thing tho... i hink you misuderstood what i wanted for the <a name="one"> thing

just say that i have your code
<a href=vision.html?ifsrc=intro.htm#one>go to intro</a>
in index.html

and in vision.html i have this code <a name="one">

when i click it, will it go to vision.html, with page intro.html displayed in the iframe, AND pointed at <a name="one">?

 

by: ho_alanPosted on 2004-03-18 at 00:22:21ID: 10622012

if you have the code <a name=one> in vision.html
it will not work as if the code in index.html

the codes work because of
1. <a name="intro.html" href=# onclick="location.href='vision.html?ifsrc='+this.name">go to intro</a>
this brings querystring from index.html to next page

2. getSource() in vision.html gets desired iframe source from the querystring from index.html

so in order to bring desired iframe to ur target page, u have use both 1 and 2, simply <a name="one"> won't have effect there

um.. am i clear? feel free to ask :-)

 

by: verge02Posted on 2004-03-18 at 00:37:33ID: 10622070

ok... well what i am trying to achieve is

when i go to vision.html and when it displays the iframe (intro.htm), how do i make it go to a certain section of the intro.html?

say this is intro.htm

xxxxxxxxxxxxx <top>
xxxxxxxxxxxxx
xxxxxxxxxxxxx
xxxxxxxxxxxxx
xxxxxxxxxxxxx<----------- how do i make the page display this part first instead of the top?
xxxxxxxxxxxxx
xxxxxxxxxxxxx<btm>

normally, we use <a name="something"> in the target page, and in the source page we add #something at the end of the link (eg <a href="location.html#something>)

so how do i get it to go there in the iframe?

 

by: ho_alanPosted on 2004-03-18 at 00:41:19ID: 10622087

okok, i get what u mean now :-)

inside intro.html
<a name="one">
<a name="two">

inside vision.html
<iframe id="dteams" name="dteams" width="400" height="430" scrolling="yes" frameborder="0" marginwidth="0" marginheight="0" ></iframe>

<a href=# onclick="document.getElementById('dteams').src=intro.html#one">goto one</a>

 

by: verge02Posted on 2004-03-18 at 01:04:30ID: 10622180

i need to use this code

<a href=# onclick="document.getElementById('dteams').src=intro.html#one">goto one</a>

in index.html, not vision.html

because i need to access it from index.html

can i use the earlier one that you gave?
like this:
<a href=vision.html?ifsrc=intro.html#life>  ?

 

by: ho_alanPosted on 2004-03-18 at 01:38:51ID: 10622309

sorry for any misunderstanding :-P

this one should work

index.html
<html>
<body>
<a name="one" href=# onclick="location.href='vision.html?ifsrc=intro.html#'+this.name">go to one in intro</a>
</body>
</html>

 

by: verge02Posted on 2004-03-18 at 02:02:58ID: 10622411

hey, really sorry to disturb you...

but when i use your code
<a name="one" href=# onclick="location.href='vision.html?ifsrc=intro.html#'+this.name">go to one in intro</a>

i only mange to link to go to the vision.html with intro.html in iframe. but the intro.html did not go to the <a name="one"> location.

further help?

 

by: ho_alanPosted on 2004-03-18 at 02:36:47ID: 10622560

that's ok :-)

i have tested, the following works ~

index.html
<html>
<body>
<a  href=# onclick="location.href='vision.html?ifsrc=intro.html?a='+this.name">go to one in intro</a>
</body>
</html>


vision.html
<html>
<script>
function getSource()
{
 ifsrc=location.search.substring(1)
 idx1 = ifsrc.indexOf("a=")
 anchorName = ifsrc.substring(idx1+2,ifsrc.length)
 ifsrc=ifsrc.substring(6,idx1-1)
 document.getElementById('dteams').src = ifsrc + "#" + anchorName
}
</script>
<body onLoad="getSource()">
<iframe id="dteams" name="dteams" width="400" height="430" scrolling="yes" frameborder="0" marginwidth="0" marginheight="0" ></iframe>
</body>
</html>

intro.html
<html>
hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>
hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>
hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>
<a name="one">hi<br></a>
</html>

 

by: jaysolomonPosted on 2004-03-18 at 06:09:57ID: 10623880

You should use return false on all null links

this
<a  href=# onclick="location.href='vision.html?ifsrc=intro.html?a='+this.name">go to one in intro</a>

should be
<a  href=# onclick="location.href='vision.html?ifsrc=intro.html?a='+this.name;return false;">go to one in intro</a>

 

by: verge02Posted on 2004-03-18 at 21:56:00ID: 10630673

it works when i use this:
<a  name="something" href=# onclick="location.href='vision.html?ifsrc=intro.html?a='+this.name;return false;">go to one in intro</a>

Thanks alan for all your help.

Thanks jaysolomon for your small input which contributed to my 'breakthrough' as well.

I am giving my points to Alan cos he has helped me a great deal. Thanks again folks.

 

by: ho_alanPosted on 2004-03-18 at 22:18:02ID: 10630760

glad to help :-)

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...