xml地图|网站地图|网站标签 [设为首页] [加入收藏]

前生今世,与浏览器历史堆栈管理

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:144 发布时间:2019-05-02
摘要:History API 与浏览器历史宾馆管理 2016/07/25 · HTML5 ·History,HTML5,浏览器 本文小编: 伯乐在线 -欲休。未经作者许可,禁止转发! 接待参与伯乐在线 专栏撰稿人。 移动端支付在少数场景中

History API 与浏览器历史宾馆管理

2016/07/25 · HTML5 · History, HTML5, 浏览器

本文小编: 伯乐在线 - 欲休 。未经作者许可,禁止转发!
接待参与伯乐在线 专栏撰稿人。

移动端支付在少数场景中兼有差极度常须要,如为了抓实用户体验和增长速度响应速度,经常在有的工程应用SPA架构。古板的单页应用基于url的hash值进行路由,那种落成不存在兼容性难点,可是缺点也有–针对不扶助onhashchange属性的IE6-7要求安装停车计时器不断检查hash值改换,品质上并不是很谈得来。

而未来,在移动端支付中HTML⑤标准给大家提供了1个History接口,使用该接口能够随便支配历史记录。本文并不详细介绍History接口,而是斟酌History接口如何影响浏览器历史饭店,并且动用那一个规律选用到具体的实际工作中,提议三种历史记录保存战略,使路由逻辑更清晰,让SPA更易于。

HTML 伍 History API的”前生今世”

2014/10/23 · HTML5 · HTML5

原版的书文出处: tuts    译文出处:忘却浅思的博客(@dwido)   

History是有趣的,不是吧?在前头的HTML版本中,我们对浏览历史记录的操作11分轻易。大家得以来回使用可以使用的章程,但那便是整套大家能做的了。

唯独,利用HTML 伍的History API,大家能够更加好的决定浏览器的历史记录了。举例:大家得以增多一条记下到历史记录的列表中,恐怕在并没有刷新时,能够立异鸿基土地资金财产址栏的U哈弗L。

HTML 伍 History API的”前生今世”,api前生当代

原文:An Introduction To The HTML5 History API

译文:关于HTML 5 History API 的介绍

译者:dwqs

History是风趣的,不是啊?在头里的HTML版本中,大家对浏览历史记录的操作万分有限。大家得以来回使用能够接纳的主意,但那正是漫天大家能做的了。

可是,利用HTML 5的History API,我们得以更加好的垄断(monopoly)浏览器的历史记录了。比方:大家能够增多一条记下到历史记录的列表中,可能在未曾刷新时,能够立异鸿基土地资金财产址栏的U牧马人L。

 

为啥介绍History API ?

        在 那篇作品中,大家将领会HTML 5中History API的来源。此前,我们平时应用散列值来改动页面内容,越发是那几个对页面特别重要性的内容。因为未有刷新,所以对于单页面应用,改造其U中华VL是不容许 的。其它,当您转移U奥德赛L的散列值值,它对浏览器的历史记录没有其余影响。

        然后,将来对于HTML 伍的History API来讲,那几个都以足以自便完成的,然而由于单页面应用没供给运用散列值,它可能要求万分的开采脚本。它也允许大家用1种对SEO友好的点子确立新利用。其余,它能减小带宽,不过该怎么注脚呢?

        在小说中,笔者将用History API开拓二个单页应用来表明上述的难题。

        那也代表本人必须先在首页加载要求的财富。以往始发,页面仅仅加载要求的内容。换句话说,应用并不是一同头就加载了全部的剧情,在呼吁第二个利用内容时,才会被加载。

注意,您必要实施一些劳动器端编码只提供一些财富,而不是完好的页面内容。

 

浏览器接济

         在写那篇小说的时候,各主流浏览器对History API的支持是十分不易的,能够点击这里查看其援助意况,这几个链接会告诉您帮忙的浏览器,并利用在此之前,总有非凡的实践来检查测试帮衬的一定作用。

         为了用产生格局显明浏览器是或不是辅助那么些API,能够用上边包车型地铁一条龙代码核算:

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

 

         别的,作者建议参考一下这篇文章:Detect Support for Various HTML伍Features.(ps:后续会翻译)

         如若你是用的现代浏览器,能够用上面包车型客车代码:

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

 

         借令你的浏览器不支持History API,能够运用history.js代替。

 

使用History

        HTML 五提供了三个新章程:

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

        二种情势都同意大家抬高和更新历史记录,它们的工作规律同样并且能够加上数量同样的参数。除了艺术之外,还有popstate事件。在后文少将介绍怎么使用和如何时候使用popstate事件。

        pushState()和replaceState()参数同样,参数表明如下:

              一、state:存款和储蓄JSON字符串,能够用在popstate事件中。

              二、title:今后超越四分之二浏览器不援救依旧忽视那几个参数,最佳用null代替

              三、url:任性有效的ULX570L,用于立异浏览器的地址栏,并不在乎URubiconL是或不是曾经存在地址列表中。更珍视的是,它不会另行加载页面。

        多少个艺术的最首要分裂正是:pushState()是在history栈中加多二个新的条款,replaceState()是替换当前的记录值。假如你还对那么些有吸引,就用有个别演示来阐明那么些差距。

        若是大家有三个栈块,叁个标志为一,另贰个标记为二,你有第多个栈块,标识为3。当试行pushState()时,栈块3将被增加到已经存在的栈中,因此,栈就有三个块栈了。

        一样的倘若情景下,当实践replaceState()时,将要块2的库房和停放块三。所以history的笔录条数不改变,也正是说,pushState()会让history的数目加1.

