首页vns威尼斯城官网登入 › 我们将了解HTML vns威尼斯城官网登入5中History,通过刷新来修改URL的方法

我们将了解HTML vns威尼斯城官网登入5中History,通过刷新来修改URL的方法

HTML5学习笔记之History API,html5学习笔记

这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,

一,开篇分析

好了,废话不多说,直接进入今天的主题,今天主要讲的是“History
API”及在单页应用中的作用,并且会引入一个实际的例子做为讲解的原型范例,先来看看“History
API”:

  为了提高Web页面的响应速度,越来越多的开发者开始采用单页面结构(single-page
application)的解决方案。所谓的单页面结构就是指多个页面间切换时,不刷新当前整个页面,更新页面展示数据,并且相应地改变地址栏中的url,以使用户可以分享这个url。

  如果你使用chrome或者firefox等浏览器访问"github.com、plus.google.com"等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,

同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。是什么有这么强大的功能呢?恩,这就会说到今天的主角,HTML5里引用了新的API:

“history.pushState”和“history.replaceState”,就是通过这个接口做到无刷新改变页面URL的。先来看看"history"接口的详细方法:

代码如下:

interface History {
readonly attribute long length;
readonly attribute any state;
void go(optional long delta);
void back();
void forward();
void pushState(any data, DOMString title, optional DOMString? url =
null);
void replaceState(any data, DOMString title, optional DOMString? url =
null);
};

(二),重点API说明

vns威尼斯城官网登入 1

  在这里说明一点:"window.history.replaceState"和"window.history.pushState"类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。

(三),引入实例

  今天说说单页应用中我们通常会这样做,有一个菜单列表,点击相关菜单项然后动态加载相关模块,所有方式都是基于异步请求的,美中不足是,我们会发现地址栏不会有任何变化,以及浏览器中的前进和后退操作也不会有任何响应,这对用户不是很友好,所以为了解决这个问题“History”就有用武之地了,那么如何做到的那?不急先看一下例子中的效果图展示,然后一步步分析,如下所示:

vns威尼斯城官网登入 2

  以下是监测数据,相同的url再次刷新不会重复请求。

vns威尼斯城官网登入 3

  我们梳理一下流程:

    页面首次载入,虽然我们访问的URL是"

"

"shanghai.data"的数据工作,鼠标点击左边的任意一个菜单项,右侧内容是Ajax载入,并且页面的URL随之发生改变,例如,点击北京。

此时,我们点击地址栏的后退按钮,又回到了上海,并且显示内容。原理很简单,就是通过监听”window.onpopstate“,达到了自由切换的作用。

好了!其实很简单大家也尝试自己实践一下,以下是完整代码:

  (1),html部分代码  

代码如下:

<body>
<center>
<Strong>bbSPA测试页面</strong>
</center>
<hr>
<ul
id="list"
style="float:left;
list-style:none;"
>
<li><a href="#beijing">北京</a></li>
<li><a href="#shanghai">上海</a></li>
<li><a href="#shenzhen">深圳</a></li>
<li><a href="#guangzhou">广州</a></li>
<li><a href="#tianjin">天津</a></li>
</ul>
<div
id="content-main"
style="margin-left:50px;
float:left;
width:220px;
border:1px solid #ccc;
height:120px;
color:#ff3300;"
>
</div>
</body>

(2),Js部分代码

代码如下:

$(function(){
_init() ;
}) ;
var _history = [] ; // 记录hash的活动数据容器
function _init(){
var root = $("#list") ;
var defaultHash = root.find("li a").eq(1).attr("href") ;
var currentHash = window.location.hash ;
_addToHistory(defaultHash,true) ;
if(currentHash && currentHash != defaultHash){
_showContent((currentHash.split("#")[1])) ;
}
else{
_showContent((defaultHash.split("#")[1])) ;
}
$("#list").on("click","a",function(e){
var action = ($(this).attr("href").split("#")[1]) ;
_showContent(action) ;
e.preventDefault() ;
}) ;
window.addEventListener("popstate",function(e){
if(e.state && e.state.hash){
var hash = e.state.hash ;
if(_history[1] && hash ===
_history[1].hash){//存在历史记录,证明是后退事件
_showContent(hash.split("#")[1].toLowerCase()) ;
}else{ // 其它认为是非法后退或者前进
return ;
}
}
else{
return ;
}
},false) ;
} ;
function _showContent(action){
var samePage = _history[0]["hash"] == "#" + action ;
if(samePage){ // 同页面,则不重新加载
return ;
}
_loadContent(action + ".data").done(function(data){
_renderContent(data["content"]) ;
_addToHistory("#" + action,samePage) ;
}).fail(function(){
throw new Error("load content error !") ;
}) ;
} ;
function _loadContent(url){
return $.ajax({
url : url ,
dataType : "json"
}) ;
} ;
function _renderContent(text){
$("#content-main").text(text) ;
} ;
function _addToHistory(hash,noState){
var obj = {
hash : hash
} ;
if(noState){
_history.shift(obj) ;
window.history.replaceState(obj,"",hash) ;
}
else{
window.history.pushState(obj,"",hash) ;
}
_history.unshift(obj) ;
} ;

 

