Discussion:
client-side generation of HTML causes Back button to reload current page
(too old to reply)
Bruce Frank
2006-06-06 00:35:39 UTC
Permalink
My web page uses client-side scripting to generate and display HTML. A
skeleton representation of the file looks like this:

<html>
<head>
<script type="text/javascript">
// code to parse QueryString
// code to load XML and XSLT files and set XML parameters based on
QueryString values
// code to perform XSL transform and store output in string variable

document.write(str_output);
</script>
</head>
</html>

The code works great and the web page is displayed as expected. However,
the IE Back button causes the current page to be reloaded instead of
displaying the page associated with the previous URL. This is happening
seemingly because IE is interpreting the call to document.write as
equivalent to requesting a new page and is creating an additional entry in
the history list:

previous web page #1
previous web page #2
page containing call to document.write
HTML passed to call to document.write

When the Back button is clicked, IE goes to the previous entry in the list
and reloads the current URL which in turn regenerates the HTML and displays
the existing page. A check of web server logs confirms that clicking the
Back button causes the same page and supporting files to be retrieved as
were retrieved by the initial request.

Curiously, the history list displayed by clicking on the History button on
the IE toolbar shows only one entry for each explicitly requested page. It
may be that the IE history list internally stores two entries but displays
them as one because there is only one URL associated with the page. This is
only speculation and I don't know what is actually stored in the history
list or what IE is actually doing when the Back button is clicked.

Does anyone know of a way to get the Back button to display the previous web
page in this scenario? Any ideas or suggestions would be appreciated.
Thanks.

-Bruce
Walter Zackery
2006-06-06 06:11:12 UTC
Permalink
Try this in place of the document.write statement:

document.documentElement.innerHTML =
str_output.replace(/<\/?html.+?>/gi,"");

If you assigned any attributes to the HTML element in str_output, then you
would have to add further code to add those attributes.
Post by Bruce Frank
My web page uses client-side scripting to generate and display HTML. A
<html>
<head>
<script type="text/javascript">
// code to parse QueryString
// code to load XML and XSLT files and set XML parameters based on
QueryString values
// code to perform XSL transform and store output in string variable
document.write(str_output);
</script>
</head>
</html>
The code works great and the web page is displayed as expected. However,
the IE Back button causes the current page to be reloaded instead of
displaying the page associated with the previous URL. This is happening
seemingly because IE is interpreting the call to document.write as
equivalent to requesting a new page and is creating an additional entry in
previous web page #1
previous web page #2
page containing call to document.write
HTML passed to call to document.write
When the Back button is clicked, IE goes to the previous entry in the list
and reloads the current URL which in turn regenerates the HTML and displays
the existing page. A check of web server logs confirms that clicking the
Back button causes the same page and supporting files to be retrieved as
were retrieved by the initial request.
Curiously, the history list displayed by clicking on the History button on
the IE toolbar shows only one entry for each explicitly requested page.
It
may be that the IE history list internally stores two entries but displays
them as one because there is only one URL associated with the page. This is
only speculation and I don't know what is actually stored in the history
list or what IE is actually doing when the Back button is clicked.
Does anyone know of a way to get the Back button to display the previous web
page in this scenario? Any ideas or suggestions would be appreciated.
Thanks.
-Bruce
Bruce Frank
2006-06-07 05:27:47 UTC
Permalink
Thanks for the suggestion. I tried replacing the document.write statement
and reloading the web page but the new assignment statement produced a
run-time error: "Could not set the innerHTML property. Invalid target
element for this operation."

As a test I temporarily added this statement to check the state of the
.innerHTML property:

if (document.documentElement.innerHTML)
{
alert(document.documentElement.innerHTML);
}

