History.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:7k
源码类别:

JavaScript

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.1.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.History
  3.  * @extends Ext.util.Observable
  4.  * History management component that allows you to register arbitrary tokens that signify application
  5.  * history state on navigation actions.  You can then handle the history {@link #change} event in order
  6.  * to reset your application UI to the appropriate state when the user navigates forward or backward through
  7.  * the browser history stack.
  8.  * @singleton
  9.  */
  10. Ext.History = (function () {
  11.     var iframe, hiddenField;
  12.     var ready = false;
  13.     var currentToken;
  14.     function getHash() {
  15.         var href = top.location.href, i = href.indexOf("#");
  16.         return i >= 0 ? href.substr(i + 1) : null;
  17.     }
  18.     function doSave() {
  19.         hiddenField.value = currentToken;
  20.     }
  21.     function handleStateChange(token) {
  22.         currentToken = token;
  23.         Ext.History.fireEvent('change', token);
  24.     }
  25.     function updateIFrame (token) {
  26.         var html = ['<html><body><div id="state">',Ext.util.Format.htmlEncode(token),'</div></body></html>'].join('');
  27.         try {
  28.             var doc = iframe.contentWindow.document;
  29.             doc.open();
  30.             doc.write(html);
  31.             doc.close();
  32.             return true;
  33.         } catch (e) {
  34.             return false;
  35.         }
  36.     }
  37.     function checkIFrame() {
  38.         if (!iframe.contentWindow || !iframe.contentWindow.document) {
  39.             setTimeout(checkIFrame, 10);
  40.             return;
  41.         }
  42.         var doc = iframe.contentWindow.document;
  43.         var elem = doc.getElementById("state");
  44.         var token = elem ? elem.innerText : null;
  45.         var hash = getHash();
  46.         setInterval(function () {
  47.             doc = iframe.contentWindow.document;
  48.             elem = doc.getElementById("state");
  49.             var newtoken = elem ? elem.innerText : null;
  50.             var newHash = getHash();
  51.             if (newtoken !== token) {
  52.                 token = newtoken;
  53.                 handleStateChange(token);
  54.                 top.location.hash = token;
  55.                 hash = token;
  56.                 doSave();
  57.             } else if (newHash !== hash) {
  58.                 hash = newHash;
  59.                 updateIFrame(newHash);
  60.             }
  61.         }, 50);
  62.         ready = true;
  63.         Ext.History.fireEvent('ready', Ext.History);
  64.     }
  65.     function startUp() {
  66.         currentToken = hiddenField.value ? hiddenField.value : getHash();
  67.         if (Ext.isIE) {
  68.             checkIFrame();
  69.         } else {
  70.             var hash = getHash();
  71.             setInterval(function () {
  72.                 var newHash = getHash();
  73.                 if (newHash !== hash) {
  74.                     hash = newHash;
  75.                     handleStateChange(hash);
  76.                     doSave();
  77.                 }
  78.             }, 50);
  79.             ready = true;
  80.             Ext.History.fireEvent('ready', Ext.History);
  81.         }
  82.     }
  83.     return {
  84.         /**
  85.          * The id of the hidden field required for storing the current history token.
  86.          * @type String
  87.          * @property
  88.          */
  89.         fieldId: 'x-history-field',
  90.         /**
  91.          * The id of the iframe required by IE to manage the history stack.
  92.          * @type String
  93.          * @property
  94.          */
  95.         iframeId: 'x-history-frame',
  96.         events:{},
  97.         /**
  98.          * Initialize the global History instance.
  99.          * @param {Boolean} onReady (optional) A callback function that will be called once the history
  100.          * component is fully initialized.
  101.          * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to the browser window.
  102.          */
  103.         init: function (onReady, scope) {
  104.             if(ready) {
  105.                 Ext.callback(onReady, scope, [this]);
  106.                 return;
  107.             }
  108.             if(!Ext.isReady){
  109.                 Ext.onReady(function(){
  110.                     Ext.History.init(onReady, scope);
  111.                 });
  112.                 return;
  113.             }
  114.             hiddenField = Ext.getDom(Ext.History.fieldId);
  115.             if (Ext.isIE) {
  116.                 iframe = Ext.getDom(Ext.History.iframeId);
  117.             }
  118.             this.addEvents(
  119.                 /**
  120.                  * @event ready
  121.                  * Fires when the Ext.History singleton has been initialized and is ready for use.
  122.                  * @param {Ext.History} The Ext.History singleton.
  123.                  */
  124.                 'ready',
  125.                 /**
  126.                  * @event change
  127.                  * Fires when navigation back or forwards within the local page's history occurs.
  128.                  * @param {String} token An identifier associated with the page state at that point in its history.
  129.                  */
  130.                 'change'
  131.             );
  132.             if(onReady){
  133.                 this.on('ready', onReady, scope, {single:true});
  134.             }
  135.             startUp();
  136.         },
  137.         /**
  138.          * Add a new token to the history stack. This can be any arbitrary value, although it would
  139.          * commonly be the concatenation of a component id and another id marking the specifc history
  140.          * state of that component.  Example usage:
  141.          * <pre><code>
  142. // Handle tab changes on a TabPanel
  143. tabPanel.on('tabchange', function(tabPanel, tab){
  144.     Ext.History.add(tabPanel.id + ':' + tab.id);
  145. });
  146. </code></pre>
  147.          * @param {String} token The value that defines a particular application-specific history state
  148.          * @param {Boolean} preventDuplicates When true, if the passed token matches the current token
  149.          * it will not save a new history step. Set to false if the same state can be saved more than once
  150.          * at the same history stack location (defaults to true).
  151.          */
  152.         add: function (token, preventDup) {
  153.             if(preventDup !== false){
  154.                 if(this.getToken() == token){
  155.                     return true;
  156.                 }
  157.             }
  158.             if (Ext.isIE) {
  159.                 return updateIFrame(token);
  160.             } else {
  161.                 top.location.hash = token;
  162.                 return true;
  163.             }
  164.         },
  165.         /**
  166.          * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
  167.          */
  168.         back: function(){
  169.             history.go(-1);
  170.         },
  171.         /**
  172.          * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
  173.          */
  174.         forward: function(){
  175.             history.go(1);
  176.         },
  177.         /**
  178.          * Retrieves the currently-active history token.
  179.          * @return {String} The token
  180.          */
  181.         getToken: function() {
  182.             return ready ? currentToken : getHash();
  183.         }
  184.     };
  185. })();
  186. Ext.apply(Ext.History, new Ext.util.Observable());