Solved

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

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

839 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