相比结实如下图:

        到此,为了调控浏览器的历史记录,大家忽略了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:

<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:

<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 德姆o  (ps:你在点击demo壹的选项卡时,其记录会被增添到浏览器的历史记录,当点击后退/前进按键时,能够重临/跳到你以前点击的选项卡对应的页面)

          Demo 2:HTML 5 History API – replaceState

正史条约在浏览器中被更新,并且不可能采用浏览器的上进和滞后按键举行浏览。View 德姆o  (ps:你在点击demo一的选项卡时,其记录会被替换当前浏览器的历史记录,当点击后退/前进按键时,不得以回到/跳到您前面点击的选项卡对应的页面,而是重回/跳到你进去demo二的上一个页面)

计算(ps:喜欢这五个字~^_^~)

       HTML 5中的History API 对Web应用具备十分大的影响。为了更便于的始建有功能的、对SEO友好的单页面应用,它移除了对散列值的注重。

下壹篇:你在博客收音和录音集吗?

History API回顾

HTML5 History API包括2个方法:history.pushState()和history.replaceState(),和1个事件:window.onpopstate。

干什么介绍History API ?

在那篇作品中,大家将明白HTML 5中History API的来源于。以前,大家常常应用散列值来改变页面内容,尤其是那几个对页面尤其主要的内容。因为没有刷新,所以对于单页面应用,改造其UEscortL是不只怕的。别的,当您转移U大切诺基L的散列值值,它对浏览器的历史记录未有别的影响。

下一场,未来对于HTML 五的History API来讲,这几个都以足以随意完结的,可是由于单页面应用没须求运用散列值,它或然须求分外的开采脚本。它也允许大家用一种对SEO友好的不二等秘书籍确立新利用。其余,它能减小带宽,可是该怎么申明呢?

在文章中,作者将用History API开荒贰个单页应用来讲明上述的难题。

那也意味本身必须先在首页加载须求的财富。未来初阶,页面仅仅加载必要的始末。换句话说,应用并不是1初阶就加载了全方位的剧情,在呼吁第叁个应用内容时,才会被加载。

只顾,您供给实践一些劳动器端编码只提供部分能源,而不是欧洲经济共同体的页面内容。

javascript:historygo(-一) 网页已过期 怎化解

过期了。。。消除什么啊。。HTML5有个history的api,你能够去探望  

pushState

history.pushState(stateObject, title, url),包罗七个参数。

率先个参数用于存款和储蓄该url对应的事态对象,该对象可在onpopstate事件中收获,也可在history对象中收获。

第二个参数是标题,最近浏览器并未有落成。

其三个参数则是设定的url。一般安装为相对路线,倘诺设置为绝对路线时索要确定保障同源。

pushState函数向浏览器的历史仓库压入3个url为设定值的笔录,并改动历史旅舍的脚下指针至栈顶。

> 在那边作者利用历史饭馆和眼下指针,用以表明浏览器对历史记录的管理攻略。文书档案中并从未采纳那样的词汇,小编为了更形象的介绍接口对浏览器历史记录的熏陶,使用那样的叙说,如有不当之处请马上提出(然则当下以那套模型为根基的逻辑完成中从不出现悖论)。

浏览器扶助

在写那篇小说的时候,各主流浏览器对History API的支撑是10分不易的,能够点击这里翻开其辅助情形,那一个链接会告诉您补助的浏览器,并运用以前,总有能够的执行来检查评定协助的一定成效。

为了用产生格局明确浏览器是不是扶助那个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代替。

html5 file api 上传文件

您能够到PHP100上面去咨询下 ~ 在html伍粤语件上传的话是将总体文件转变来base64编码然后在将文件存款和储蓄的 而你的PHP程序大概不读base6四把  

5 History API的”前生今世”,api前生今世原著:An Introduction To The HTML5 History API 译文:关于HTML 伍 History API 的介绍 译者:dwqs History是有意思...

replaceState

该接口与pushState参数一样,含义也一律。唯1的分别在于replaceState是替换浏览器历史货仓的目前历史记录为设定的url。须求专注的是,replaceState不会转移浏览器历史仓库的当前线指挥部针。

使用History

HTML 5提供了几个新措施:

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

三种方式都同意大家抬高和更新历史记录,它们的劳作规律同样并且能够增加数量同样的参数。除了艺术之外,还有popstate事件。在后文准将介绍怎么利用和怎么时候利用popstate事件。

pushState()和replaceState()参数同样,参数表明如下:

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

贰、title:未来抢先陆分之3浏览器不扶助依然忽视那一个参数,最佳用null代替

三、url:任性有效的U路虎极光L,用于更新浏览器的地址栏,并不在乎U本田CR-VL是不是早已存在地址列表中。更关键的是,它不会再一次加载页面。

七个形式的关键不一样就是:pushState()是在history栈中增多几个新的条条框框,replaceState()是替换当前的记录值。即便您还对这么些有吸引,就用一些示范来注解那几个分歧。

假设大家有五个栈块,叁个标志为一,另八个标识为2,你有第多少个栈块,标志为三。当实践pushState()时,栈块3将被增多到已经存在的栈中,由此,栈就有叁个块栈了。

一律的举个例子情景下,当实施replaceState()时,就要块二的仓库和停放块3。所以history的记录条数不变,也正是说,pushState()会让history的数码加一.

正如结实如下图:

图片 1

 

到此,为了调整浏览器的历史记录,我们忽视了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未有那种行为)。

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:前生今世,与浏览器历史堆栈管理

关键词: 68399皇家赌场 HTML5

上一篇:深入之闭包,理解JavaScript的作用域链

下一篇:没有了

最火资讯