Bất ngờ về sử dụng Window History full 1 (ok)
Ví dụ 1
C:\xampp\htdocs\oec\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style type="text/css">
a {
display: block;
text-shadow: horizontal-offset vertical-offset blur-radius hsla(0,0%,0%,.25);
text-decoration: none;
}
</style>
</head>
<body>
<h1>Home</h1>
<a href="about.php">To About</a>
<a href="javascript:history.back(-1);">back(-1);</a>
<?php
for ($i = 0; $i < 1000; $i++) {
echo $i . "_index";
}
?>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae ab, incidunt. Quis, minima! Officiis debitis sed nihil placeat, laboriosam porro officia autem quas, error voluptas minima ipsum, alias libero quae incidunt omnis inventore reprehenderit animi dolores, vel repellat. Pariatur, dolore. Aut sunt neque dicta possimus recusandae est, fuga voluptates, ducimus vitae, fugiat maxime porro saepe laudantium reprehenderit sapiente sequi repudiandae! Nisi veritatis aspernatur animi ut perspiciatis minima sed ea totam sit est saepe obcaecati facere alias odit quidem natus, officiis adipisci fugiat eligendi unde doloremque? Nemo quod facilis pariatur, temporibus tempora, quis hic laboriosam, totam iste necessitatibus maiores ad, accusantium excepturi quam in soluta amet culpa. Quos ea voluptatum veritatis aliquid quae, commodi vitae quod laboriosam fugiat, iste doloremque quasi omnis minima saepe enim odio necessitatibus. Voluptatum beatae, libero inventore quam quas pariatur? Quos optio modi omnis inventore accusantium sed nulla repudiandae delectus cum eligendi illum dignissimos enim obcaecati quod voluptate at quis sint vel fugiat, adipisci et consectetur, qui aspernatur, alias dolore! Autem vero optio perspiciatis quisquam in, officiis. Eveniet perferendis cumque enim sunt odit alias rerum ut est obcaecati, repudiandae. Nisi dolorum unde odit placeat in aliquam possimus sint dicta cumque deleniti corrupti facilis minus velit doloribus obcaecati, laudantium iste? Accusantium suscipit voluptate enim iste, quam omnis. Eius suscipit temporibus, quos eligendi labore reprehenderit perspiciatis voluptatum praesentium id vero sapiente eveniet quam, tempora, ducimus quas quae tenetur corrupti delectus cupiditate. Voluptatibus recusandae eos ullam labore assumenda asperiores non quaerat ipsam a adipisci ratione officia enim eveniet quo, praesentium! A beatae quis est adipisci tempora, voluptas placeat vero consequatur repellendus libero eum id autem quasi mollitia iste quod sunt fuga reprehenderit quibusdam soluta, nulla nostrum quaerat aliquam ducimus! Dignissimos, vel minus, perspiciatis necessitatibus accusamus omnis mollitia cupiditate commodi dolor et odio beatae minima molestias alias saepe dolorum optio dolore.</p>
</body>
</html>C:\xampp\htdocs\oec\about.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<style type="text/css">
a {
display: block;
text-shadow: horizontal-offset vertical-offset blur-radius hsla(0,0%,0%,.25);
text-decoration: none;
}
</style>
</head>
<body>
<h1>About</h1>
<a href="contact.php">To Contact</a>
<a href="javascript:history.back(1);">back(1)</a>
<?php
for ($i = 0; $i < 1000; $i++) {
echo $i . "_about </br>";
}
?>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae ab, incidunt. Quis, minima! Officiis debitis sed nihil placeat, laboriosam porro officia autem quas, error voluptas minima ipsum, alias libero quae incidunt omnis inventore reprehenderit animi dolores, vel repellat. Pariatur, dolore. Aut sunt neque dicta possimus recusandae est, fuga voluptates, ducimus vitae, fugiat maxime porro saepe laudantium reprehenderit sapiente sequi repudiandae! Nisi veritatis aspernatur animi ut perspiciatis minima sed ea totam sit est saepe obcaecati facere alias odit quidem natus, officiis adipisci fugiat eligendi unde doloremque? Nemo quod facilis pariatur, temporibus tempora, quis hic laboriosam, totam iste necessitatibus maiores ad, accusantium excepturi quam in soluta amet culpa. Quos ea voluptatum veritatis aliquid quae, commodi vitae quod laboriosam fugiat, iste doloremque quasi omnis minima saepe enim odio necessitatibus. Voluptatum beatae, libero inventore quam quas pariatur? Quos optio modi omnis inventore accusantium sed nulla repudiandae delectus cum eligendi illum dignissimos enim obcaecati quod voluptate at quis sint vel fugiat, adipisci et consectetur, qui aspernatur, alias dolore! Autem vero optio perspiciatis quisquam in, officiis. Eveniet perferendis cumque enim sunt odit alias rerum ut est obcaecati, repudiandae. Nisi dolorum unde odit placeat in aliquam possimus sint dicta cumque deleniti corrupti facilis minus velit doloribus obcaecati, laudantium iste? Accusantium suscipit voluptate enim iste, quam omnis. Eius suscipit temporibus, quos eligendi labore reprehenderit perspiciatis voluptatum praesentium id vero sapiente eveniet quam, tempora, ducimus quas quae tenetur corrupti delectus cupiditate. Voluptatibus recusandae eos ullam labore assumenda asperiores non quaerat ipsam a adipisci ratione officia enim eveniet quo, praesentium! A beatae quis est adipisci tempora, voluptas placeat vero consequatur repellendus libero eum id autem quasi mollitia iste quod sunt fuga reprehenderit quibusdam soluta, nulla nostrum quaerat aliquam ducimus! Dignissimos, vel minus, perspiciatis necessitatibus accusamus omnis mollitia cupiditate commodi dolor et odio beatae minima molestias alias saepe dolorum optio dolore.</p>
</body>
</html>C:\xampp\htdocs\oec\contact.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<style type="text/css">
a {
display: block;
text-shadow: horizontal-offset vertical-offset blur-radius hsla(0,0%,0%,.25);
text-decoration: none;
}
</style>
</head>
<body>
<h1>Contact</h1>
<a href="index.php">To Home</a>
<a href="javascript:history.back(1);">back(1)</a>
<?php
for ($i = 0; $i < 1000; $i++) {
echo $i . "_contact </br>";
}
?>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, eveniet at repudiandae incidunt, voluptas minus quo nemo, quos mollitia laboriosam amet? Possimus, illo, explicabo aut dicta rerum ex assumenda, quo iste in odit magnam reiciendis quae beatae quasi provident consequuntur non, modi! Voluptatibus numquam suscipit exercitationem, velit! Voluptate corrupti nostrum nam deleniti, quibusdam quidem eos labore sed eius veniam necessitatibus hic ad vero nesciunt ex voluptatibus architecto laborum id consequuntur beatae molestiae nulla a. Ipsam cum, itaque soluta ducimus totam expedita exercitationem repellendus quo perspiciatis a quas maxime nam ab eveniet doloribus ipsum possimus blanditiis nesciunt dolorum porro voluptatum, optio aspernatur. Ab minima animi dolorum voluptates quae delectus nostrum maiores distinctio unde adipisci excepturi pariatur commodi, itaque ratione fuga doloremque reprehenderit quasi corporis molestiae. Dolorum sint iusto, nam quos a unde officia eius, quam similique consequatur corrupti nisi minus sequi sed voluptatibus culpa, placeat optio perspiciatis? Esse inventore quo quam aperiam! Earum at quidem expedita maiores officiis, id necessitatibus, quasi aspernatur itaque consequatur, voluptate, reprehenderit est assumenda explicabo beatae. Minus repellat molestias odio sit omnis tempore dignissimos incidunt optio dolor placeat laboriosam aut corporis sunt, consequatur expedita alias inventore dolorem modi impedit. Placeat vitae quasi ad accusantium pariatur harum maiores exercitationem architecto nulla, ab velit ut consectetur, incidunt eligendi illo laudantium nam possimus explicabo. Voluptatem ad in reprehenderit, nostrum excepturi. Ipsum eveniet assumenda sequi, et quod, laborum itaque dolorem earum esse perferendis repellendus?</p>
</body>
</html>Ví dụ 2:
C:\xampp\htdocs\oec\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style type="text/css">
a {
display: block;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Home</h1>
<a href="about.php">To About</a>
<a href="javascript:history.back(-1);">back(-1);</a>
<h1>The Window History Object</h1>
<h2>The history.length Property</h2>
<p>Number of URLs in history list:</p>
<p id="demo"></p>
<p>Since this is a new window frame, history.length will always return 1.</p>
<script type="text/javascript">
let length = history.length;
document.getElementById("demo").innerHTML = length;
</script>
</body>
</html>C:\xampp\htdocs\oec\about.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<style type="text/css">
a {
display: block;
text-shadow: horizontal-offset vertical-offset blur-radius hsla(0,0%,0%,.25);
text-decoration: none;
}
</style>
</head>
<body>
<h1>About</h1>
<a href="contact.php">To Contact</a>
<a href="javascript:history.back(1);">back(1)</a>
<h1>The Window History Object</h1>
<h2>The history.length Property</h2>
<p>Number of URLs in history list:</p>
<p id="demo"></p>
<p>Since this is a new window frame, history.length will always return 1.</p>
<script type="text/javascript">
let length = history.length;
document.getElementById("demo").innerHTML = length;
</script>
</body>
</html>C:\xampp\htdocs\oec\contact.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<style type="text/css">
a {
display: block;
text-shadow: horizontal-offset vertical-offset blur-radius hsla(0,0%,0%,.25);
text-decoration: none;
}
</style>
</head>
<body>
<h1>Contact</h1>
<a href="index.php">To Home</a>
<a href="javascript:history.back(1);">back(1)</a>
<h1>The Window History Object</h1>
<h2>The history.length Property</h2>
<p>Number of URLs in history list:</p>
<p id="demo"></p>
<p>Since this is a new window frame, history.length will always return 1.</p>
<script type="text/javascript">
let length = history.length;
document.getElementById("demo").innerHTML = length;
</script>
</body>
</html>mNghiên cứ về console.log(history);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style type="text/css">
a {
display: block;
text-decoration: none;
}
</style>
<script type="text/javascript">
function GoBack () {
history.go (-1);
}
function GoForward () {
history.go (1);
}
</script>
</head>
<body>
<br />
<a href="#target1">First anchor 1</a>
<a name="target1"></a>
<br />
<a href="#target2">Second anchor 2</a>
<a name="target2"></a>
<br/>
Use these buttons to navigate in the history list:
<button onclick="GoBack ();">go back in the history list</button>
<button onclick="GoForward ();">go forward in the history list</button>
</body>
</html>😒 Window history.back()
Definition and Usage
The history.back() method loads the previous URL (page) in the history list.
The history.back() method only works if a previous page exists.
Note
history.back() is the same as history.go(-1).
history.back() is the same as clicking "Back" your browser.
😒 Window history.forward()
Definition and Usage
The history.forward() method loads the next URL (page) in the history list.
The history.forward() method only works if a next page exists.
Note
history.forward() is the same as history.go(1).
history.forward() is the same as clicking "Forward" in your browser.
😒 Window history.go()
Definition and Usage
The history.go() method loads a URL (page) from the history list.
The history.go() method only works if the page exist in the history list.
Note
history.go(0) reloads the page.
history.go(-1) is the same as history.back().
history.go(1) is the same as history.forward().
history.go(number)Tham số
Yêu cầu
Mô tả
number
Bắt buộc
Vị trí của trang mà bạn muốn tải lại so với trang hiện tại.
Ví dụ:
-1 tức là trang trước trang hiện tại
-2 tức là trang trước trang trước trang hiện tại
1 tức là trang sau trang hiện tại
2 tức là trang sau trang sau trang hiện tại
😂 Windows history.length
Definition and Usage
The length property returns the number of URLs in the history list of the current browser window.
The property returns at least 1, because the list includes the current page.
This property is useful to find out how many pages the user has visited in the current browsing session.
Ví dụ 4: Lấy được trang nào trước khi đến đây.
C:\xampp\htdocs\oec\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style type="text/css">
a {
display: block;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Home</h1>
<a href="about.php">To About</a>
<a href="javascript:history.back(-1);">back(-1);</a>
<h1>The Window History Object</h1>
<h2>The history.length Property</h2>
<p>Number of URLs in history list:</p>
<p id="demo"></p>
<p>Since this is a new window frame, history.length will always return 1.</p>
<script type="text/javascript">
let length = history.length;
document.getElementById("demo").innerHTML = length;
console.log(document.referrer);
</script>
</body>
</html>C:\xampp\htdocs\oec\about.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<style type="text/css">
a {
display: block;
text-shadow: horizontal-offset vertical-offset blur-radius hsla(0,0%,0%,.25);
text-decoration: none;
}
</style>
</head>
<body>
<h1>About</h1>
<a href="contact.php">To Contact</a>
<a href="javascript:history.back(1);">back(1)</a>
<button onclick="history.forward()">Go Forward</button>
<h1>The Window History Object</h1>
<h2>The history.length Property</h2>
<p>Number of URLs in history list:</p>
<p id="demo"></p>
<p>Since this is a new window frame, history.length will always return 1.</p>
<script type="text/javascript">
let length = history.length;
document.getElementById("demo").innerHTML = length;
console.log(document.referrer);
</script>
</body>
</html>C:\xampp\htdocs\oec\contact.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<style type="text/css">
a {
display: block;
text-shadow: horizontal-offset vertical-offset blur-radius hsla(0,0%,0%,.25);
text-decoration: none;
}
</style>
</head>
<body>
<h1>Contact</h1>
<a href="index.php">To Home</a>
<a href="javascript:history.back(1);">back(1)</a>
<h1>The Window History Object</h1>
<h2>The history.length Property</h2>
<p>Number of URLs in history list:</p>
<p id="demo"></p>
<p>Since this is a new window frame, history.length will always return 1.</p>
<script type="text/javascript">
let length = history.length;
document.getElementById("demo").innerHTML = length;
console.log(document.referrer);
</script>
</body>
</html>Chú ý: Khi nhập vào trình duyệt document.referrer == ""
if (document.referrer == "") {
window.close()
} else {
history.back()
}Cuối cùng sử dụng thư viện :)
Sử dụng history.pushState khá bất ngờ 👌👌👌
C:\Users\Administrator\Downloads\single-page-example-master\pushState.php
<?php
//figure out how many pages to make links for
$json = json_decode(file_get_contents('pages.json'));
$numberOfPages = count((array)$json);
//use get just the first part of the query parameter
if(isset($_GET)) {
//should be a regex
$currentPage = ($_GET['page']) ? explode(".",$_GET['page']) : '0';
$currentPage = $currentPage[0];
echo $currentPage;
//select the current page from the json object
$currentPageData = $json->$currentPage;
$title = $currentPageData->title;
$content = $currentPageData->content;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Single page application example</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
//find each list item
$("#pages>li").each(function(index, item){
$item = $(item);
//the dynamically created id originally came from the json object
var id = $item.attr("id");
$item.click(function(item){
item.preventDefault();
//when clicked, update the url
history.pushState("", "id", id + ".html");
//get the new content
$.ajax({
url: "pages.json",
dataType: 'json',
success: function(data){
//update the current html structure with the new content
$("#title").html(data[id].title);
$("#content").html(data[id].content);
}
});
});
});
});
</script>
</head>
<body>
<ul id="pages">
<?php foreach($json as $pageID => $page) { ?>
<li id="<?php echo $pageID;?>"><a href="<?php echo $pageID.'.html';?>"><?php echo $page->title;?></a></li>
<?php } ?>
</ul>
<?php if($title); {?>
<h1 id="title"><?php echo $title;?></h1>
<p id="content"><?php echo $content;?></p>
<?php } ?>
</body>
</html>C:\xampp\htdocs\oec\pages.json
{
"page1":{
"title":"page 1",
"content":"This is page 1 content"
},
"page2":{
"title":"page 2",
"content":"This is page 2 content"
},
"page3":{
"title":"page 3",
"content":"This is page 3 content"
}
}2. Sử dụng history.pushState khá bất ngờ 👌👌👌
C:\xampp\htdocs\oec\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript History API: pushState Demo</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="tabs">
<ul>
<li class="active" id="tab1">React</li>
<li id="tab2">Vue</li>
<li id="tab3">Angular</li>
</ul>
<div class="content">
A JavaScript library for building user interfaces
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>C:\xampp\htdocs\oec\style.css
:root {
--active-border-color: #f0da50;
--bg-color: #f4f4f4;
--text-color: #6d6d6d;
--tab-bg-color: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1rem;
background-color: var(--bg-color);
color: var(--text-color);
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.tabs {
display: flex;
flex-direction: column;
min-height: 200px;
background-color: var(--tab-bg-color);
padding: 10px;
border-radius: 5px;
width: 350px;
}
.tabs ul {
list-style: none;
display: flex;
justify-content: space-between;
border-radius: 5px;
}
.tabs ul li {
width: 100%;
text-align: center;
padding: 5px;
margin-left: 5px;
cursor: pointer;
font-size: 1.1rem;
}
.tabs ul li:hover {
border-bottom: solid 2px var(--active-border-color);
}
.tabs ul li.active {
border-bottom: solid 2px var(--active-border-color);
font-weight: bold;
}
.tabs .content {
padding: 10px;
margin: 10px auto;
}C:\xampp\htdocs\oec\app.js
const tabs = document.querySelector(".tabs");
const content = document.querySelector(".tabs > .content");
const hashes = new Map([
["#react", "tab1"],
["#vue", "tab2"],
["#angular", "tab3"],
]);
const data = new Map([
[
"tab1",
{
url: "index.html#react",
content: "React is a JavaScript library for building user interfaces.",
},
],
[
"tab2",
{
url: "index.html#vue",
content: "Vue is the Progressive JavaScript Framework.",
},
],
[
"tab3",
{
url: "index.html#angular",
content: "Angular is a platform for building mobile and desktop web applications.",
},
],
]);
tabs.addEventListener("click", function(event) {
if (!event.target.id) return;
update(event.target.id);
});
const update = (tabId) => {
// remove the active class of the previously selected tab
const currentTab = tabs.querySelector(".active");
if (currentTab.id != tabId) {
currentTab.classList.remove("active");
}
// add active class to the selected tab
const selectedTab = document.getElementById(tabId);
selectedTab.classList.add("active");
const entry = data.get(tabId);
if (entry) {
// update the URL
history.pushState(null, "", entry.url);
// change the content
content.innerHTML = entry.content;
}
};
(() => {
// get tab id from the hash
const tabId = hashes.get(window.location.hash);
// update the tab
if (tabId) update(tabId);
})();Previous=== END DATATABLE ===NextBất ngờ về sử dụng Window History full 2, window.history.scrollRestoration,history.replaceState(ok)
Last updated
Was this helpful?
