实施History.js HTML4后备 [英] Implementing History.js HTML4 Fallback

问题描述

jQuery插件HISTORY.js（ https://github.com/browserstate/History.js / ）提供HTML5历史记录推送实现功能，并且在不支持浏览器的情况下，应该能够实现HTML4哈希标签功能。文档/ README文件详细介绍了用法：

The jQuery plugin HISTORY.js (https://github.com/browserstate/History.js/) provides a HTML5 history push implementation feature and in case of an unsupporting browser, should be able to implement a HTML4 hashtag feature. The documentation/README file details the usage as so:

   var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

正如您所看到的，文档解释了HISTORY.js插件的用法但并未解释HTML4支持的用法。

As you can see, the documentation explains the usage of the HISTORY.js plugin to the point of HTML5 and does not explain the usage of the HTML4 support.

但是，在文档的下载与安装部分中，其内容如下：

However, under the "Download & Installation" section of the documentation, it reads:

5. Include History.js 
<script src="http://www.yourwebsite.com/history.js/scripts/compressed/history.js">/script>
<script src="http://www.yourwebsite.com/history.js/scripts/compressed/history.html4.js"></script>

这里的说明可能表明HTML4的hashtag支持是自动的，但使用页面上的说明表明它必须手动执行;我相信实际上是这种情况。

The instructions here may convey that the HTML4 hashtag support is automatic but the instructions on the usage page suggest that it must be manually implemented; which I believe is actually the case.

我无法找到关于实现HTML4 hashtag功能的更多文档。请帮我解决这个问题。

I cannot find any further documentation on implementing the HTML4 hashtag feature. Please help me figure this out.

推荐答案

好的，问题是您没有正确使用History.js （这也是我也遇到的问题）。基本上以正确的方式使用History.js，您必须执行以下操作：

Ok maybe the problem was that you weren't using History.js in the right way ( that's the problem i was having too ). Basically to use History.js in the correct way you must do something like:

// Register navigation click handlers where you will load Ajax content
$( window ).on( 'click', 'a.ai1ec-load-view', handle_click_on_link_to_load_view );
// Bind to the statechange event
$( window ).bind( 'statechange', handle_state_change );

// When the state changes, load the corresponding view
var handle_state_change = function( e ) {
    var state = History.getState();
    load_view( state.url, 'json' );
};

// When clicking on a link you want to load, trigger statechange by changing state
var handle_click_on_link_to_load_view = function( e ) {
    e.preventDefault();
    History.pushState( { target :this }, null, $( this ).attr( 'href' ) );
};

在执行此操作之前，我没有收听 statechange ，我只是在链接点击处理程序中使用了pushState（）。

Before doing this i wasn't listening to statechange and i was simply using pushState() in the link click handler.

如果你这样做，不需要编写后备代码，它也可以在html4浏览器（和html4浏览器的书签将按预期工作）

If you do it like this there is no need to code a fallback, it will work also in html4 browsers ( and bookmarks from html4 browsers will work as expected )

这篇关于实施History.js HTML4后备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！