Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
navigation
navigation
navigation
The same code object is good for many bookmarks. The location on the page is not important. Optional: turn off CSS positioning.
I-frames -- FillFrame Syntax for Links
Basic I-frames covers the basics of i-frames and how to set them up. Target syntax shows how you can use a link on an object to change i-frame content.
This page covers another way of changing i-frame contents -- using "FillFrame syntax".
I have given it this name, as that is the name of the javascript function it uses.
This syntax is more general purpose, as it allows you to also change the contents of i-frames from inside text objects -- a restriction when using the target syntax.
This page covers another way of changing i-frame contents -- using "FillFrame syntax".
I have given it this name, as that is the name of the javascript function it uses.
This syntax is more general purpose, as it allows you to also change the contents of i-frames from inside text objects -- a restriction when using the target syntax.
Main topics covered here:
- Steps to using the FillFrame syntax
- Links from objects which themselves are in an i-frame
- Jump to bookmark on the main page (from within an i-frame)
- Bookmarks in the i-frame page
- Updating the window history
- Problems you may meet
- I-frames elsewhere on this site
Steps to using the FillFrame syntax
To do use the FillFrame syntax, take the following steps:
To do use the FillFrame syntax, take the following steps:
- Add a code object to your main page
- Send the code object to the back
- Set the links to change the contents of the i-frame(s)
Step 1 -- add a code object to your main page
Place the following code object on the page holding the i-frame(s). Turn off CSS positioning too -- and save yourself a hundred bytes of code.
Place the following code object on the page holding the i-frame(s). Turn off CSS positioning too -- and save yourself a hundred bytes of code.
<SCRIPT type="text/javascript">
function FillFrame(PageName,FrameName) {
var DefaultFrame=0
var DefaultExtn='.html'
if (FrameName==undefined) {FrameName=DefaultFrame}
if (PageName.indexOf('.')>-1) {DefaultExtn=''}
frames[FrameName].location.replace(PageName+DefaultExtn)
}
</SCRIPT>
function FillFrame(PageName,FrameName) {
var DefaultFrame=0
var DefaultExtn='.html'
if (FrameName==undefined) {FrameName=DefaultFrame}
if (PageName.indexOf('.')>-1) {DefaultExtn=''}
frames[FrameName].location.replace(PageName+DefaultExtn)
}
</SCRIPT>
Frame 0 is the first frame on your page, frame 1 is the second and so on. So if you have multiple frames on your page, substitute a different number for the 0 in DefaultFrame=0. The numbering of these frames on the page is in z-order.
Using this numbering may be confusing if you are not used to it. Because Frame 0 is the first frame on the page, Frame 2, for example, is actually the third frame on the page.
If you have more than two i-frames on your page, you may prefer to refer to the i-frame by name instead of number. If so, use this code object instead:
Using this numbering may be confusing if you are not used to it. Because Frame 0 is the first frame on the page, Frame 2, for example, is actually the third frame on the page.
If you have more than two i-frames on your page, you may prefer to refer to the i-frame by name instead of number. If so, use this code object instead:
<SCRIPT type="text/javascript">
function FillFrame(PageName,FrameName) {
var DefaultFrame='geo1552'
var DefaultExtn='.html'
if (FrameName==undefined) {FrameName=DefaultFrame}
if (PageName.indexOf('.')>-1) {DefaultExtn=''}
frames[FrameName].location.replace(PageName+DefaultExtn)
}
</SCRIPT>
function FillFrame(PageName,FrameName) {
var DefaultFrame='geo1552'
var DefaultExtn='.html'
if (FrameName==undefined) {FrameName=DefaultFrame}
if (PageName.indexOf('.')>-1) {DefaultExtn=''}
frames[FrameName].location.replace(PageName+DefaultExtn)
}
</SCRIPT>
Compared to the first code object, this is just a one-line change -- for the DefaultFrame. Substitute the actual geometry name of your i-frame. i.e. replace the geo1552 with the actual name you are using for your default i-frame.
The DefaultFrame is the i-frame the code object will use, unless you specify some other frame in the special link (coming up).
The DefaultFrame is the i-frame the code object will use, unless you specify some other frame in the special link (coming up).
Step 2 -- send the code object to the back
Send this code object to the back. The buttons to do this are on the the bottom toolbar. There's no need to send it right to the back; it is only necessary that the code object should be higher up the page in the html code than the i-frame(s) it is referencing. More about this in Z-Order.
Send this code object to the back. The buttons to do this are on the the bottom toolbar. There's no need to send it right to the back; it is only necessary that the code object should be higher up the page in the html code than the i-frame(s) it is referencing. More about this in Z-Order.
Link type: (leave blank)
Link URL: javascript:FillFrame('MyPage', 'I-frame Name')
MyPage is the name of your page without the.html extension
I-frame name is the name of the i-frame. This could also be a number like 2 (without quote marks) -- meaning the third i-frame on the page.
Here is the text editor link like the ones I used for the working examples above.
Link URL: javascript:FillFrame('MyPage', 'I-frame Name')
MyPage is the name of your page without the.html extension
I-frame name is the name of the i-frame. This could also be a number like 2 (without quote marks) -- meaning the third i-frame on the page.
Here is the text editor link like the ones I used for the working examples above.
If you want the target to be the default i-frame set up in the code object, omit the i-frame name altogether. Following are all valid links which target the default i-frame. In each case, the file specified must actually exist, either in the root directory or in some other directory like /image, which you must specify along with the file name.
javascript:FillFrame('Slide1')
javascript:FillFrame('Slide1.html')
javascript:FillFrame('Slide1.jpg')
javascript:FillFrame('image/Slide1.jpg')
javascript:FillFrame('Slide1.htm')
javascript:FillFrame('Slide1.txt')
To any of the links above, you can add a target i-frame name or number
javascript:FillFrame('Slide1','geo1552')
javascript:FillFrame('Slide1',2) (assuming you have an i-frame number 2)
javascript:FillFrame('Slide1')
javascript:FillFrame('Slide1.html')
javascript:FillFrame('Slide1.jpg')
javascript:FillFrame('image/Slide1.jpg')
javascript:FillFrame('Slide1.htm')
javascript:FillFrame('Slide1.txt')
To any of the links above, you can add a target i-frame name or number
javascript:FillFrame('Slide1','geo1552')
javascript:FillFrame('Slide1',2) (assuming you have an i-frame number 2)
A few notes:Add a dot and the file extension to the file name, if it is not the default .html
Change the geo1552 to match the name of your i-frame
If you specify an i-frame number, change the 2 to match the number of your i-frame on the page
Pay special attention to the placement of the quote marks
A space after the comma is OK
Use single quotes, not double. SiteSpinner uses the double quotes to make the link in the code. Contrast with target syntax which is the reverse 
- My page or file to be displayed is called
Links from objects which themselves are in an i-frame
In this example, the object in an i-frame has a link to change the contents of another i-frame on the same page. This 'object' can either be a regular object or a link from inside a text object as I have done.
Here is a case where a picture really is worth a thousand words. Click any of the links below.
In this example, the object in an i-frame has a link to change the contents of another i-frame on the same page. This 'object' can either be a regular object or a link from inside a text object as I have done.
Here is a case where a picture really is worth a thousand words. Click any of the links below.
Code object. The code object on the main page is exactly the same as used for Step 1 above.
Link. Using the the link is almost the same too, except that this time, include the word parent to denote that the FillFrame function is on the parent page, not the one in the i-frame. This time the link used from inside the text object is like this:
javascript:parent.FillFrame('Slide1',2)
Link. Using the the link is almost the same too, except that this time, include the word parent to denote that the FillFrame function is on the parent page, not the one in the i-frame. This time the link used from inside the text object is like this:
javascript:parent.FillFrame('Slide1',2)
<SCRIPT type="text/javascript">
function GotoBookmark(Bookmark) {
location.hash=Bookmark
}
</SCRIPT>
function GotoBookmark(Bookmark) {
location.hash=Bookmark
}
</SCRIPT>
Link for jump to bookmark
This time the link used from inside the text object is like this:
javascript:parent.GotoBookmark('Step1')
Hover over the link in the i-frame with your mouse and you should see this text on the status bar.
The name of the javascript function on the main (parent) page is GotoBookmark. Notice the parent part again -- this indicates to the i-frame that the function is on the parent page
The name of the bookmark is Step1. Change that name to the bookmark on your page -- and note that there is no # character which usually precedes links to bookmarks.
This time the link used from inside the text object is like this:
javascript:parent.GotoBookmark('Step1')
Hover over the link in the i-frame with your mouse and you should see this text on the status bar.
The name of the javascript function on the main (parent) page is GotoBookmark. Notice the parent part again -- this indicates to the i-frame that the function is on the parent page
The name of the bookmark is Step1. Change that name to the bookmark on your page -- and note that there is no # character which usually precedes links to bookmarks.
Bookmarks in the i-frame page
By extending the FillFrame syntax to include a file extension, a hash and anchor name, it is possible to jump to bookmarks in the i-frame page. See the following example:
By extending the FillFrame syntax to include a file extension, a hash and anchor name, it is possible to jump to bookmarks in the i-frame page. See the following example:
The links at the bottom of the i-frame page are intended to illustrate target syntax bookmarks, so if you click them here, you will end up on the target syntax page.
The syntax for the link is standard FillFrame syntax except that you must include a the file extension (.html), a hash, and then the anchor name. This is the link for my Bookmark1 above -- additions shown in red.
The syntax for the link is standard FillFrame syntax except that you must include a the file extension (.html), a hash, and then the anchor name. This is the link for my Bookmark1 above -- additions shown in red.
javascript:FillFrame('IframeBookmarks.html#Bookmark1','geo1953')
Updating the window history
The FillFrame code objects above do not update the window history (do not change what appears when you use the browser back button). This is reasonable when there is very little in the f-frame. However, for more substantial i-frame content, you may want the window history to be updated. If so, replace this line of code:
frames[FrameName].location.replace(PageName+DefaultExtn)
with this one:
frames[FrameName].location=PageName+DefaultExtn
The FillFrame code objects above do not update the window history (do not change what appears when you use the browser back button). This is reasonable when there is very little in the f-frame. However, for more substantial i-frame content, you may want the window history to be updated. If so, replace this line of code:
frames[FrameName].location.replace(PageName+DefaultExtn)
with this one:
frames[FrameName].location=PageName+DefaultExtn
Problems you may meet
The problems you may meet are similar to these problems you may meet when using target syntax. If you use numbers when referring to i-frames, you have the possibility of number confusion instead of name confusion.
When you copy an i-frame it gets a new name and a new number in the z-order. Also, if you use the front/back buttons on i-frames, this can change their numbering.
The problems you may meet are similar to these problems you may meet when using target syntax. If you use numbers when referring to i-frames, you have the possibility of number confusion instead of name confusion.
When you copy an i-frame it gets a new name and a new number in the z-order. Also, if you use the front/back buttons on i-frames, this can change their numbering.
I-frames elsewhere on this site
The following pages describe the further use of i-frames in ways not fully covered here:
The following pages describe the further use of i-frames in ways not fully covered here:
- Target syntax. A basic way of changing i-frame content. It does not work from inside text objects. It is probably a little easier to use than FillFrame syntax -- no code object needed
- Advanced i-frames: more neat things you can do with i-frames
- Using the OnLoad Event: Changing a secondary i-frame whenever a primary changes
- Slide shows: with manual or automatic slide advance
- Background music: keep background music playing while you change foreground pages
- Long text object: avoid browser line spacing differences -- put your long text object in an i-frame
