Problems with an Iframe and the Browser's Back Button

[Javier]

Hello,
I'm very new in this forum and as I have the following problem,
the website is in http://new.vanara.com
----------------------------------------------------------------------------
--------------------------------------------
Here's how the site works:
You should press a button in the rollover area in order to load a source
file on an Iframe, this Iframe is actually hidden working as a Buffer. The
body of this loaded Iframe is transfered to a layer via the innerHTML method
..

----------------------------------------------------------------------------
--------------------------------------------
Here's the problem:
The problem starts when you press the back button of the browser and the
text transfered to the layer changes as the Iframe does.
It is supposed that the only text that will should change if you press the
back button, is the one loaded on the Iframe (that doesn't matter), but not
the one transfered to the layer.



Any help or suggestion would be very helpful.
Thanks,
Javier.

 

[DU]

Hello,
I'm very new in this forum and as I have the following problem,
the website is in http://new.vanara.com
----------------------------------------------------------------------------
--------------------------------------------
Here's how the site works:
You should press a button in the rollover area in order to load a source
file on an Iframe, this Iframe is actually hidden working as a Buffer. The
body of this loaded Iframe is transfered to a layer via the innerHTML method
..

----------------------------------------------------------------------------

"transfered" means what exactly? New nodes being appended and
DOM-inserted into the DOM tree nodes? If so, then this can be verified
with a test page. My hunch is that the dynamically altered document will
replace the original document in the history and cache.

It is supposed that the only text that will should change if you press the
back button, is the one loaded on the Iframe (that doesn't matter), but not
the one transfered to the layer.

Let me assure you that if you want to control a behavior properly and
precisely in recent browsers, then your best chances are with using
validated markup code, validated CSS code and W3C DOM 2 attributes and
methods.
Here, I don't know for sure if what you're looking for is possible. I
have a demo page on a dynamically altered document in an iframe and
using the forward buttons loads the dynamically altered 2nd document
(not the original 2nd document) but that demo does not involve a 1st
document being modified.

Any help or suggestion would be very helpful.
Thanks,
Javier.

Your frameset uses invalid attributes, has no doctype declaration. Your
embedded stylesheet has several errors.
Non-zero length property value must have an unit.
4.2 Rules for handling parsing errors
"a unit must be specified for length values"
http://www.w3.org/TR/CSS2/syndata.html#parsing-errors
4.3.2 Lengths
"The format of a length value (denoted by <length> in this
specification) is an optional sign character ('+' or '-', with '+' being
the default) immediately followed by a <number> (with or without a
decimal point) immediately followed by a unit identifier (e.g., px, deg,
etc.). After the '0' length, the unit identifier is optional."
http://www.w3.org/TR/CSS2/syndata.html#length-units

You use "javascript:" pseudo-protocol in your href values: this is bound
to go wrong and cause problems.
http://jibbering.com/faq/#FAQ4_24

Your page is based on table design: that's not recommendable unless you
make use of tabular data... and here, it's not the case.

You also have a frameset hierarchy: 4 frames within 2 nested framesets.
Your
<frame src="fill.htm" name="leftFrame" scrolling="NO" noresize>
<frame src="fill.htm" name="rightFrame" scrolling="NO" noresize>
are empty documents also... maybe you're still building your website..
nevertheless..
I recommend you do not use frames like that. You may still use an iframe
for your webpage needs if it's the best solution for you.

The document never gets loaded in NS 7.1 because, most likely, of this
function:
function loadSourceFinish(id){
document.all[id].innerHTML = self.bufferFrame.document.body.innerHTML }

Your code should avoid everywhere use of document.all (for cross-browser
purposes) and innerHTML and eval() calls for many other reasons I won't
explain here.

One way to speed up rendering of your page is to minimize the number of
..js files: here, I wonder why you can not combine these 5 external
script files into 1 or 2 files.

Your style sheet could be optimized in many ways:

..content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #666666;
font-weight: normal;
padding-left:0;
line-height: 15px;
}

..content
{
font: normal 9px/15px Verdana,Arial,Helvetica,sans-serif;
color:#666;
}

Note that color is an inheritable property while padding-left is not.
So, depending on your markup code, it might not be even necessary to
declare padding-left and color here.

etc..

I think you should first deal with the design of your page (many frames
and frames should always be avoided if possible), define a tableless
design, then validating the markup code and CSS stylesheets.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Lasse Reichstein Nielsen]

