Solved

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

Posted on 2006-07-18
4
344 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 4

Accepted Solution

by:
gregg1ep00 earned 500 total points
ID: 17132136
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
ID: 17133490
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
ID: 17134498
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
ID: 17134555
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

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

Suggested Solutions

Title # Comments Views Activity
List<PaisEntity> - show some 1 38
Finding Events logs for IIS website that restarts 2 21
Adding items to a C# list incrementally 5 60
Json and ajax 1 20
This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

749 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