asked on

How to use JavaScript to jump to a particular location in a iframe?

How to use JavaScript to jump to a particular location in a iframe?

The main pages displays a document in an iframe. The navigation menu on the left enables the user to jump to the particular location in the document.

main page:
<head>
<script language="javascript">
function JumpToSection( iframeId, iframeUrl )
{
document.getElementById( iframeId ).contentWindow.location = iframeUrl;
}
</script>
</head>
<body>
<form runat="server">
<div id="NavigationMenu" runat="server">

</div>
<iframe id="DisplayDoc" runat="server" />
</form>
</body>

navigation menu:

a.Href = "javascript:JumpToSection( '" & DisplayDoc.ClientId & "', '" & iframeSrc & "#" & sectionName & "' );"

<a> tag in the document:

<a name="SectionName">

When it runs, I received an error:
Line: 1
Char: 1
Error: Object expected
Code: 0
URL: localhost//myProject/DocApprove.aspx?tid=JGH17

JumpToSection( 'ctl00_ContentArea_frameTop', 'DocApprove.aspx?tid=JGH17#ScheduleR' );
Note: iframe ID="frameTop"

ASKER CERTIFIED SOLUTION

gregg1ep00

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

chuang4630

ASKER

It works now.

BTW, for some reason, the code

document.getElementById( iframeId ).contentWindow.location = iframeUrl;

does not work. The Javascript actually is looking for the ClientID of the frameTop. So I ahve to do some tweak to make it work. I can post the source code for you if you open a new thread.

Your code helps a lot. Thanks.

gregg1ep00

I'm not exactly sure how to open a new thread, but if you want to post the source code I can definitely try to help you out some more. :)

gregg1ep00

As far as that this javascript code goes:

document.getElementById( iframeId ).contentWindow.location = iframeUrl;

I'm not sure I understand why that doesn't work. I used it in a test web page that I created with no problems. If your iframe has the runat="server" attribute set, then you're right -- it is looking for the ClientID of the frameTop (that's what we're sending it from the code-behind in your <a> navigation controls). But that's what we want! ;)

Alternatively, if you have no reason to mess with the iframe itself from the server side, then you can ditch a lot of code and rewrite it like this:
----------------------------
<script language="javascript" type="text/javascript">
function JumpToSection( iframeUrl )
{
document.getElementById( 'frameTop' ).contentWindow.location = iframeUrl;
}
</script>
...
<body>
<div id="NavigationMenu" runat="server">

</div>
<iframe id="frameTop" /> 
</body>
----------------------------

Then in your code-behind:
----------------------------
protected void Page_Load( object sender, EventArgs e )
{
if ( !IsPostBack )
{
HtmlAnchor a = new HtmlAnchor();

/* I've changed the following line to omit
the iframe.ClientID attribute, if that iframe
doesn't have the runat=server attribute
*/
a.Href = "javascript:JumpToSection( '" + iframeSrc + "#" + sectionName + "' );";
a.InnerText = "Default.aspx";
NavigationMenu.Controls.Add( a );
}
}
----------------------------

Hopefully that helps. I'm not exactly sure what's throwing us off here. Perhaps if you post your source we can get on the same page (pun intended)!

:)