Solved

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

Posted on 2006-07-18
4
346 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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

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…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…

628 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