Javascript HTML5历史API演示_Javascript_Html_Html5 History

Javascript HTML5历史API演示

javascript html

Javascript HTML5历史API演示,javascript,html,html5-history,Javascript,Html,Html5 History,我一直在阅读有关HTML5历史API的文章，到目前为止，我还没有找到一个简单的演示程序来展示代码的机制这里是一个工作面板：4个按钮和4个div。当用户按下按钮时，它会显示相应的面板我想做的是： 1) rewrite the URL so that when the user is on panel 4 the url ends with /Panel4 2) make the back button and forward button work with the history API.

我一直在阅读有关HTML5历史API的文章，到目前为止，我还没有找到一个简单的演示程序来展示代码的机制

这里是一个工作面板：4个按钮和4个div。当用户按下按钮时，它会显示相应的面板

我想做的是：

1) rewrite the URL so that when the user is on panel 4 the url ends with /Panel4
2) make the back button and forward button work with the history API.

我知道有history.js插件，但我想了解API是如何以最简单的形式工作的

希望jsfiddle能够帮助其他来到本页面寻找代码演示的人

谢谢。

好的，我给你举了个例子。从HTML代码（index.HTML）开始：

和一个.htaccess用于直接请求：

RewriteEngine On

RewriteRule ^home$ ./index.html
RewriteRule ^about$ ./index.html
RewriteRule ^blog$ ./index.html
RewriteRule ^photos$ ./index.htm

每次单击锚点时，都会将一个新的历史实例推送到历史堆栈上，并保存一个对象（称为state）：本地url会更改，但加载会被“event.preventDefault（）”方法停止。此外，还更新了一些信息（如URL、说明和操作）

然后，使用“后退”和“前进”按钮，您可以浏览历史并使用“history.state”（或event.state或window.event.state，取决于浏览器）检索当前状态

最后，如果您直接在地址栏中键入整个url，它的工作原理与上面的.htaccess；）相同

我希望这个例子对您有所帮助；）

再见

威尔克

附注：详情如下：

好的，我创建了我认为最简单的历史API演示形式。

它不能在JSFIDLE中工作，因为它需要在自己的窗口中运行。但是，如果您复制粘贴记事本中的代码，在指定的位置添加对jquery的引用，并将其作为html文件保存在桌面上，那么它将起作用。当然，它在IE中不起作用，但我们都知道这一点。我已经加入了两个版本：一个没有URL重写组件的版本（它可以在桌面上运行），另外我还注释了可以操作URL的版本。对于后者，您需要从远程或本地服务器运行它

我一直在努力让它在所有浏览器上运行，因为Chrome、Safari和Firefox的工作方式不同！代码如下：

    <html>
    <head>
    <style type="text/css">

    .Panel{
       width:200px;
       height:100px;
       background:red;
       display:none;
       color:white;
       padding:20px 20px;}

    .ChangeButton{
       margin:10px 10px;
       float:left;}   

    </style>

   // add reference to jquery.js file here 
   // <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>        

    <script type="text/javascript">

    var TheURL; // if you don't need URL rewrite, then we're always going to 
                // show the same URL. Remove this line if you want URL rewrite.

    var MyDivs = { // this object stores the name and the URL of each possible state
       ShowPanel1: {panelID:'Panel1', DisplayURL:'/panel1'},
       ShowPanel2: {panelID:'Panel2', DisplayURL:'/panel2'},
       ShowPanel3: {panelID:'Panel3', DisplayURL:'/panel3'},
       ShowPanel4: {panelID:'Panel4', DisplayURL:'/panel4'},
    };

    $(document).ready(function () {

    TheURL = document.URL; // You can remove this line if you're doing
                           // URL rewrite

    window.addEventListener('popstate', function (event) {

       //cross-browser nightmare here!!!!!
       var HistoryState = history.state;

       if (HistoryState === null || HistoryState === undefined) {
            HistoryState = event.state; }

       if (HistoryState === null || HistoryState === undefined) {
            HistoryState = window.event.state; }

       SwitchPanel(HistoryState);
    });

    $('.ChangeButton').click(function () {
           DoChange(parseInt($(this).attr('id').charAt(6), 10)); });

    DoChange(1);

    });

    function DoChange(ButtonID) {

       switch (ButtonID) {

       // here's the 2-version option: 
       // toggle the commented and uncommented history.pushState
       // lines to see the change to the URL in action
       case 1:
           SwitchPanel(MyDivs.ShowPanel1.panelID);
           history.pushState(MyDivs.ShowPanel1.panelID, "", TheURL);
           // history.pushState(MyDivs.ShowPanel1.panelID, "", MyDivs.ShowPanel1.DisplayURL);
           break;
       case 2:
           SwitchPanel(MyDivs.ShowPanel2.panelID);
           history.pushState(MyDivs.ShowPanel2.panelID, "", TheURL);
           // history.pushState(MyDivs.ShowPanel2.panelID, "", MyDivs.ShowPanel2.DisplayURL);
           break;
       case 3:
           SwitchPanel(MyDivs.ShowPanel3.panelID);
           history.pushState(MyDivs.ShowPanel3.panelID, "", TheURL);
           // history.pushState(MyDivs.ShowPanel3.panelID, "", MyDivs.ShowPanel3.DisplayURL);
           break;
       case 4:
           SwitchPanel(MyDivs.ShowPanel4.panelID);
           history.pushState(MyDivs.ShowPanel4.panelID, "", TheURL);
           // history.pushState(MyDivs.ShowPanel4.panelID, "", MyDivs.ShowPanel4.DisplayURL);
           break;
       }
    }

    function SwitchPanel(PanelID) {

       if (PanelID === null) {return false;}

       $('.Panel').hide();
       $('#' + PanelID).fadeIn('medium');
    }

    </script>
    </head>

    <body>

    <input type="button" id="Button1" class="ChangeButton" value="panel 1" />
    <input type="button" id="Button2" class="ChangeButton" value="panel 2" />
    <input type="button" id="Button3" class="ChangeButton" value="panel 3" />
    <input type="button" id="Button4" class="ChangeButton" value="panel 4" />

    <div id="PanelContainer" style="clear:both;">

       <div class="Panel" id="Panel1">panel 1</div>
       <div class="Panel" id="Panel2">panel 2</div>
       <div class="Panel" id="Panel3">panel 3</div>
       <div class="Panel" id="Panel4">panel 4</div>

    </div>

    </body>
    </html>


