HTML5 新增API学习总结

最新推荐文章于 2021-05-31 08:32:21 发布

chujiang3269

最新推荐文章于 2021-05-31 08:32:21 发布

阅读量93

点赞数

原文链接：https://my.oschina.net/u/3256201/blog/836056

版权

1.访问历史记录API，可用于制作单页面事件程序

之前的API：window.history.forward（）页面前进，window.history.back（）页面后退，window.history.go（）页面刷新可以传入具体的url地址

操作历史记录，存储历史记录

//兼容写法
if(window.history && history.pushState)
{
       history.pushState('数据'，'设置历史状态的标题tittle（浏览器暂不支持此属性）','?demo=123(url末端信息)')
}
else{
     alert('你的浏览器不支持')
}

当我们在伪造的访问历史中前进后退时会执行一个popstate事件

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

        e.state //历史数据信息

})

window.location 可以拿到当前网页中和地址相关的信息其中的search属性可以获取到url代码

var search=window.location.search.split（'='）[ 1 ] 例如可以得到['?','geww']数组

decodeURI(search)可以将编码转化为中文

2.全屏API requestFullScreen

全屏API有兼容问题因此使用时要采用兼容写法

var elem = 需要全屏的元素;
if(elem.webkitRequestFullScreen){   //兼容谷歌与Safari浏览器
   elem.webkitRequestFullScreen();
}else if(elem.mozRequestFullScreen){  //兼容Firefox浏览器
   elem.mozRequestFullScreen();
}else{
   elem.requestFullScreen();
}

案例代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏API</title>
</head>
<body>
<p>这是个可以全屏的标签</p>
</body>
</html>
<script>
    var elem = document.querySelector('p');

    elem.addEventListener('click',function () {
        if(elem.webkitRequestFullScreen){
            elem.webkitRequestFullScreen();
        }else if(elem.mozRequestFullScreen){
            elem.mozRequestFullScreen();
        }else{
            elem.requestFullScreen();
        }
    })
</script>

3.Application Cache 让网页可以离线访问

在<html>标签中加入 manifest = 'cache.manifest' →<html manifest = 'cache.manifest'>

cache.manifest是用来放html5的缓存文件

具体用法在文件夹中创建cache.manifest文件，然后编辑：

基本格式如下：

CACHE MANIFEST
# version 1.0.0  //文件版本

CACHE:
   //放需要缓存的文件如：index.html

NETWORK:
   *

3.web Strorage 应用程序储存

