[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Changing iframe within iframe...

Posted on 2005-04-11
Medium Priority
Last Modified: 2008-03-06

Hi World!

I have an iframe that uses local anchors as such:

<!-- main page -->
<H1>Please click on a link to scroll down to the appropriate chapter:</H1>
<iframe src='/books/md.htm' id='contentpane'></iframe>

<!-- iframe content md.htm -->
<H2>Mywatta Dork</H2>
<a NAME="Chapter_One"></a>
<A href='#Chapter_Two'>Skip to the next chapter</A>
Call me Ishmael. Some years ago- never mind how long precisely- having ....
<a NAME="Chapter_Two"></a>
<A href='#Chapter_Three'>Skip to the next chapter</A>
<H3>The Carpet-Bag</H3>
I stuffed a shirt or two into my old carpet-bag, ....
.....and the great shroud of the sea rolled on as it rolled five thousand years ago.

My problem is that when I click on the local anchors within the iframe, the entire page gets replaced by the content instead of just the iframe. So I lose this line: "<H1>Please click on a link to ..."   I have no idea why the iframe takes over the entire page.... Also at one point, when I refeshed the page using "F5", the top part of the page flashed before being replaced by the iframe...

Any ideas what is going on here?

-- Bubba
Question by:bganoush
  • 5
  • 2

Author Comment

ID: 13752573

The actual iframe has these options set:

<iframe id='contentpane' src='/books/md.htm' width=100% height=100% scrolling=auto allowtransparency=true frameborder=0></iframe>

-- Bubba

Author Comment

ID: 13752649

What seems to be happening is that the main pane which is set as "scroll=no" seems to be scrolling out of view when the anchor is clicked but since there is no scrollbar, the user cannot bring it back into view.

So the question now should be... How do I avoid scrolling on the main pane?  is there an option for "scrolling=dont!"

-- Bubba
LVL 25

Expert Comment

ID: 13752701
Users always have scrollbar in their main browser window! so they can anytime scroll top to see your H2 tag
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.


Author Comment

ID: 13752748

I was able to kludge a fix.. At the end of each section, I have a button that does this:

<a href="javascript:scroll(0,0);">

I added this:

<a href="javascript:scroll(0,0);parent.scroll(0,0);">

It does allow the user to scroll the top back into view but if you just slide the iframe's scrollbar back up, you don't get the main pane's info.  So this is not desired...

-- Bubba

Author Comment

ID: 13752779


Thanks for you comment but I turned off the "scrollbar in the main browser window" because the iframe has its own scrollbar. I don't like seeing two scrollbars on the page.

-- Bubba
LVL 25

Accepted Solution

archrajan earned 2000 total points
ID: 13752796
Thats cool, so ur question is solved right?

Author Comment

ID: 13752828

Um.. no.

Even though I have a workaround.. Some users will be confused that the top of the window disappears...

You see, eventually, I want to add some tools and the corporate logo on there and other clickable stuff. And I want it all to always stay there no matter what happens within the content.

-- Bubba

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 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