实现History.js HTML4后备

Hir*_*ame 6 html jquery html5 jquery-plugins history.js

jQuery插件HISTORY.js(https://github.com/browserstate/History.js/)提供HTML5历史推送实现功能,如果浏览器不支持,应该能够实现HTML4主题标签功能.documentation/README文件详细说明了用法:

   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;
    }
Run Code Online (Sandbox Code Playgroud)

正如您所看到的,该文档将HISTORY.js插件的用法解释为HTML5,并未解释HTML4支持的用法.

但是,在文档的"下载和安装"部分中,它显示为:

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>
Run Code Online (Sandbox Code Playgroud)

这里的说明可能表明HTML4#标签支持是自动的,但使用页面上的说明表明必须手动实现; 我相信其实是这样的.

我找不到任何有关实现HTML4主题标签功能的文档.请帮我解决这个问题.

Nic*_*tti 1

好吧,也许问题是你没有以正确的方式使用 History.js (这也是我遇到的问题)。基本上,要以正确的方式使用 History.js,您必须执行以下操作:

// 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' ) );
};
Run Code Online (Sandbox Code Playgroud)

在执行此操作之前,我没有听statechange,只是在链接单击处理程序中使用了 PushState() 。

如果您这样做,则无需编写后备代码,它也可以在 html4 浏览器中工作(并且来自 html4 浏览器的书签将按预期工作)