Solving the Back Button Problem


window.frames["loader"].window.location.search =   "?" + escape(data); 

A problem related to the issue tackled in the previous phrase is the back button (and, of course, the forward button as well). When the page's URL does not change but its contents do, the back button does not really work as expected.

To solve this problemand again this phrase can show only a generic approach, not a full solution, since there are so many implementation-dependent detailstwo subproblems have to be worked on:

  • First, you have to make sure that upon loading of a page, the information in location.hash is applied to the page (if you use the previous phrase, this work has already been done).

  • Second, you have to make sure that the various pages with the new hash are in the browser's history; otherwise, the back and forward buttons will not work. This is done automatically with Mozilla browsers, but not with Internet Explorer.

The solution to the second subproblem is to use a hidden iframe that will load an invisible page, just to get an entry in the history of the page. Here is the iframe:

<iframe src="/books/3/490/1/html/2/loader.html" name="loader"   style="display:none"></iframe> 


Whenever something happens on the page (AJAX-wise), the loader frame must be forced to load again, with data appended to the URL (unlike the previous code, this time there must be a reload):

if (window.ActiveXObject) {   window.frames["loader"].window.location.search =     "?" + escape(data); } 


Finally, the loader frame must take care of applying any loaded data to the main document; at least for Internet Explorer this is required, since in this browser the back and forward buttons change the contents of the iframe!

window.onload = function() {   if (location.search.length >= 2) {     var data = unescape(       location.search.substring(1));     top.applyData(data);   } }; 


This makes the coder's life much more complicated, especially if there are many different AJAX effects on the page. But just to repeat one of the final sentences from the previous phrase: Your users benefit greatly from this convenient feature. And again, this workaround does not work with Safari and Konqueror (yet).

Understanding XSLT

In 1999, the W3C published the XSLT 1.0 specification. The acronym stands for Extensible Stylesheet Language Transformations. This is a language based on XML to transform data into another form. Most of the time, the output data is HTML, but other formats are also possible. On the Web, however, usually HTML is the way to go.

XSLT works with templates; within these templates you can, among other things, access node values and also attribute values in the XML source file. The following code shows a sample XSLT file:

<?xml version="1.0" encoding="UTF-8" ?> <xsl:stylesheet version="1.0"   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <ul>   <xsl:for-each select="books/book">     <li>       <xsl:value-of select="title" />       by       <xsl:value-of select="publisher" />       (<xsl:value-of select="@pubdate" />)     </li>   </xsl:for-each> </ul> </xsl:template> </xsl:stylesheet> The XSLT File (phrasebooks.xsl) 






JavaScript Phrasebook(c) Essential Code and Commands
JavaScript Phrasebook
ISBN: 0672328801
EAN: 2147483647
Year: 2006
Pages: 178

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net