if(window.locaStorage){
    
     localStorage.setItem('key1,value)                    //用来存储用户输入的信息
     localStorage['key1'] / localStorage.getItem('key1')  // 可以用来获取用户输入的信息

}

无刷新访问历史案例练习：

//data.js里边的内容
'use strict';

var data = {
  "五环之歌": '作曲 : 唐诃/吕远 \n <br />' +
    '作词 : 岳云鹏/MC Hotdog \n <br />' +
    '我把车子开上五环 \n <br />' +
    '我把车子开上五环 \n <br />' +
    '快点把车子开上五环 \n <br />' +
    '什么都不管 \n <br />' +
    '我就是要上五环 \n <br />' +
    '啊～～～五环 你比四环多一环（fifth Ring） \n <br />' +
    '啊～～～五环 你比六环少一环（ I\'m driving on the fifth ring）  \n <br />' +
    '终于有一天 你会修到七环 \n <br />' +
    '修到七环怎么办 你比五环多两环 \n <br />' +
    '热狗： \n <br />' +
    '车一直塞 表情痴呆 早就习惯漫无目的一直开 \n <br />' +
    '那五环依然那么自在 \n <br />' +
    '它一直在 \n <br />' +
    '腐烂的喇叭声 苦难的师傅一直唉～ \n <br />' +
    '北京的 style 在上下班 车子一直排 \n <br />' +
    '为了生活 为了梦想 为了放假单 \n <br />' +
    '或许有天 我们必须要去 那八环 \n <br />' +
    'Rest in peace 北京的交通 我为你放花篮 \n <br />' +
    '岳云鹏： \n <br />' +
    '啊～～～五环 你比四环多一环（fifth Ring） \n <br />' +
    '啊～～～五环 你比六环少一环（ I\'m driving on the fifth ring）  \n <br />' +
    '终于有一天 你会修到七环 \n <br />' +
    '修到七环怎么办 你比五环多两环 \n <br />' +
    '热狗： \n <br />' +
    '多少人明知山有虎 却偏向虎山行 \n <br />' +
    '我明明知道五环堵 \n <br />' +
    '这条回家路 祸不单行 \n <br />' +
    '要塞啊！ 就塞啊！哼 ！ 我不担心 \n <br />' +
    '一辈子没有洗过车 我车子不干净 \n <br />' +
    '这烟抽的看起来多淡定 \n <br />' +
    '这边苦苦的笑容呢？吐出了叹气 \n <br />' +
    '你还想看什么戏 \n <br />' +
    '在车上乖乖吃着你的煎饼 \n <br />' +
    '快点上五环 因为或许先上先赢 \n <br />' +
    '我把车子开上五环 \n <br />' +
    '我把车子开上五环 \n <br />' +
    '快点把车子开上五环 \n <br />' +
    '什么都不管 \n <br />' +
    '我就是要上五环 \n <br />' +
    '五环五环 \n <br />' +
    '五环五环 \n <br />' +
    '这是五环五环 \n <br />' +
    '什么都不管 \n <br />' +
    '我现在就上五环',
  "我的滑板鞋": '有些事我都已忘记 \n <br />' +
    '但我现在还记得 \n <br />' +
    '在一个晚上我的母亲问我 \n <br />' +
    '今天怎么不开心 \n <br />' +
    '我说在我的想象中有一双滑板鞋 \n <br />' +
    '与众不同最时尚跳舞肯定棒 \n <br />' +
    '整个城市找遍所有的街都没有 \n <br />' +
    '她说将来会找到的时间会给我答案 \n <br />' +
    '星期天我再次寻找依然没有发现 \n <br />' +
    '一个月后我去了第二个城市 \n <br />' +
    '这里的人们称它为魅力之都 \n <br />' +
    '时间过的很快夜幕就要降临 \n <br />' +
    '我想我必须要离开 \n <br />' +
    '当我正要走时我看到了一家专卖店 \n <br />' +
    '那就是我要的滑板鞋 \n <br />' +
    '我的滑板鞋时尚时尚最时尚 \n <br />' +
    '回家的路上我情不自禁 \n <br />' +
    '摩擦 摩擦 \n <br />' +
    '在这光滑的地上摩擦 \n <br />' +
    '月光下我看到自己的身影有时很远有时很近 \n <br />' +
    '感到一种力量驱使我的脚步 \n <br />' +
    '有了滑板鞋天黑都不怕 \n <br />' +
    '一步两步一步两步 一步一步似爪牙 \n <br />' +
    '似魔鬼的步伐 \n <br />' +
    '摩擦 摩擦 \n <br />' +
    '我给自己打着节拍 \n <br />' +
    '这是我生命中美好的时刻 \n <br />' +
    '我要完成我最喜欢的舞蹈 \n <br />' +
    '在这美丽的月光下在这美丽的街道上 \n <br />' +
    '我告诉自己这是真的这不是梦 \n <br />' +
    '一步两步一步两步 一步一步似爪牙 \n <br />' +
    '似魔鬼的步伐 \n <br />' +
    '摩擦 摩擦 \n <br />' +
    '在这光滑的地上摩擦 \n <br />' +
    '摩擦似魔鬼的步伐 \n <br />' +
    '似魔鬼的步伐 \n <br />' +
    '一步两步一步两步 一步一步似爪牙 \n <br />' +
    '似魔鬼的步伐 \n <br />' +
    '摩擦 摩擦 \n <br />' +
    '在这光滑的地上摩擦 \n <br />' +
    '摩擦',
  "咱们屯里人": '作曲 : 杨柏森 \n <br />' +
    '作词 : 马金萍 \n <br />' +
    '偶滴老嘎 就组在则个屯 \n <br />' +
    '偶系则个屯里 土生土长滴羊 \n <br />' +
    '别看屯子不仔大呀 有山有水有速棱 \n <br />' +
    '邻里先情挺和睦 老少爷们更滑群 \n <br />' +
    '屯子磊面发生过 黑多黑多的事 \n <br />' +
    '回想系那是特别的梗 \n <br />' +
    '朋友们若系有森确呀 我领你仰视仰视 \n <br />' +
    '仰视仰视偶们屯里的羊 \n <br />' +
    '偶滴老嘎 就组在则个屯 \n <br />' +
    '偶系则个屯里 土生土长滴羊 \n <br />' +
    '别看屯子不仔大呀 有山有水有速棱 \n <br />' +
    '邻里先情挺和睦 老少爷们更滑群 \n <br />' +
    '屯子磊面发生过 黑多黑多的事 \n <br />' +
    '回想系那是特别的梗 \n <br />' +
    '朋友们若系有森确呀 我领你仰视仰视 \n <br />' +
    '仰视仰视偶们屯里的羊'
};

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问历史记录API</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,
        body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            padding: 0
        }
        aside{
            width: 200px;
            height: 100%;
            float: left;
            background-color: greenyellow;
        }
        aside>ul{
            width: 100%;
            height: 100%;
        }
        aside>ul>li{
            width: 100%;
            height: 50px;
            margin-bottom:10px;
            line-height: 50px;
            cursor: pointer;
            text-align: center;
        }
        div{
            padding-left:10px;
            height: 100%;
            background-color:blueviolet;
            margin-left: 200px;
        }

    </style>
</head>
<body>
<aside>
    <ul></ul>
</aside>
<div></div>
</body>
</html>
<script src="data.js"></script>
<script>
    var ul = document.querySelector('ul');
    var lis = ul.children;
    var div = document.querySelector('div');
    for(var i in data){
        var li =document.createElement('li');
        li.innerHTML = i;
        li.onclick = addContent;
        ul.appendChild(li);
    }

    function addContent() {
        while(div.hasChildNodes()){
            div.removeChild(div.lastChild);
        }
        div.innerHTML = data[this.innerHTML];
        if(window.history && history.pushState){
            history.pushState(this.innerHTML,'title useless','?t='+decodeURI(this.innerHTML));
        }

    }
    window.addEventListener('popstate',function (e) {
        div.innerHTML = data[e.state];
    })
</script>

转载于:https://my.oschina.net/u/3256201/blog/836056

chujiang3269

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 新增API学习总结

1.访问历史记录API，可用于制作单页面事件程序之前的API：window.history.forward（）页面前进，window.history.back（）页面后退，window.history.go（）页面刷新可以传入具体的url地址操作历史记录，存储历史记录 ...
复制链接

扫一扫