The alert dialog box displayed everything inside of the <html> tags so the
innerHTML property exists but it cannot be assigned to. I don't know why.
Post by Walter Zackery
document.documentElement.innerHTML =
str_output.replace(/<\/?html.+?>/gi,"");
If you assigned any attributes to the HTML element in str_output, then you
would have to add further code to add those attributes.
Post by Bruce Frank
My web page uses client-side scripting to generate and display HTML. A
<html>
<head>
<script type="text/javascript">
// code to parse QueryString
// code to load XML and XSLT files and set XML parameters based on
QueryString values
// code to perform XSL transform and store output in string variable
document.write(str_output);
</script>
</head>
</html>
The code works great and the web page is displayed as expected.
However,
Post by Walter Zackery
Post by Bruce Frank
the IE Back button causes the current page to be reloaded instead of
displaying the page associated with the previous URL. This is happening
seemingly because IE is interpreting the call to document.write as
equivalent to requesting a new page and is creating an additional entry in
previous web page #1
previous web page #2
page containing call to document.write
HTML passed to call to document.write
When the Back button is clicked, IE goes to the previous entry in the list
and reloads the current URL which in turn regenerates the HTML and displays
the existing page. A check of web server logs confirms that clicking the
Back button causes the same page and supporting files to be retrieved as
were retrieved by the initial request.
Curiously, the history list displayed by clicking on the History button on
the IE toolbar shows only one entry for each explicitly requested page.
It
may be that the IE history list internally stores two entries but displays
them as one because there is only one URL associated with the page.
This
Post by Walter Zackery
Post by Bruce Frank
is
only speculation and I don't know what is actually stored in the history
list or what IE is actually doing when the Back button is clicked.
Does anyone know of a way to get the Back button to display the previous web
page in this scenario? Any ideas or suggestions would be appreciated.
Thanks.
-Bruce
Walter Zackery
2006-06-07 06:36:51 UTC
Permalink
That's my fault. The documentation for innerHTML states that it's read-only
for the HTML element. This workaround should work, I hope.

<html>
<head>
</head>
<body>
<script type="text/javascript">
// code to parse QueryString
// code to load XML and XSLT files and set XML parameters based on
QueryString values
// code to perform XSL transform and store output in string variable

document.all.tags("HEAD")[0].outerHTML = str_output.match(
/<head[\s\S]+?<\/head>/i)[0];
document.body.outerHTML = str_output.match(/<body[\s\S]+?<\/body>/i)[0];
</script>
</body>
</html>
Post by Bruce Frank
Thanks for the suggestion. I tried replacing the document.write statement
and reloading the web page but the new assignment statement produced a
run-time error: "Could not set the innerHTML property. Invalid target
element for this operation."
As a test I temporarily added this statement to check the state of the
if (document.documentElement.innerHTML)
{
alert(document.documentElement.innerHTML);
}
The alert dialog box displayed everything inside of the <html> tags so the
innerHTML property exists but it cannot be assigned to. I don't know why.
Post by Walter Zackery
document.documentElement.innerHTML =
str_output.replace(/<\/?html.+?>/gi,"");
If you assigned any attributes to the HTML element in str_output, then you
would have to add further code to add those attributes.
Post by Bruce Frank
My web page uses client-side scripting to generate and display HTML. A
<html>
<head>
<script type="text/javascript">
// code to parse QueryString
// code to load XML and XSLT files and set XML parameters based on
QueryString values
// code to perform XSL transform and store output in string variable
document.write(str_output);
</script>
</head>
</html>
The code works great and the web page is displayed as expected.
However,
Post by Walter Zackery
Post by Bruce Frank
the IE Back button causes the current page to be reloaded instead of
displaying the page associated with the previous URL. This is happening
seemingly because IE is interpreting the call to document.write as
equivalent to requesting a new page and is creating an additional entry
in
Post by Walter Zackery
Post by Bruce Frank
previous web page #1
previous web page #2
page containing call to document.write
HTML passed to call to document.write
When the Back button is clicked, IE goes to the previous entry in the
list
Post by Walter Zackery
Post by Bruce Frank
and reloads the current URL which in turn regenerates the HTML and displays
the existing page. A check of web server logs confirms that clicking
the
Post by Walter Zackery
Post by Bruce Frank
Back button causes the same page and supporting files to be retrieved as
were retrieved by the initial request.
Curiously, the history list displayed by clicking on the History button
on
Post by Walter Zackery
Post by Bruce Frank
the IE toolbar shows only one entry for each explicitly requested page.
It
may be that the IE history list internally stores two entries but
displays
Post by Walter Zackery
Post by Bruce Frank
them as one because there is only one URL associated with the page.
This
Post by Walter Zackery
Post by Bruce Frank
is
only speculation and I don't know what is actually stored in the history
list or what IE is actually doing when the Back button is clicked.
Does anyone know of a way to get the Back button to display the
previous
web
page in this scenario? Any ideas or suggestions would be appreciated.
Thanks.
-Bruce
Bruce Frank
2006-06-07 16:42:43 UTC
Permalink
Thanks for the revision. With the updated code I am hitting the same error
but this time for the outerHTML property:

Could not set the outerHTML property. Invalid target element for this
operation.

The error is happening for the line which attempts to replace the content
enclosed by the head tag pair. I created this simple test page as a minimal
case for reproducing the error:

