• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 353
  • Last Modified:

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">
            <!-- <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
chuang4630
Asked:
chuang4630
  • 3
1 Solution
 
gregg1ep00Commented:
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
 
chuang4630Author Commented:
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
 
gregg1ep00Commented:
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
 
gregg1ep00Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now