(四),最后总结

  (1),理解History
Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。

  (2),两个核心Api的不同之处在哪。

  (3),测试本例子的注意事项如下。

  测试需要搭建一个web服务器,以

代码如下:

Uncaught SecurityError: A history state object with URL
'file:///C:/xxx/xxx/xxx/xxx.html' cannot be created in a document with
origin 'null'.

  因为你要pushState的url与当前页面的url必须是同源的,而file://形式打开的页面是没有origin的,所以会报这个错误。

以上就是本文的全部内容了,希望大家能够喜欢。


管是上面讲到的《JavaScript高级程序设计》(第二版)中提到,BOM中的location.path/query……
(window.location)在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL(location的意思就是位
置。。)

HTML 5 History API的”前生今世”

2014/10/23 · HTML5 ·
HTML5

原文出处:
tuts+   译文出处:淡忘浅思的博客(@dwido)   

History是有趣的,不是吗?在之前的HTML版本中,我们对浏览历史记录的操作非常有限。我们可以来回使用可以使用的方法,但这就是一切我们能做的了。

但是,利用HTML 5的History
API,我们可以更好的控制浏览器的历史记录了。例如:我们可以添加一条记录到历史记录的列表中,或者在没有刷新时,可以更新地址栏的URL。

深入探究HTML5的History API,html5history

这篇文章主要介绍了深入探究HTML5的History
API,重点讲述了HTML5中新的方法history.pushState()和history.replaceState(),需要的朋友可以参考下

History是有趣的,不是吗?在之前的HTML版本中,我们对浏览历史记录的操作非常有限。我们可以来回使用可以使用的方法,但这就是一切我们能做的了。

  但是,利用HTML 5的History
API,我们可以更好的控制浏览器的历史记录了。例如:我们可以添加一条记录到历史记录的列表中,或者在没有刷新时,可以更新地址栏的URL。
  为什么介绍History API ?

  在这篇文章中,我们将了解HTML 5中History
API的来源。在此之前,我们经常使用散列值来改变页面内容,特别是那些对页面特别重要的内容。因为没有刷新,所以对于单页面应用,改变其URL是不可能的。此外,当你改变URL的散列值值,它对浏览器的历史记录没有任何影响。

  然后,现在对于HTML 5的History
API来说,这些都是可以轻易实现的,但是由于单页面应用没必要使用散列值,它可能需要额外的开发脚本。它也允许我们用一种对SEO友好的方式建立新应用。此外,它能减少带宽,但是该怎么证明呢?

  在文章中,我将用History API开发一个单页应用来证明上述的问题。

  这也意味着我必须先在首页加载必要的资源。现在开始,页面仅仅加载需要的内容。换句话说,应用并不是一开始就加载了全部的内容,在请求第二个应用内容时,才会被加载。

  注意,您需要执行一些服务器端编码只提供部分资源,而不是完整的页面内容。
  浏览器支持

  在写这篇文章的时候,各主流浏览器对History
API的支持是非常不错的,可以点击此处查看其支持情况,这个链接会告诉你支持的浏览器,并使用之前,总有良好的实践来检测支持的特定功能。

  为了用变成方式确定浏览器是否支持这个API,可以用下面的一行代码检验:
 

XML/HTML Code复制内容到剪贴板

  1. return !!(window.history && history.pushState);  

  此外,我建议参考一下这篇文章:Detect Support for Various HTML5
