Question

我使用history.pushstate来加载内容并为IE9和之前的版本提供后备，但我遇到的问题是我无法通过Google搜索找到有效的解决方案。我已经阅读了很多关于这个主题的帖子，但是大多数帖子似乎都缺少重要的信息 - 我应该说我根本不是JavaScript / jQuery专家。

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

我发布了除样式之外的所有代码 - 这可能对其他人试图通过pushstate + fallback来实现AJAX加载的工作解决方案有所帮助。

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

回退方法的问题（脚本中的“else”）：

按下后退/前进按钮时，IE9中的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>

page1.html是：

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

page2.html是：

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

IE9问题的历史推进和后备

0 个答案: