Example tutorial of h5History mode-H5 Tutorial-php.cn

Example tutorial of h5History mode

零下一度

Release： 2017-06-23 11:10:27

Original

2146 people have browsed it

I recently saw the implementation of HTML5 History mode routing in vue-router, and then I went to study HTML5 History. Here are some of my understandings. By the way, I used jquery to write an implementation similar to the HTML5 History mode router in vue-router. , in order to achieve the purpose of practicing and becoming familiar with it.

1. history.pushState

history.pushState(state, title, url);

Copy after login

The first and second parameters above can be empty, mainly the third parameter, which means The address of the new historical record, the browser will not load the URL after calling the pushState() method. The new URL does not have to be an absolute address. If It is relative to , it must be relative to the current URL

## 2. history.replaceState

history.replaceState(state, title, url);

Copy after login

window.history.replaceState is similar to window.history.pushState, except that replaceState Won't Add a new history record point in window.history, the effect is similar to window.location.replace(url), both are not A new recording point will be added to the historical recording point.

window.onpopstateCome

monitor

url changes

window.addEventListener("popstate",  currentState =

Copy after login

javascript

Script execution

window.history.pushState and window.history.replaceState will nottriggeronpopstate Event, click forward or backward in browser will trigger Google Chrome and Firefox have different reactions when the page is first opened. Google Chrome strangely responds Triggers the

onpopstate

event, but Firefox does not 4. Below is an example of an HTML5 mode similar to vue-router, purely to deepen understanding, and the writing is very rough.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HTML5 History 模式(第二版)</title><link rel="stylesheet" type="text/css" href="css/style.css?1.1.10"><style type="text/css">.container-bg{width:1000px; overflow: hidden; margin-right: 0 auto;}.pagination{width: 1000px; background-color: #d8d8d8; height: 30px; line-height: 30px;}.pagination li{width: 100px; height: 30px; background: red; float: left; cursor: pointer; color:#fff; margin: 0 10px 0 0;}</style></head><body><div class="container-bg"><ul class="pagination"><li>1</li><li>2</li><li>3</li></ul><ul class="ptting"></ul></div><script type="text/javascript" src="js/jquery-3.2.1.min.js?1.1.10"></script><script type="text/javascript">
    history.replaceState(null, "页面标题", "http://127.0.0.1:3000/lmw/0");//当页面载入时候，把url地址修改var searchObject = {};/*此对象用来保存下面pushState的URL作为key值，ajax要查询的ID为val
                           *例如：searchObject = {"http://127.0.0.1:3000/lmw/0":0}*/var factory = function(){var addva = document.location.href;//获取完整URLvar query = searchObject[addva];//找到该URL对应的值        query = (query == undefined ? 0 :query);//发起ajax加载页面        $.get("/page?page="+query,function(data){var data2 = JSON.parse(data);var ele = ""for(var i=0;i<data2.data.length;i++){
                        ele += &#39;<li>&#39;+data2.data[i].name+&#39;</li>&#39;}
                    $(&#39;.ptting&#39;).html(ele)
                    
                }) 
        };    //点击分页切换事件            $(".pagination li").click(function(){var query=$(this).index();
                $.get("/page?page="+query,function(data){var data2 = JSON.parse(data);var ele = ""for(var i=0;i<data2.data.length;i++){
                        ele += &#39;<li>&#39;+data2.data[i].name+&#39;</li>&#39;}
                    $(&#39;.ptting&#39;).html(ele)                    
                    history.pushState({pageIndex : 1}, "", "http://127.0.0.1:3000/lmw/"+query);//把当前pushState的url，和ajax查询的值存入对象，以供触发pushState事件的时候使用                    searchObject["http://127.0.0.1:3000/lmw/"+query] = query
                    
                })
            })//浏览器前进或者后退的时候触发popstate事件if (history.pushState) {
    window.addEventListener("popstate", function() {
        factory()                              
    });

    factory()
};</script></body></html>

Copy after login

By the way, I will post a server code in node.js. For testing, I simply wrote a

var fs = require(&#39;fs&#39;)var path = require(&#39;path&#39;)var express = require(&#39;express&#39;)var app = express();
app.use(express.static(&#39;./public&#39;));var router = express.Router();
router.get(&#39;/page&#39;,function(req,res){var page = req.query.pagetry{var text = fs.readFileSync(&#39;./data&#39;+page+&#39;.json&#39;);
        res.json(text.toString())
    }catch(err){
        res.send(&#39;哈哈！傻逼，没有拉！&#39;)    
    }
    
})

app.use(router)

app.listen(3000)

Copy after login

 注意：history.pushState({pageIndex : 1}, "", "http://127.0.0.1:3000/lmw/"+query)这里第三个参数写了完整的绝对路径，如果写成"/lmw/"+query这样的相对路径，会随着query值得增加无限在url后面追加，因为相对路径它一定是相对于当前的URL

Copy after login

server Put data0.json, data1.json, and data2.json to simulate fetching data from the database. The server has the index value (0/1/2) sent from the front end to match the read data*.json file, and then sends it to front end

The above is the detailed content of Example tutorial of h5History mode. For more information, please follow other related articles on the PHP Chinese website!