.小组{
宽度：200px；
高度：100px；
背景：红色；
显示：无；
颜色：白色；
填充：20px 20px；}
.ChangeButton{
利润率：10px 10px；
浮动：左；}
//在此处添加对jquery.js文件的引用
//         
var TheURL；//如果您不需要重写URL，那么我们将始终
//显示相同的URL。如果要重写URL，请删除此行。
var MyDivs={//此对象存储每个可能状态的名称和URL
ShowPanel1:{panelID:'Panel1'，DisplayURL:'/Panel1'}，
ShowPanel2:{panelID:'Panel2'，DisplayURL:'/Panel2'}，
ShowPanel3:{panelID:'Panel3'，DisplayURL:'/Panel3'}，
ShowPanel4:{panelID:'Panel4'，DisplayURL:'/Panel4'}，
};
$（文档）.ready（函数（）{
TheURL=document.URL；//如果正在执行此操作，则可以删除此行
//URL重写
window.addEventListener（'popstate'，函数（事件）{
//这里是跨浏览器的噩梦！！！！！
var HistoryState=history.state；
if（HistoryState==null | | HistoryState==undefined）{
HistoryState=event.state；}
if（HistoryState==null | | HistoryState==undefined）{
HistoryState=window.event.state；}
开关面板（历史状态）；
});
$（'.ChangeButton'）。单击（函数（）{
DoChange（parseInt（$（this）.attr（'id'）.charAt（6,10））；}）；
多坎奇（1）；
});
功能更改（按钮）{
开关（按钮NID）{
//以下是两个版本的选项：
//切换已注释和未注释的history.pushState
//行以查看对URL的更改
案例1：
开关面板（MyDivs.ShowPanel1.panelID）；
history.pushState（MyDivs.ShowPanel1.panelID，“，URL）；
//history.pushState（MyDivs.ShowPanel1.panelID，“，MyDivs.ShowPanel1.DisplayURL）；
打破
案例2：
开关面板（MyDivs.ShowPanel2.panelID）；
history.pushState（MyDivs.ShowPanel2.panelID，“，URL）；
//history.pushState（MyDivs.ShowPanel2.panelID，“，MyDivs.ShowPanel2.DisplayURL）；
打破
案例3：
开关面板（MyDivs.ShowPanel3.panelID）；
history.pushState（MyDivs.ShowPanel3.panelID，“，URL）；
//history.pushState（MyDivs.ShowPanel3.panelID，“，MyDivs.ShowPanel3.DisplayURL）；
打破
案例4：
开关面板（MyDivs.ShowPanel4.panelID）；
history.pushState（MyDivs.ShowPanel4.panelID，“，URL）；
//history.pushState（MyDivs.ShowPanel4.panelID，”，MyDivs.ShowPanel4.DisplayURL）；
打破
}
}
功能开关面板（面板ID）{
如果（PanelID==null）{return false；}
$（'.Panel'）.hide（）；
$（'#'+PanelID）.fadeIn（'medium'）；
}
小组1
小组2
小组3
小组4

如果对你有效，请投票

享受吧

这可以帮助您：这也是：我们已经有了一个标签来覆盖HTML5历史API，请不要再添加另一个。我认为JSFIDLE存在一些问题，因为当我单击锚定时，页面被加载，尽管它不应该。。。我建议您尝试使用本地主机，在web服务器根目录中创建index.html和sof.js文件；）这对我来说很有用：我想知道如何使用popstate事件在任何浏览器上运行；）但是，在您的示例中，没有您要求的url导航。@威尔克：好的，我添加了url更新功能；我决定不对我的应用程序使用URL重写。当然，它在IE中不起作用，但我不是在寻找它，只是一些简单的东西

RewriteEngine On

RewriteRule ^home$ ./index.html
RewriteRule ^about$ ./index.html
RewriteRule ^blog$ ./index.html
RewriteRule ^photos$ ./index.htm

    <html>
    <head>
    <style type="text/css">

    .Panel{
       width:200px;
       height:100px;
       background:red;
       display:none;
       color:white;
       padding:20px 20px;}

    .ChangeButton{
       margin:10px 10px;
       float:left;}   

    </style>

   // add reference to jquery.js file here 
   // <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>        

    <script type="text/javascript">

    var TheURL; // if you don't need URL rewrite, then we're always going to 
                // show the same URL. Remove this line if you want URL rewrite.

    var MyDivs = { // this object stores the name and the URL of each possible state
       ShowPanel1: {panelID:'Panel1', DisplayURL:'/panel1'},
       ShowPanel2: {panelID:'Panel2', DisplayURL:'/panel2'},
       ShowPanel3: {panelID:'Panel3', DisplayURL:'/panel3'},
       ShowPanel4: {panelID:'Panel4', DisplayURL:'/panel4'},
    };

    $(document).ready(function () {

    TheURL = document.URL; // You can remove this line if you're doing
                           // URL rewrite

    window.addEventListener('popstate', function (event) {

       //cross-browser nightmare here!!!!!
       var HistoryState = history.state;

       if (HistoryState === null || HistoryState === undefined) {
            HistoryState = event.state; }

       if (HistoryState === null || HistoryState === undefined) {
            HistoryState = window.event.state; }

       SwitchPanel(HistoryState);
    });

    $('.ChangeButton').click(function () {
           DoChange(parseInt($(this).attr('id').charAt(6), 10)); });

    DoChange(1);

    });

    function DoChange(ButtonID) {

       switch (ButtonID) {

       // here's the 2-version option: 
       // toggle the commented and uncommented history.pushState
       // lines to see the change to the URL in action
       case 1:
           SwitchPanel(MyDivs.ShowPanel1.panelID);
           history.pushState(MyDivs.ShowPanel1.panelID, "", TheURL);
           // history.pushState(MyDivs.ShowPanel1.panelID, "", MyDivs.ShowPanel1.DisplayURL);
           break;
       case 2:
           SwitchPanel(MyDivs.ShowPanel2.panelID);
           history.pushState(MyDivs.ShowPanel2.panelID, "", TheURL);
           // history.pushState(MyDivs.ShowPanel2.panelID, "", MyDivs.ShowPanel2.DisplayURL);
           break;
       case 3:
           SwitchPanel(MyDivs.ShowPanel3.panelID);
           history.pushState(MyDivs.ShowPanel3.panelID, "", TheURL);
           // history.pushState(MyDivs.ShowPanel3.panelID, "", MyDivs.ShowPanel3.DisplayURL);
           break;
       case 4:
           SwitchPanel(MyDivs.ShowPanel4.panelID);
           history.pushState(MyDivs.ShowPanel4.panelID, "", TheURL);
           // history.pushState(MyDivs.ShowPanel4.panelID, "", MyDivs.ShowPanel4.DisplayURL);
           break;
       }
    }

    function SwitchPanel(PanelID) {

       if (PanelID === null) {return false;}

       $('.Panel').hide();
       $('#' + PanelID).fadeIn('medium');
    }

    </script>
    </head>

    <body>

    <input type="button" id="Button1" class="ChangeButton" value="panel 1" />
    <input type="button" id="Button2" class="ChangeButton" value="panel 2" />
    <input type="button" id="Button3" class="ChangeButton" value="panel 3" />
    <input type="button" id="Button4" class="ChangeButton" value="panel 4" />

    <div id="PanelContainer" style="clear:both;">

       <div class="Panel" id="Panel1">panel 1</div>
       <div class="Panel" id="Panel2">panel 2</div>
       <div class="Panel" id="Panel3">panel 3</div>
       <div class="Panel" id="Panel4">panel 4</div>

    </div>

    </body>
    </html>