Features.(ps:后续会翻译)

  如果你是用的现代浏览器,可以用下面的代码:
 

XML/HTML Code复制内容到剪贴板

  1. if (Modernizr.history) {   
  2.     // History API Supported   
  3. }  

  如果你的浏览器不支持History API,可以使用history.js代替。
  使用History

  HTML 5提供了两个新方法:

  1、history.pushState();                2、history.replaceState();

  两种方法都允许我们添加和更新历史记录,它们的工作原理相同并且可以添加数量相同的参数。除了方法之外,还有popstate事件。在后文中将介绍怎么使用和什么时候使用popstate事件。

  pushState()和replaceState()参数一样,参数说明如下:

  1、state:存储JSON字符串,可以用在popstate事件中。

  2、title:现在大多数浏览器不支持或者忽略这个参数,最好用null代替

  3、url:任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是否已经存在地址列表中。更重要的是,它不会重新加载页面。

  两个方法的主要区别就是:pushState()是在history栈中添加一个新的条目,replaceState()是替换当前的记录值。如果你还对这个有迷惑,就用一些示例来证明这个区别。

  假设我们有两个栈块,一个标记为1,另一个标记为2,你有第三个栈块,标记为3。当执行pushState()时,栈块3将被添加到已经存在的栈中,因此,栈就有3个块栈了。

  同样的假设情景下,当执行replaceState()时,将在块2的堆栈和放置块3。所以history的记录条数不变,也就是说,pushState()会让history的数量加1.

  比较结果如下图:
vns威尼斯城官网登入 4

到此,为了控制浏览器的历史记录,我们忽略了pushState()和replaceState()的事件。但是假设浏览器统计了许多的不良记录,用户可能会被重定向到这些页面,或许也不会。在这种情况下,当用户使用浏览器的前进和后退导航按钮时就会产生意外的问题。

  尽管当我们使用pushState()和replaceState()进行处理时,期待popstate事件被触发。但实际上,情况并不是这样。相反,当你浏览会话历史记录时,不管你是点击前进或者后退按钮,还是使用history.go和history.back方法,popstate都会被触发。

  In WebKit browsers, a popstate event would be triggered after
document’s onload event, but Firefox and IE do not have this
behavior.(在WebKit浏览器中,popstate事件在document的onload事件后触发,Firefox和IE没有这种行为)。
  Demo示例

  HTML:
 

XML/HTML Code复制内容到剪贴板

  1. <div class="container">  
  2.     <div class="row">  
  3.         <ul class="nav navbar-nav">  
  4.             <li><a href="home.html" class="historyAPI">Home</a></li>  
  5.             <li><a href="about.html" class="historyAPI">About</a></li>  
  6.             <li><a href="contact.html" class="historyAPI">Contact</a></li>  
  7.         </ul>  
  8.     </div>  
  9.     <div class="row">  
  10.         <div class="col-md-6">  
  11.             <div class="well">  
  12.                 Click on Links above to see history API usage using <code>pushState</code> method.   
  13.             </div>  
  14.         </div>  
  15.         <div class="row">   
      
  16.             <div class="jumbotron" id="contentHolder">  
  17.                 <h1>Home!</h1>  
  18.                 <p>Lorem Ipsum is simply dummy text of the <span style="width: auto; height: auto; float: none;" id="5_nwp"><a style="text-decoration: none;" mpid="5" target="_blank" href="" id="5_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">printing</span></a></span> and typesetting industry.</p>  
  19.             </div>  
  20.         </div>  
  21.     </div>  
  22. </div>  

  JavaScript:

