Jquery IE9问题的历史状态和回退_Jquery_Pushstate

Jquery IE9问题的历史状态和回退

jquery

Jquery IE9问题的历史状态和回退,jquery,pushstate,Jquery,Pushstate,我使用history.pushstate加载内容，并对IE9和之前的版本有一个回退，但我遇到了一些问题，我无法通过谷歌搜索找到有效的解决方案。我读了很多关于这个主题的帖子，但大多数帖子似乎都缺少重要信息——我应该说我根本不是JavaScript/jQuery专家我知道可以使用Backbone.js、History.js、Path.js等路由器-这不是我想要的-我想完全理解如何在我自己的脚本中设置代码我发布了除样式之外的所有代码——这可能对其他试图通过pushstate+回退获得AJAX加载工

我使用

history.pushstate

加载内容，并对IE9和之前的版本有一个回退，但我遇到了一些问题，我无法通过谷歌搜索找到有效的解决方案。我读了很多关于这个主题的帖子，但大多数帖子似乎都缺少重要信息——我应该说我根本不是JavaScript/jQuery专家

我知道可以使用Backbone.js、History.js、Path.js等路由器-这不是我想要的-我想完全理解如何在我自己的脚本中设置代码

我发布了除样式之外的所有代码——这可能对其他试图通过pushstate+回退获得AJAX加载工作解决方案的人有所帮助

与history.pushstate（脚本中的..“if”）有关的问题：

我如何重写URL，使其成为书签和页面刷新的可能 回退方法的问题（..“else”在脚本中）：

按下后退/前进按钮时，IE9中的URL会发生更改，但内容不重新加载-如何使用现有的密码

我如何重写URL，使其能够添加书签和页面刷新吗

除此之外，我在处理放置在子文件夹（和子文件夹）中的页面时遇到问题-我在现有代码中的（“/”）放在哪里

我知道，尤其是URL重写可能没有一个简单的答案-我已经在WAMP上测试了一些.htaccess mod_rewrite，但我无法让它工作-我在这个过程中遗漏了一些东西

以下是我迄今为止的工作脚本：

$(document).ready(function(){

if (typeof(window.history.pushState) == 'function') {

// AJAX-LOADING
$('a').click(function() {
    var page = $(this).attr('href');

    history.pushState({ path: (page + ".html")}, '', page);     // ("/") - url for absolute links in subfolders where?
    $("#content").load(page + ".html");
    return false;
});

// BACKBUTTON
$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;
    if (state) {
        $("#content").load(state.path);
    }
});

//  FALLBACK IE9
} else {
$('a').click(function() {
    var page = $(this).attr('href');

    window.location.hash = page + ".html"; 
    $("#content").load(page + ".html");
    return false;
});

} // END of if.. and else.. 

}); // END DOC READY

这是index.html：

<body>
<div id="main">
    <h1>this is index.html</h1>

<ul>
    <li><a href="page1">Load page 1</a></li>
    <li><a href="page2">Load page 2</a></li>  
</ul>

<div id="content">
<p>Load here.....</p><br />
    </div>
</div>  <!--    end of main -->       
</body>


这是index.html




在此处加载….

page1.html是：

<h1> page 1 - this is </h1>

第1页-这是

page2.html是：

<h1> this is the 2. page </h1>

这是2。页

就我个人而言，我会退回到重新加载整个页面，而不是散列，但是如果必须使用散列，则需要添加功能，以便在散列更改时捕获。不过，有一个hashChange事件，并非所有IE版本都支持它。在那些没有的情况下，你将不得不使用一个丑陋的设置间隔。如果您查看history.js的源代码，您将看到这是如何实现的。我不太明白为什么你觉得你必须“重新发明轮子”。在这种情况下，history.js已经是尽可能简单的了，而且它在IE6上经过了彻底的测试。@KevinB-history.js在IE9上的url被弄乱了。。我从www.domain.com/abc.php获得url更改，将id添加到www.domain.com/abc.php？#abc.php？id=1。。。你曾经面对过吗？是的，我很确定history.js就是这样为不支持pushstate的浏览器实现它的。