Your code should avoid everywhere ....
....
for many other reasons I won't explain here.

While I support using standard methods as much as possible, I have not
been able to find a good argument for using DOM node creation instead of
the innerHTML property in practice. That is, I don't know of a browser
that supports .appendChild but not .innerHTML.

Can you expand on the problem with innerHTML?

Apart from that, I concur with your comments.
/L

 

[DU]

"transfered" means what exactly? New nodes being appended and
DOM-inserted into the DOM tree nodes? If so, then this can be verified
with a test page. My hunch is that the dynamically altered document will
replace the original document in the history and cache.


Let me assure you that if you want to control a behavior properly and
precisely in recent browsers, then your best chances are with using
validated markup code, validated CSS code and W3C DOM 2 attributes and
methods.
Here, I don't know for sure if what you're looking for is possible. I
have a demo page on a dynamically altered document in an iframe and
using the forward buttons loads the dynamically altered 2nd document
(not the original 2nd document) but that demo does not involve a 1st
document being modified.

I created a quick testpage

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/JavierMainDocument.html

and the original document remains in the history in MSIE 6 for windows
and Mozilla 1.4final but the altered document comes back in Opera 7.11
when you hit the back button. I'm not sure which behavior is according
to standards. Need to research this.
Maybe someone could point out what is the correct behavior here.

In any case, I know a "trick" which you could do to save, memorise the
info regarding the altered document.


DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[DU]

While I support using standard methods as much as possible, I have not
been able to find a good argument for using DOM node creation instead of
the innerHTML property in practice. That is, I don't know of a browser
that supports .appendChild but not .innerHTML.

I think the reasoning should be reversed here: if a browser supports
innerHTML, then is there another method or attribute which would be more
specific to the task I want to achieve, like a W3C DOM 2 method? And
they (recent browsers) usually have.
And appendChild is sometimes general and not the most specific and
appropriate attribute or method.

Can you expand on the problem with innerHTML?

Apart from that, I concur with your comments.
/L

Good arguments for using DOM node creation instead of innerHTML, you ask?

1) innerHTML is not a W3C DOM 2 attribute
2) innerHTML is general, not geared for a specific task; therefore it is
likely slower than other methods... although this has not been
demonstrated in a convincing manner ... it depends
"test page intended to find out which method of generating large amounts
of content is fastest in the browsers."
http://www.xs4all.nl/~ppk/js/innerhtml.html
3) Specifically purposed methods aiming at achieving specific tasks
should be more robust, more reliable. Ie.: insertRow[index] has to be
more appropriate than
document.createElement("tr") and objRefTable.appendChild(objTrow)
and much more appropriate than
var str = "<tr><td>asdf<\/td><\/tr>";
(...)
document.body.innerHTML += str;

Except item 1), I can't substantiate my opinion but one day I'll examine
all this.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Javier]

Hello DU and Lasse
When I say transfered I mean :

document.all[id].innerHTML = window.bufferFrame.document.body.innerHTML

being
id = my actual layer
bufferFrame = the Iframe

the body content of bufferFrame is being transfered to the layer, I'm not
sure if this is the most suitable term to use in this case.

Thank you very, very much for your time and recommendations, as a newbee I
had thought that my code was perfect and now I'm realizing that is not
(experience counts).

Hello,
I'm very new in this forum and as I have the following problem,
the website is in http://new.vanara.com
--------------------------------------------------------------------------

--

--------------------------------------------
Here's how the site works:
You should press a button in the rollover area in order to load a source
file on an Iframe, this Iframe is actually hidden working as a Buffer. The
body of this loaded Iframe is transfered to a layer via the innerHTML method
..

--------------------------------------------------------------------------

--
"transfered" means what exactly? New nodes being appended and
DOM-inserted into the DOM tree nodes? If so, then this can be verified
with a test page. My hunch is that the dynamically altered document will
replace the original document in the history and cache.