<html>
<head></head>
<body>
<script type="text/javascript">
var str_output = "<html><head><title>This is the
title.</title></head><body><p>This is the body.</p></body></html>";
/*
alert(document.all.tags("HEAD")[0].outerHTML);
alert(str_output.match(/<head[\s\S]+?<\/head>/i)[0]);
alert(document.body.outerHTML);
alert(str_output.match(/<body[\s\S]+?<\/body>/i)[0]);
*/
document.all.tags("HEAD")[0].outerHTML =
str_output.match(/<head[\s\S]+?<\/head>/i)[0];
document.body.outerHTML = str_output.match(/<body[\s\S]+?<\/body>/i)[0];
</script>
</body>
</html>

The assignment statements are properly extracting the desired fragments of
the html as shown by the alert statements.

This code looks like it should work. The documentation at
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/outerhtml.asp
does not include the head tag in the list of objects for which the outerHTML
property is read-only.
Post by Walter Zackery
That's my fault. The documentation for innerHTML states that it's read-only
for the HTML element. This workaround should work, I hope.
<html>
<head>
</head>
<body>
<script type="text/javascript">
// code to parse QueryString
// code to load XML and XSLT files and set XML parameters based on
QueryString values
// code to perform XSL transform and store output in string variable
document.all.tags("HEAD")[0].outerHTML = str_output.match(
/<head[\s\S]+?<\/head>/i)[0];
Post by Walter Zackery
document.body.outerHTML = str_output.match(/<body[\s\S]+?<\/body>/i)[0];
</script>
</body>
</html>
Post by Bruce Frank
Thanks for the suggestion. I tried replacing the document.write statement
and reloading the web page but the new assignment statement produced a
run-time error: "Could not set the innerHTML property. Invalid target
element for this operation."
As a test I temporarily added this statement to check the state of the
if (document.documentElement.innerHTML)
{
alert(document.documentElement.innerHTML);
}
The alert dialog box displayed everything inside of the <html> tags so the
innerHTML property exists but it cannot be assigned to. I don't know why.
Post by Walter Zackery
document.documentElement.innerHTML =
str_output.replace(/<\/?html.+?>/gi,"");
If you assigned any attributes to the HTML element in str_output, then you
would have to add further code to add those attributes.
Post by Bruce Frank
My web page uses client-side scripting to generate and display HTML.
A
Post by Walter Zackery
Post by Bruce Frank
Post by Walter Zackery
Post by Bruce Frank
<html>
<head>
<script type="text/javascript">
// code to parse QueryString
// code to load XML and XSLT files and set XML parameters based on
QueryString values
// code to perform XSL transform and store output in string variable
document.write(str_output);
</script>
</head>
</html>
The code works great and the web page is displayed as expected.
However,
Post by Walter Zackery
Post by Bruce Frank
the IE Back button causes the current page to be reloaded instead of
displaying the page associated with the previous URL. This is happening
seemingly because IE is interpreting the call to document.write as
equivalent to requesting a new page and is creating an additional entry
in
Post by Walter Zackery
Post by Bruce Frank
previous web page #1
previous web page #2
page containing call to document.write
HTML passed to call to document.write
When the Back button is clicked, IE goes to the previous entry in the
list
Post by Walter Zackery
Post by Bruce Frank
and reloads the current URL which in turn regenerates the HTML and displays
the existing page. A check of web server logs confirms that clicking
the
Post by Walter Zackery
Post by Bruce Frank
Back button causes the same page and supporting files to be retrieved as
were retrieved by the initial request.
Curiously, the history list displayed by clicking on the History button
on
Post by Walter Zackery
Post by Bruce Frank
the IE toolbar shows only one entry for each explicitly requested page.
It
may be that the IE history list internally stores two entries but
displays
Post by Walter Zackery
Post by Bruce Frank
them as one because there is only one URL associated with the page.
This
Post by Walter Zackery
Post by Bruce Frank
is
only speculation and I don't know what is actually stored in the history
list or what IE is actually doing when the Back button is clicked.
Does anyone know of a way to get the Back button to display the
previous
web
page in this scenario? Any ideas or suggestions would be
appreciated.
Post by Walter Zackery
Post by Bruce Frank
Post by Walter Zackery
Post by Bruce Frank
Thanks.
-Bruce
Continue reading on narkive:
Search results for 'client-side generation of HTML causes Back button to reload current page' (Questions and Answers)
5
replies
can i get question answer of asp.net ?
started 2006-10-11 00:02:47 UTC
software
Loading...