Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
navigation
navigation
navigation
I-Frames -- Target Syntax Links
Basic I-frames has an introduction to i-frames. It gives some simple i-frame examples, and shows how to use the Foreign Object editor to set up an i-frame. It also covers setting i-frame parameters and touches on on links in i-frames.
This page covers some of the many ways you can use i-frames, generally relating to changing the contents of an i-frame or page with a special link. Here are the main topics:
This page covers some of the many ways you can use i-frames, generally relating to changing the contents of an i-frame or page with a special link. Here are the main topics:
- Changing the i-frame contents -- using target syntax
- Reverting to an empty i-frame
- Using one i-frame to change another
- Changing the main (parent) page from within an i-frame
- Bookmarks and i-frames
- Problems you may meet
- I-frames elsewhere on this site
Changing the i-frame contents -- using target syntax
The real interest is how you can change an i-frame's contents from outside the i-frame itself. This method uses an unconventional link:
The real interest is how you can change an i-frame's contents from outside the i-frame itself. This method uses an unconventional link:
- Link type (leave blank)
- Link URL:
The second part of the link, the target part, is unconventional. It specifies the name of the target -- i.e., the name of the i-frame which is to display the page. The iframeName is the name of the target i-frame. As mentioned in How-to Basics, you may wish to give the i-frame a name you can remember. If you don't rename it, the name you use will be geo followed by a number -- like geo1461.
The space ahead of the word target in the Link URL is cosmetic -- if you look at the published HTML code, you will see that it provides a logical break. If you don't care about such matters, leave it out and save yourself a byte of code
Don't put spaces anywhere else, and use double quotes, not single.
The space ahead of the word target in the Link URL is cosmetic -- if you look at the published HTML code, you will see that it provides a logical break. If you don't care about such matters, leave it out and save yourself a byte of code
Don't put spaces anywhere else, and use double quotes, not single.
The image to the right shows what a typical "target syntax" link looks like in the Quick Editor.
The slightly sneaky target syntax method works only with a link on an object. Not with a link from inside the text editor. For that, there is another way -- the FillFrame syntax .
Below are some links from text objects and thumbnails made using target syntax.. The last two links each have a deliberate error to show you the effect:
- The "Slide5" link shows what happens if the i-frame targeting is correct but the file does not exist -- you get a "file not found" message displayed in the i-frame.
- The last "Slide4" link shows what happens if your file is present, but the target information is wrong -- the file opens, but in the wrong frame or window.
There does not seem to be an easy way to revert an i-frame back to "empty" status after you have placed a page in it. The links show two ways that are a little sneaky:
- Place an empty page in the i-frame with a "target syntax" link. I created an almost empty page called BlankPage.html. This exists on the server, just like a regular html page.
- Place an image directly in the i-frame with a "target syntax" link. Instead of placing an image on a page, use the image directly. The syntax of the link changes to this:
Here is the page called IframeLeft.html which provides the content for the left-hand i-frame. A sample page for the right-hand i-frame is Slide.html.
If you use the target syntax for your links, the links will be exactly the same as described under that heading. The links of the left-hand frame above are all done this way.
If you use the target syntax for your links, the links will be exactly the same as described under that heading. The links of the left-hand frame above are all done this way.
Changing the main (parent) page from within an i-frame
The special target name _parent is reserved for the main page This allows you to change the main page in response to a click inside an i-frame on the main page. The format of the link is the same as for target syntax, except for a small variation.
Link type: (leave blank)
Link URL: ParentTest.html" target="_parent
The new main page I want to load here is called ParentTest.html -- change that name to suit your page.
There is an example of this at the very bottom of the left-hand i-frame above. Scroll down to the bottom of the i-frame and click the link "Change the parent (main) page".
The special target name _parent is reserved for the main page This allows you to change the main page in response to a click inside an i-frame on the main page. The format of the link is the same as for target syntax, except for a small variation.
Link type: (leave blank)
Link URL: ParentTest.html" target="_parent
The new main page I want to load here is called ParentTest.html -- change that name to suit your page.
There is an example of this at the very bottom of the left-hand i-frame above. Scroll down to the bottom of the i-frame and click the link "Change the parent (main) page".
Bookmarks and i-frames
Bookmarks in i-frames work just as they do on any other page. The browser will load the page into the i-frame, and then it will scroll to the bookmark. The page for display in the example i-frame below is IframeBookmarks.html.
There are four bookmarks on the page, together with three links that will take you to bookmarks on this, the parent page.
Bookmarks in i-frames work just as they do on any other page. The browser will load the page into the i-frame, and then it will scroll to the bookmark. The page for display in the example i-frame below is IframeBookmarks.html.
There are four bookmarks on the page, together with three links that will take you to bookmarks on this, the parent page.
The target syntax changes slightly to accommodate the bookmark. The only difference is the addition of a hash, then an anchor name. Standard bookmark stuff
- Link type (leave blank)
- Link URL:
Here is the actual URL part of my Bookmark1 link:
IframeBookmarks.html#Bookmark1" target="geo1971
IframeBookmarks.html#Bookmark1" target="geo1971
Bookmark on parent page
Changing the main (parent) page from within an i-frame shows how to change the main page in response to a click on a link in an i-frame. Once again, you can jump to a bookmark on either the current or a new parent page. The difference is just the addition of a hash and the anchor name.
Changing the main (parent) page from within an i-frame shows how to change the main page in response to a click on a link in an i-frame. Once again, you can jump to a bookmark on either the current or a new parent page. The difference is just the addition of a hash and the anchor name.
This is my actual link URL to go to my anchor called "Bookmarks" just above.
Link URL: Target.html#Bookmarks" target="_parent
Link URL: Target.html#Bookmarks" target="_parent
Jumping around inside the i-frame
If you click on a link in an i-frame that takes you to a bookmark in the same i-frame page, make that link as you would using a standard bookmark.
If you click on a link in an i-frame that takes you to a bookmark in the same i-frame page, make that link as you would using a standard bookmark.
Target syntax and text
Don't use target syntax for links from inside text objects. Here's what happens if you try: Remember the back button on your browser and click the link Slide1. The Slide1 page will open but not inside the frame you requested. SiteSpinner deletes the extra target information so reverting to a standard page link.
Opening the page in the existing window is fairly common if there is an error in the target part of the link. If you do much work with i-frames, you will meet it yourself
To control i-frames from inside text objects use FillFrame syntax instead.
Don't use target syntax for links from inside text objects. Here's what happens if you try: Remember the back button on your browser and click the link Slide1. The Slide1 page will open but not inside the frame you requested. SiteSpinner deletes the extra target information so reverting to a standard page link.
Opening the page in the existing window is fairly common if there is an error in the target part of the link. If you do much work with i-frames, you will meet it yourself
To control i-frames from inside text objects use FillFrame syntax instead.
Problems you may meet
The problems you may meet relate mostly to pages displaying in the wrong place or not at all. Always, the first thing to do is to check for typos in the link. These errors can be hard to spot, so check carefully. Even try retyping the whole link.
If you have no luck there, here are some other points to consider:
The problems you may meet relate mostly to pages displaying in the wrong place or not at all. Always, the first thing to do is to check for typos in the link. These errors can be hard to spot, so check carefully. Even try retyping the whole link.
If you have no luck there, here are some other points to consider:
No file displayed in the i-frame
If you click a link to change the contents of an i-frame and nothing happens check that:
If you click a link to change the contents of an i-frame and nothing happens check that:
- You specified the correct target i-frame name. If you specify the wrong frame, that frame may indeed be changing when you click -- but you won't notice it if it is outside your current view.
- You put the double quotes in the right place. Double quotes are essential for target syntax, single ones won't do. And there must be two of them.
File displayed in the wrong i-frame
This error indicates that the file name part of the link is OK, and that the target part of the link is mostly OK. It just sent the page to the wrong i-frame.
Check that the link specified the correct name for the i-frame. This will start with geo and then some number, -- this will be the name showing in the Name field of the Foreign Object Editor.
This error indicates that the file name part of the link is OK, and that the target part of the link is mostly OK. It just sent the page to the wrong i-frame.
Check that the link specified the correct name for the i-frame. This will start with geo and then some number, -- this will be the name showing in the Name field of the Foreign Object Editor.
File replaces the main page
This error indicates that the file you specified actually exists, but that the target part is seriously amiss. Check the syntax of the target part -- is should be like:
" target=geo1345"
The geo1345 should be the geometry name of the i-frame you are targeting. Make sure that a target of that exact name really does exist.
This error indicates that the file you specified actually exists, but that the target part is seriously amiss. Check the syntax of the target part -- is should be like:
" target=geo1345"
The geo1345 should be the geometry name of the i-frame you are targeting. Make sure that a target of that exact name really does exist.
'File Not Found' error in i-frame
This error indicates that the target part of the link is correct, but that there is a problem with the file name part. Make sure the file you are referencing really does exist. Check that you have the file name exactly correct. The file name includes the name a dot and the extension (usually. html).
File names can be case-sensitive -- usually this problem shows only when you have uploaded your site. File 'MyFile.html' is not the same as fIle 'Myfile.html
Also, avoid spaces and punctuation marks in file names -- underscores and dashes are OK, but be very cautious with any other punctuation.
This error indicates that the target part of the link is correct, but that there is a problem with the file name part. Make sure the file you are referencing really does exist. Check that you have the file name exactly correct. The file name includes the name a dot and the extension (usually. html).
File names can be case-sensitive -- usually this problem shows only when you have uploaded your site. File 'MyFile.html' is not the same as fIle 'Myfile.html
Also, avoid spaces and punctuation marks in file names -- underscores and dashes are OK, but be very cautious with any other punctuation.
Copying changes the i-frame name
If you copy an i-frame, or a page containing an i-frame, the name of the i-frame will change. This means that your carefully targeted links will all be broken and you will have to redo them. If you find this a serious problem, consider the use of FillFrame syntax where you can refer to i-frames by their number in the z-order.
If you copy an i-frame, or a page containing an i-frame, the name of the i-frame will change. This means that your carefully targeted links will all be broken and you will have to redo them. If you find this a serious problem, consider the use of FillFrame syntax where you can refer to i-frames by their number in the z-order.
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:
- FillFrame syntax. The advantage of the FillFrame syntax is that it allows you to make links from both inside text objects and from any other object that will take a link. So it is a general purpose replacement for target syntax
- 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