It is supposed that the only text that will should change if you press the
back button, is the one loaded on the Iframe (that doesn't matter), but not
the one transfered to the layer.

Let me assure you that if you want to control a behavior properly and
precisely in recent browsers, then your best chances are with using
validated markup code, validated CSS code and W3C DOM 2 attributes and
methods.
Here, I don't know for sure if what you're looking for is possible. I
have a demo page on a dynamically altered document in an iframe and
using the forward buttons loads the dynamically altered 2nd document
(not the original 2nd document) but that demo does not involve a 1st
document being modified.

Any help or suggestion would be very helpful.
Thanks,
Javier.

Your frameset uses invalid attributes, has no doctype declaration. Your
embedded stylesheet has several errors.
Non-zero length property value must have an unit.
4.2 Rules for handling parsing errors
"a unit must be specified for length values"
http://www.w3.org/TR/CSS2/syndata.html#parsing-errors
4.3.2 Lengths
"The format of a length value (denoted by <length> in this
specification) is an optional sign character ('+' or '-', with '+' being
the default) immediately followed by a <number> (with or without a
decimal point) immediately followed by a unit identifier (e.g., px, deg,
etc.). After the '0' length, the unit identifier is optional."
http://www.w3.org/TR/CSS2/syndata.html#length-units

You use "javascript:" pseudo-protocol in your href values: this is bound
to go wrong and cause problems.
http://jibbering.com/faq/#FAQ4_24

Your page is based on table design: that's not recommendable unless you
make use of tabular data... and here, it's not the case.

You also have a frameset hierarchy: 4 frames within 2 nested framesets.
Your
<frame src="fill.htm" name="leftFrame" scrolling="NO" noresize>
<frame src="fill.htm" name="rightFrame" scrolling="NO" noresize>
are empty documents also... maybe you're still building your website..
nevertheless..
I recommend you do not use frames like that. You may still use an iframe
for your webpage needs if it's the best solution for you.

The document never gets loaded in NS 7.1 because, most likely, of this
function:
function loadSourceFinish(id){
document.all[id].innerHTML = self.bufferFrame.document.body.innerHTML }

Your code should avoid everywhere use of document.all (for cross-browser
purposes) and innerHTML and eval() calls for many other reasons I won't
explain here.

One way to speed up rendering of your page is to minimize the number of
.js files: here, I wonder why you can not combine these 5 external
script files into 1 or 2 files.

Your style sheet could be optimized in many ways:

.content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #666666;
font-weight: normal;
padding-left:0;
line-height: 15px;
}

.content
{
font: normal 9px/15px Verdana,Arial,Helvetica,sans-serif;
color:#666;
}

Note that color is an inheritable property while padding-left is not.
So, depending on your markup code, it might not be even necessary to
declare padding-left and color here.

etc..

I think you should first deal with the design of your page (many frames
and frames should always be avoided if possible), define a tableless
design, then validating the markup code and CSS stylesheets.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[DU]

Hello DU and Lasse
When I say transfered I mean :

document.all[id].innerHTML = window.bufferFrame.document.body.innerHTML

being
id = my actual layer
bufferFrame = the Iframe

the body content of bufferFrame is being transfered to the layer, I'm not
sure if this is the most suitable term to use in this case.

Thank you very, very much for your time and recommendations, as a newbee I
had thought that my code was perfect and now I'm realizing that is not
(experience counts).

[snipped]

Are there any problems with using frames?
http://www.htmlhelp.com/faq/html/frames.html#frame-problems

What are frames, and why are they evil?
http://homepage.ntlworld.com/l_vajzovic/tom/web/frames.html

Why Frames Are A Bad Idea
http://www.iso.port.ac.uk/~mike/whynoframes.html

Why Frames Suck (Most of the Time)
"For new or inexperienced Web designers, I stand by my original
recommendation. Frames: Just Say No.(...)
Fundamental Problems with Frames"
J. Nielsen
http://www.useit.com/alertbox/9612.html

Aren't frames bad?
http://html.tucows.com/webmaster/intranetstuff/areframesbad.html

You should absolutely avoid empty frames and weird frames like:
<frameset border=0 rows="100%,*" frameborder="no" marginleft=0
margintop=0 marginright=0 marginbottom=0>
<frame src="http://161.184.245.22/public/troconis/newsite/index.htm"
scrolling=auto frameborder="no" border=0 noresize>
<frame topmargin="0" marginwidth=0 scrolling=no marginheight=0
frameborder="no" border=0 noresize>
....when the bottom frame has no existence really, no src and invalid
attributes.

IMO, usage of frames is very questionable. Iframe might be different: it
depends on the page requirements, context, etc..

You should first try to find a good design, a tableless design. These
are highly recommendable sites:

Open Source Web Design
http://www.oswd.org/

CSS Layout Techniques: Look Ma, No Tables:
http://glish.com/css/

CSS Tableless Sites
http://www.meryl.net/css/

and then you should use a full doctype declaration (choose preferably a
strict DTD) and you should strive to validate your markup page and CSS
code.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html