XML/HTML Code复制内容到剪贴板

  1. <script type="text/<span style="width: auto; height: auto; float: none;" id="1_nwp"><a style="text-decoration: none;" mpid="1" target="_blank" href="" id="1_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">javascript</span></a></span>">  
  2.     jQuery('document').ready(function(){   
  3.              
  4.         jQuery('.historyAPI').on('click', function(e){   
  5.             e.preventDefault();   
  6.             var href = $(this).attr('href');   
  7.                  
  8.             // Getting Content   
  9.             getContent(href, true);   
  10.                  
  11.             jQuery('.historyAPI').removeClass('active');   
  12.             $(this).<span style="width: auto; height: auto; float: none;" id="2_nwp"><a style="text-decoration: none;" mpid="2" target="_blank" href="" id="2_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">add</span></a></span>Class('active');   
  13.         });   
  14.              
  15.     });   
  16.          
  17.     // Adding popstate event listener to handle browser back button 
      
  18.     window.addEventListener("popstate", function(e) {   
  19.              
  20.         // Get State value using e.state   
  21.         getContent(location.pathname, false);   
  22.     });   
  23.          
  24.     function getContent(url, addEntry) {   
  25.         $.get(url)   
  26.         .done(function( <span style="width: auto; height: auto; float: none;" id="3_nwp"><a style="text-decoration: none;" mpid="3" target="_blank" href="" id="3_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">data</span></a></span> ) {   
  27.                  
  28.             // Updating Content on Page   
  29.             $('#contentHolder').html(data);   
  30.                  
  31.             if(<span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="text-decoration: none;" mpid="4" target="_blank" href="" id="4_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">add</span></a></span>Entry == true) {   
  32.                 // Add History Entry using pushState   
  33.                 history.pushState(null, null, url);   
  34.             }   
  35.                  
  36.         });   
  37.     }   
  38. </script>  

  总结(ps:喜欢这两个字~^_^~)

  HTML 5中的History API
对Web应用有着很大的影响。为了更容易的创建有效率的、对SEO友好的单页面应用,它移除了对散列值的依赖。

API,html5history
这篇文章主要介绍了深入探究HTML5的History
API,重点讲述了HTML5中新的方法history.pushState()和history.replaceSt...

 在HTML5中,

而在JavaScript
MVC开始流行之后,通过刷新来修改URL的方法,不禁让人感到烦躁。然而HTML5中就制定了一个这样的API,可以通过方法的方式来修改URL,而又不会使浏览器刷新,就是History
API。

为什么介绍History API ?

在这篇文章中,我们将了解HTML 5中History
API的来源。在此之前,我们经常使用散列值来改变页面内容,特别是那些对页面特别重要的内容。因为没有刷新,所以对于单页面应用,改变其URL是不可能的。此外,当你改变URL的散列值值,它对浏览器的历史记录没有任何影响。

然后,现在对于HTML 5的History
API来说,这些都是可以轻易实现的,但是由于单页面应用没必要使用散列值,它可能需要额外的开发脚本。它也允许我们用一种对SEO友好的方式建立新应用。此外,它能减少带宽,但是该怎么证明呢?

在文章中,我将用History API开发一个单页应用来证明上述的问题。

这也意味着我必须先在首页加载必要的资源。现在开始,页面仅仅加载需要的内容。换句话说,应用并不是一开始就加载了全部的内容,在请求第二个应用内容时,才会被加载。

注意,您需要执行一些服务器端编码只提供部分资源,而不是完整的页面内容。

 

熟悉JavaScript开发的同学,对History肯定不会陌生,其中最经典的方法就是go,通过第一个类型为整数的传输参数,可以使浏览器到达当前页面之前或之后,曾经浏览过的页面。当然,这个也是要刷新来实现的。

浏览器支持

在写这篇文章的时候,各主流浏览器对History
API的支持是非常不错的,可以点击此处查看其支持情况,这个链接会告诉你支持的浏览器,并使用之前,总有良好的实践来检测支持的特定功能。

为了用变成方式确定浏览器是否支持这个API,可以用下面的一行代码检验:

XHTML

return !!(window.history && history.pushState);

1
return !!(window.history && history.pushState);

此外,我建议参考一下这篇文章:Detect Support for Various HTML5
Features.(ps:后续会翻译)

如果你是用的现代浏览器,可以用下面的代码:

XHTML

if (Modernizr.history) { // History API Supported }

1
2
3
if (Modernizr.history) {
    // History API Supported
}

如果你的浏览器不支持History
API,可以使用history.js代替。

  1. 新增了通过JS在浏览器历史记录中添加项目的功能。

现在History
API新增了两个方法,分别是pushState和replaceState,其实用法都一样,看Mozilla的文档也没看到它们有多大不同,哈哈。

使用History

HTML 5提供了两个新方法:

1、history.pushState();               
2、history.replaceState();

两种方法都允许我们添加和更新历史记录,它们的工作原理相同并且可以添加数量相同的参数。除了方法之外,还有popstate事件。在后文中将介绍怎么使用和什么时候使用popstate事件。

pushState()和replaceState()参数一样,参数说明如下:

1、state:存储JSON字符串,可以用在popstate事件中。

2、title:现在大多数浏览器不支持或者忽略这个参数,最好用null代替

3、url:任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是否已经存在地址列表中。更重要的是,它不会重新加载页面。

两个方法的主要区别就是:pushState()是在history栈中添加一个新的条目,replaceState()是替换当前的记录值。如果你还对这个有迷惑,就用一些示例来证明这个区别。

假设我们有两个栈块,一个标记为1,另一个标记为2,你有第三个栈块,标记为3。当执行pushState()时,栈块3将被添加到已经存在的栈中,因此,栈就有3个块栈了。

同样的假设情景下,当执行replaceState()时,将在块2的堆栈和放置块3。所以history的记录条数不变,也就是说,pushState()会让history的数量加1.

比较结果如下图:

vns威尼斯城官网登入 5

 

到此,为了控制浏览器的历史记录,我们忽略了pushState()和replaceState()的事件。但是假设浏览器统计了许多的不良记录,用户可能会被重定向到这些页面,或许也不会。在这种情况下,当用户使用浏览器的前进和后退导航按钮时就会产生意外的问题。

尽管当我们使用pushState()和replaceState()进行处理时,期待popstate事件被触发。但实际上,情况并不是这样。相反,当你浏览会话历史记录时,不管你是点击前进或者后退按钮,还是使用history.go和history.back方法,popstate都会被触发。

In WebKit browsers, a popstate event would be triggered after
document’s onload event, but Firefox and IE do not have this
behavior.(在WebKit浏览器中,popstate事件在document的onload事件后触发,Firefox和IE没有这种行为)。

 

用法如下:

Demo示例

HTML:

XHTML

<div class="container"> <div class="row"> <ul class="nav
navbar-nav"> <li><a href="home.html"
class="historyAPI">Home</a></li> <li><a
href="about.html" class="historyAPI">About</a></li>
<li><a href="contact.html"
class="historyAPI">Contact</a></li> </ul>
</div> <div class="row"> <div class="col-md-6">
<div class="well"> Click on Links above to see history API usage
using <code>pushState</code> method. </div>
</div> <div class="row"> <div class="jumbotron"
id="contentHolder"> <h1>Home!</h1> <p>Lorem Ipsum
is simply dummy text of the printing and typesetting industry.</p>
</div> </div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
    <div class="row">
        <ul class="nav navbar-nav">
            <li><a href="home.html" class="historyAPI">Home</a></li>
            <li><a href="about.html" class="historyAPI">About</a></li>
            <li><a href="contact.html" class="historyAPI">Contact</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="well">
                Click on Links above to see history API usage using <code>pushState</code> method.
            </div>
        </div>
        <div class="row">  
            <div class="jumbotron" id="contentHolder">
                <h1>Home!</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </div>
    </div>
</div>

JavaScript:

JavaScript

<script type="text/javascript">
jQuery('document').ready(function(){ jQuery('.historyAPI').on('click',
function(e){ e.preventDefault(); var href = $(this).attr('href'); //
Getting Content getContent(href, true);
jQuery('.historyAPI').removeClass('active'); $(this).addClass('active');
}); }); // Adding popstate event listener to handle browser back button
window.addEventListener("popstate", function(e) { // Get State value
using e.state getContent(location.pathname, false); }); function
getContent(url, addEntry) { $.get(url) .done(function( data ) { //
Updating Content on Page $('#contentHolder').html(data); if(addEntry ==
true) { // Add History Entry using pushState history.pushState(null,
null, url); } }); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type="text/javascript">
    jQuery('document').ready(function(){
 
        jQuery('.historyAPI').on('click', function(e){
            e.preventDefault();
            var href = $(this).attr('href');
 
            // Getting Content
            getContent(href, true);
 
            jQuery('.historyAPI').removeClass('active');
            $(this).addClass('active');
        });
 
    });
 
    // Adding popstate event listener to handle browser back button
    window.addEventListener("popstate", function(e) {
 
        // Get State value using e.state
        getContent(location.pathname, false);
    });
 
    function getContent(url, addEntry) {
        $.get(url)
        .done(function( data ) {
 
            // Updating Content on Page
            $('#contentHolder').html(data);
 
            if(addEntry == true) {
                // Add History Entry using pushState
                history.pushState(null, null, url);
            }
 
        });
    }
</script>

Demo 1:HTML 5 History API – pushState

历史条目在浏览器中被计算,并且可以很容易的使用浏览器的前进和后退按钮。View
Demo 
(ps:你在点击demo1的选项卡时,其记录会被添加到浏览器的历史记录,当点击后退/前进按钮时,可以回到/跳到你之前点击的选项卡对应的页面)

Demo 2:HTML 5 History API – replaceState

历史条目在浏览器中被更新,并且不能使用浏览器的前进和后退按钮进行浏览。View
Demo 
(ps:你在点击demo1的选项卡时,其记录会被替换当前浏览器的历史记录,当点击后退/前进按钮时,不可以回到/跳到你之前点击的选项卡对应的页面,而是返回/跳到你进入demo2的上一个页面)

      2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL。

var state = {
//这里可以是你想给浏览器的一个State对象,为后面的StateEvent做准备。

总结(ps:喜欢这两个字~^_^~)

HTML 5中的History API
对Web应用有着很大的影响。为了更容易的创建有效率的、对SEO友好的单页面应用,它移除了对散列值的依赖。

赞 1 收藏
评论

vns威尼斯城官网登入 6

 

title : "HTML 5 History API simple demo",

      3. 添加了当用户单击浏览器的后退按钮时触发的事件。

 url : "yourpage"

 

};

 通过以上三点,可以实现在不刷新页面的前提下动态改变浏览器地址栏中的URL,动态显示页面内容。

 history.pushState(state, "HTML 5 History API simple demo", "yourpage");

 

还算简单吧,那么replaceState也是同样的用法:

 比如:
当页面A和页面B内容不一样的时候,在HTML5之前,如果从页面A切换到页面B时,需要在浏览器下从页面A切换到页面B,或者说,如果需要有后退按钮功能的话,可以在URL地址加#XXXX
可以实现后退功能。那么现在在HTML5中,可以通过History
API实现如下处理即可:

var state = {
//这里可以是你想给浏览器的一个State对象,为后面的StateEvent做准备。

 

 title : "HTML 5 History API simple demo",

  1. 在A页面 通过发AJAX请求 请求页面中的B数据。

url : "yourpage"};

 

history.replaceState(state, "HTML 5 History API simple
demo", "yourpage");

  2. 在页面A中通过JS装载相应的信息到相应的位置来。

State Event

 

既然有无刷新改变URL的方法,当然也要有响应这个改变的时间啦。

  3. 通过History
API在不刷新页面的情况下在浏览器的地址栏中从页面A的URL地址切换到页面B的URL地址。
 

嗯,没错。就有一个popstate事件,而传入的handler函数有一个参数,就是之前在pushState的第一个参数,一个State
obj。开发者可以通过这个State obj来识别行为。详细代码如下:

 

var state = {
//这里可以是你想给浏览器的一个State对象,为后面的StateEvent做准备。

  HTML4中的History API

title : "HTML 5 History API simple demo",

 

url : "yourpage"

属性

};

 

history.pushState(state, "HTML 5 History API simple demo", "yourpage");

length 历史的项数。javascript
所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。

window.onpopstate = function (e) { document.title = e.state.title;}

方法

当然还可以这样:

 

var state = {
//这里可以是你想给浏览器的一个State对象,为后面的StateEvent做准备。

back() 后退,跟按下“后退”键是等效的。

action : "page",

forward() 前进,跟按下“前进”键是等效的。

 title : "HTML 5 History API simple demo",

go() 用法:history.go(x);在历史的范围内去到指定的一个地址。如果 x <
0,则后退 x 个地址,如果 x > 0,则前进 x 个地址,如果 x ==
0,则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。

url : "yourpage"

HTML5中的History API

};

  1. history.pushState(data, title [,
url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会忽略此参数;url为页面地址,可选,缺省为当前页地址。

history.pushState(state, "HTML 5 History API simple demo", "yourpage");

 

window.onpopstate = function (e) {

  2. history.replaceState(data, title [, url])
:更改当前的历史记录,参数同上。

switch (e.state.action) {

 

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=978

上一篇:

下一篇:

相关文章