js
pm.js
page
page_1.html
page_2.html
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>PM JS</title>
<script src="https://github.com/lesismal/pmjs/raw/master/js/pm.js" type="text/javascript"></script>
</head>
<body>
<!-- page_1 -->
<div id="page_1"></div>
<!-- page_2 -->
<div id="page_2"></div>
<script>
let pages = [
{
// page element id
dst: "page_1",
// sub-html-page, which would be loaded to dst element.innerHTML
url: "page/page_1.html",
// init will be called when the page is loaded, if there's not an url, it will be called immediately
init: function (page) {
console.log("page_1 init");
},
// onshow will be called every time when this page is displayed
onshow: function (page) {
console.log("page_1 onshow");
},
// onshow will be called every time when this page is hided
onhide: function (page) {
console.log("page_1 onhide");
},
},
{
dst: "page_2",
url: "page/page_2.html",
lazy: true,
init: function (page) {
console.log("page_2 init");
},
onshow: function (page) {
console.log("page_2 onshow");
},
onhide: function (page) {
console.log("page_2 onhide");
// release this page when hided, then reload this page every time
$pm.release(page);
}
},
// many pages ...
];
$pm.bindPages(pages);
let i = 0;
setInterval(function () {
i++;
if (i < 5) {
// change a page to display, and hide others
let nextDisplay = pages[i % pages.length].dst;
$pm.select(nextDisplay);
}
}, 1000);
</script>
</body>
</html>