在index.html页面中，我有2个锚标记首页，默认情况下，我已设置about.html，因此在加载页面about.html时会打开。
我已经在home.html页面上进行了分页。
点击默认情况下，点击首页标签第1号页面时，这里的每个功能都可以返回，转发和刷新。但是我遇到问题的情况是，当我从http://localhost:7000/about移到http://localhost:7000/home?Page=1的同时单击后退按钮。
Uncaught TypeError: Cannot set property 'value' of null
<!DOCTYPE html>
<html>
<head>
<title>single page application</title>
<link rel="stylesheet" type="text/html" href="css/style.css">
</head>
<body>
<div>
<div class="nav navbar navmenuspace">
<a href="/home" id="homeid">home</a>
<a href="/about" id="abtid">about</a>
</div>
</div>
<div class="viewer" id="viewer" style="margin-top: 100px;">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
<h1>HOME PAGE</h1>
<p>this is home page</p>
<div id="table1">
<table class="table" style="width: 1000px;">
<thead>
<th>userID</th>
<th>ID</th>
<th>Title</th>
</thead>
<tbody id="user"></tbody>
</table>
</div>
<div id="newList"></div>
var udata;
let flag = false;
var valhrefg;
$(function(){
$('.nav a').click(function(){
var valhrefl = $(this).text();
valhrefg = valhrefl;
console.log("valhrefg "+valhrefg);
});
});
document.getElementById("homeid").removeAttribute("href");
document.getElementById("abtid").removeAttribute("href");
$(document).ready( function() {
console.log("load_route() called");
if(location.pathname == "/"){
flag = false;
console.log("inside about / block");
$("#viewer").load("about.html");
}
else if(location.pathname == "/home"){
flag = true;
console.log("coming inside home");
$("#viewer").load("home.html");
valhrefg = "home";
getArrayData();
}
else if(location.pathname == "/about"){
valhrefg = "about";
console.log("inside second about block");
$("#viewer").load("about.html");
}
else
{
$("#viewer").load("about.html");
}
$("#abtid").on("click", function() {
flag = false;
console.log("inside abtid")
$("#viewer").load("about.html");
history.pushState("","",""+"/about"+""+""+""+""+"");
});
$("#homeid").on("click", function() {
console.log("inside homeid")
flag = true;
$("#viewer").load("home.html");
getArrayData();
console.log("ls "+window.location.pathname);
});
});
function getArrayData()
{
console.log("inside get array data :");
console.log("ls "+window.location.search);
console.log(window.location.href.split('#')[0]);
let xhr1 = new XMLHttpRequest();
xhr1.open('GET',"https://jsonplaceholder.typicode.com/albums",true);
xhr1.send();
xhr1.onreadystatechange = function()
{
console.log("inside xhr1");
if(this.readyState == 4 && this.status == 200)
{
console.log("inside xhr 1 ready state");
document.getElementById('user').innerHTML = this.responseText;
var arrayData = JSON.parse(this.responseText);
udata = arrayData;
totalPages(udata);
var vallast1 = window.location.href;
var vallast2 = vallast1.split("=");
console.log(vallast2[1]);
if(typeof vallast2[1] === "undefined")
{
getPageValue(1);
}
else
{
getPageValue(vallast2[1]);
}
}
}
}
function getUrl()
{
var loc = window.location.href;
console.log(loc);
var pageval1 = loc.split("=");
console.log(pageval1);
var pageval2 = pageval1[1];
return pageval2;
}
function totalPages(arrayData)
{
console.log("inside total pages");
console.log(udata);
var arrLen = arrayData.length;
var pagenos = Math.ceil(arrLen/10);
console.log("pagenos "+ pagenos);
generatePageNo(pagenos);
}
function generatePageNo(pagenos)
{
console.log("11111111111111");
console.log("ls "+window.location.search);
$("#newList").append('<h1>'+'hello home'+'</h1>');
for (var i = 1; i <= pagenos; i++)
{
$("#newList").append('<li onclick=getPageValue(this.value); id="pagenos_'+ i +'" value="' + i + '"> ' + i + '</li>');
}
}
function getPageValue(val)
{
console.log("2222222222222");
var p="Page="+val;
console.log("val "+val);
console.log(window.location.href.split('#')[0]);
var a = window.location.search;
console.log("valhrefg "+valhrefg);
if(valhrefg == "home")
{
history.pushState("","",""+"/home"+""+""+""+"?"+""+""+p);
}
generateTable();
}
function generateTable()
{
console.log("inside gen table first");
var output = "";
var pageno = getUrl();
console.log("inside gen table : "+pageno);
var lastIndex = pageno * 10;
console.log("lastIndex "+ lastIndex);
console.log("udata.length "+ udata.length);
if(udata.length < lastIndex)
{
lastIndex = udata.length;
}
for(i=((pageno - 1)*10);i < lastIndex ;i++)
{
output +=
'<tr class="parent">'+
'<td>'+ udata[i].userId + '</td>'+
'<td>'+ udata[i].id + '</td>'+
'</tr>'+
'<tr class="cchild">'+
'<td>'+ udata[i].title + '</td>'+
'</tr>';
}
console.log("output "+output);
document.getElementById('user').innerHTML = output;
}
window.onpopstate = function() {
console.log("on pop state "+ location.pathname);
if(location.pathname == "/about")
{
console.log("inside location pathname");
$("#viewer").load("about.html");
}
else if(location.pathname == "/")
{
console.log("inside on log block");
$("#viewer").load("about.html");
}
else if(location.pathname == "/home")
{
generateTable();
}
}