Solved

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

Posted on 2006-07-18
4
337 Views
Last Modified: 2008-01-09
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">
            <!-- <a> tags will go here -->
        </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"
0
Comment
Question by:chuang4630
  • 3
4 Comments
 
LVL 4

Accepted Solution

by:
gregg1ep00 earned 500 total points
Comment Utility
Hm...  This code works for me:
------------------------
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
            function JumpToSection( iframeId, iframeUrl )
            {
                  document.getElementById( iframeId ).contentWindow.location = iframeUrl;
            }
    </script>
</head>
<body>
    <form id="form1" runat="server">
            <div id="NavigationMenu" runat="server">
            </div>
            
            <iframe id="frameTop" runat="server" />
    </form>
</body>
</html>
------------------------
.. And in the code-behind...
------------------------
      protected void Page_Load( object sender, EventArgs e )
      {
            if ( !IsPostBack )
            {
                  HtmlAnchor a = new HtmlAnchor();
                  a.HRef = "javascript:JumpToSection( '" + frameTop.ClientID + "', '../default.aspx' );";
                  a.InnerText = "Default.aspx";
                  NavigationMenu.Controls.Add( a );

                  a = new HtmlAnchor();
                  a.HRef = "javascript:JumpToSection( '" + frameTop.ClientID + "', '../login.aspx' );";
                  a.InnerText = "login.aspx";
                  NavigationMenu.Controls.Add( a );
            }
      }
------------------------

Try opening up a different page in the iframe (like I'm doing above) and see if you get the error.  If you don't get the error, then the problem lies in the document you're loading (DocApprove.aspx), not in the document viewer itself.
0
 
LVL 1

Author Comment

by:chuang4630
Comment Utility
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.

0
 
LVL 4

Expert Comment

by:gregg1ep00
Comment Utility
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.  :)
0
 
LVL 4

Expert Comment

by:gregg1ep00
Comment Utility
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">
        <!-- <a> tags go here -->
    </div>
    <iframe id="frameTop" />  <!-- NOTE there is no runat=server attribute for the iframe -->
</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)!

:)
0

Featured Post

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

Join & Write a Comment

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

744 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

14 Experts available now in Live!

Get 1:1 Help Now