[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Reference window object containing iFrame

Posted on 2006-04-01
14
Medium Priority
?
390 Views
Last Modified: 2008-03-17
Hello,

I'm sure I'm missing something simple here.

Lets say I have a page with an iFrame in it, and I want (from the page) to scrolldown to the bottom of the iFrame.

To do this in the page I can just use window.scrollTo(0,9999); for example. Question is, how do I reference the window object
that contains the iFrame so that I can scoll that instead of the parent?

I know how to reference the iFrame with its id, but its the containing window that I want to apply scrollTo() to.

Missing something obvious here?

Thanks





0
Comment
Question by:darkhorse0
  • 8
  • 6
14 Comments
 
LVL 9

Expert Comment

by:smaccari
ID: 16354255
If your IFRAME tag has a name attribute, for example "myFrame", you can reference it through : frames["myFrame"].
0
 

Author Comment

by:darkhorse0
ID: 16354402
Well, as I said above, I knwo how to reference the iframe, the question is referencing its window right?

The method scrollTo() applies to a window
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16354449
The frames collection contains window objects.
So, by using frames["myFrame"], you reference a window object and can use the scrollTo method on it.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 9

Expert Comment

by:smaccari
ID: 16354476
For more precision, if you reference your object throught document.getElementById, you will point an HTMLElement, not a window.
By using the frames collection, you will have your window object (though in this case it is not the id but the name attribute you have to use).
0
 

Author Comment

by:darkhorse0
ID: 16354602
Ok, I tried using the following syntax, which did'nt work:

frames['myiframe'].scrollTo(0,9999);

document.getElementById('myiframe').scrollTo(0,9999);

The first does nothing, returning no error, the second returns "object does'nt support..."

if the frames collection contains window objects then I must be missing a simple step here?
0
 

Author Comment

by:darkhorse0
ID: 16354614
And this is the iFrame tag source:

<iframe src="iframescrollbottom.html" name="myiframe" id="myiframe" Scrolling="yes" ></iframe>
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16354644
This code works for me :

<iframe src="page.htm" name="myiframe" id="myiframe" Scrolling="yes" ></iframe>
<a href="#" onclick="frames['myiframe'].scrollTo(0,9999)">GO</a>

If it doesn't for you, maybe should you give more details on your page and/or browser used.
0
 

Author Comment

by:darkhorse0
ID: 16354682
Calling onclick like you have works for me too. I don't know why, but just putting

frames['myiframe'].scrollTo(0,9999);

inside script tags after the iframe tag does'nt work. I need this to happen as the page loads. Any ideas why?

Try it - this is my entire page:

<html><head></head><body>
<iframe src="iframescrollbottom.html" name="myiframe" id="myiframe" Scrolling="yes" ></iframe>

<script language="JavaScript">

frames['myiframe'].scrollTo(0,9999);

</script>

<a href="#" onclick="frames['myiframe'].scrollTo(0,9999)">GO</a>

</body></html>

Yours works, mine does'nt???

0
 

Author Comment

by:darkhorse0
ID: 16354707
Ahh... it dawns. The iframe has not yet had time too load, this works:

setTimeout("frames['myiframe'].scrollTo(0,9999);",100)
0
 

Author Comment

by:darkhorse0
ID: 16354718
And for the same reason so does this:

<body onload="gotobottom()">


function gotobottom(){
frames['myiframe'].scrollTo(0,9999);
}
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16354729
Yes that's it ;)
You cannot scroll your frame if it is not loaded.
You could also put the scroll instruction in the onload event for the iframe :

<iframe src="iframescrollbottom.html" name="myiframe" id="myiframe" Scrolling="yes" onload="frames['myiframe'].scrollTo(0,9999);"></iframe>
0
 

Author Comment

by:darkhorse0
ID: 16354739
Yes, originally I had it in the iframe becuase I could'nt make the refernecing work from the parent, but thats ok now thanks to your help.

BTW, any idea how to do something more clever than scrollto 999? Its not nice, can I have an anchor and set it to scroll to that?

I'll up the points since this is really a extra question
0
 
LVL 9

Accepted Solution

by:
smaccari earned 2000 total points
ID: 16354766
Yes, you can put a named anchor at the bottom of the document in your IFrame.
Let's say you gave it the name "myAnchor", here is what you can do :

frames["myiframe"].document.anchors["myAnchor"].scrollIntoView();

0
 

Author Comment

by:darkhorse0
ID: 16354782
I had no idea about scrollIntoView()

Thanks for all your help smaccari, problems solved :)

Joe

0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

590 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