HTML5-5【history、worker】

最新推荐文章于 2022-04-11 21:14:26 发布

可乐雪碧薄荷糖

最新推荐文章于 2022-04-11 21:14:26 发布

阅读量254

点赞数 3

分类专栏： HTML5 文章标签： js html5 html css

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/113585643

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.history

(1).history基础

history.back()等同于浏览器的后退按钮

history.forward()为前进，但是如果前进到头了则不会有反应，后退也是

history.go(-1)也可以进行后退

history.go(1)可以进行前进

history.length可以打印history栈的长度

(2).replaceState

history.replaceState('this is a test',null,'test')此时浏览器地址后面会变为/test

第三个参数是用来设置url的

第二个参数是用来设置网页条目名称但是很多浏览器不支持了一般设置为null

第一个参数是状态对象名称

只会更改替换条目，并不会增加history栈长度

(3).pushState

history.pushState("pushState",null,"pushState.html")

浏览器不会检查pushState.html是否存在，会直接替换。

通过history.state可以查看到状态对象名称

第一个参数 state object

第二个参数 title

第三个参数 url 不会立马加载页面会在重新访问时加载页面，新的url必需和旧的是同源的，否则会报错

会增加history栈长度

(4).示例

点击切换放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 800px;
            height: 200px;
        }
        .box{
            float: left;
            width: 150px;
            height: 150px;
            margin: 20px;
            color: #fff;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            line-height: 150px;
            cursor: pointer;
            transition:  1s;
        }
        .red{
            background-color: red;
            border: 5px solid red;
        }
        .green{
            background-color: green;
            border: 5px solid green;
        }
        .blue{
            background-color: blue;
            border: 5px solid blue;
        }
        .black{
            background-color: black;
            border: 5px solid black;
        }
        .box:hover{
            background-color: #fff;
            color: #000;
        }
        .box.selected{
            transform: scale(1.2);
        }
    </style>
</head>
<body>
   <div class="container">
       <div class="box red selected" id="box-1">one</div>
       <div class="box green " id="box-2">two</div>
       <div class="box blue" id="box-3">three</div>
       <div class="box black" id="box-4">four</div>
   </div>
    <script>
     let boxes = Array.from(document.getElementsByClassName('box'));
     function selectBox(id){
         boxes.forEach(item => {
             item.classList.toggle('selected',item.id === id);
         })
     }
     boxes.forEach(item =>{
         item.addEventListener('click',e=>{
             let id = item.id;
             history.pushState({id},null,`selected=${id}`);
             selectBox(id)
         })
     })
    </script>
</body>
</html>

以上就完成了点击盒子放大然后url进行变更

popstate事件后退

现在要通过popState来完成点击前进后退之前对应的盒子也放大

在每一次活动的历史条目发生改变的时候就会触发，新增的话(push.replace)是不会触发的

可以通过e,state会打印出栈设置的id

 window.addEventListener('popstate',e=>{
         let id = e.state.id;
         selectBox(id)
     })

这样就实现了后退放大

(5).示例2

过滤

<body>
   <input type="text" id="inputKwd"/>
   <button id="btn">提交</button>
   <div class="output"></div>
    <script>
        let data = [
            {name:'VueJs'},
            {name:'ReactJs'},
            {name:'AngularJs'},
            {name:'jQuery'},
            {name:'HTML'},
            {name:'CSS'}
        ]
        let outputArea = document.getElementsByClassName('output')[0],
            btn = document.getElementById('btn'),
            inputKwd = document.getElementById('inputKwd');
        btn.addEventListener('click',()=>{
            let showData = data.filter(item=>{
                return item.name.indexOf(inputKwd.value) !== -1;
            })
            renderDom(showData)
            history.pushState({value:inputKwd.value},null,'#'+inputKwd.value)
        })    
        function renderDom(data){
            let outputStr = '';
            for (let i = 0; i < data.length; i++) {
                outputStr += '<p>'+data[i].name+'</p>'
                outputArea.innerHTML = outputStr
                
            }
        }
        renderDom(data)
    </script>
</body>

点击后退按钮返回之前的查询结果

 window.addEventListener('popstate',e=>{
            let value = e.state ? e.state.value :'';
            let showData = data.filter(item=>{
                return item.name.indexOf(value) !== -1;
            })
            inputKwd.value = value;
            renderDom(showData);
        },false)

(6).hashchange事件

hash变化时响应

点击a标签上方文字变化

<body>
   <div>
       <p id="slot">...</p>
       <a href="#login">login</a>
       <a href="#logout">logout</a>
   </div>
    <script>
       let slot = document.getElementsByTagName('p')[0];
       window.addEventListener('hashchange',e=>ouRouterChange(e))
       function ouRouterChange(e){
           const hashLocation = window.location.hash.substring(1);
           loadingContent(hashLocation);
       }
       function loadingContent(uri){
           const contentUri = `${uri}.html`;
           fetch(contentUri).then(r =>t.text()).then(content => updateSlot(content));
       }
       function updateSlot(content){
           slot.innerHTML = content;
       }
    </script>
</body>

建立login.html

<h2>login.html</h2>

建立loginout.html

二.worker

(1).使用方式

产生分离脚本，不影响页面更新

postMessage()发出

onMessage()发出

worker.js(无法访问window和document,可以写ajax请求)

(2).具体实例

worker.js

this.onmessage=(e)=>{
    if(e.data.addThis !==undefined){
        let sumMessage = {result:e.data.addThis.num1+e.data.addThis.num2}
        this.postMessage(sumMessage)
    }
}

index.js

 <script>
      if(window.Worker){
          let myWorker = new Worker('worker.js')
          let message = {addThis:{num1:1,num2:3}}
          myWorker.postMessage(message);
          myWorker.onmessage=(e)=>{
              console.log(e.data.result);
          }
      }
    </script>

可以在worker中继续委派worker

这样的方式引入

importScripts('。。')

终止worker

myWorker.terminate();

这样就无法通信了