Completely remove a div when user navigates back to the website
Question
I am working on a website where let us say we have an index.html with 2 divs.
<div id="top">
Some Content
</div>
<div id="content">
Some Content
<a href="page.html"></a>
</div>
The content id div has an anchor tag. When I click on anchor tag,page.html loads in the same tab. Now when I press back button of browser, I want that div with id should not be present. Actually, I just want that when someone visits the website for first time, the div top should appear and then should never appear again even if some one follows a link and tries to go back. Although, when someone again opens the website in a new tab, the website should come all over again (with the top div and the same thing again). Is it possible?
1 answers
solution1
1 ACCPTED 2014-07-03 20:59:31
This is possible with JavaScript, but it's probably better done server-side.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script>
var content, body;
document.addEventListener("DOMContentLoaded", function() {
content = document.getElementById("content");
body = document.getElementsByTagName("body")[0];
if (localStorage.getItem("wasHere") !== null) {
body.removeChild(content);
} else {
localStorage.setItem("wasHere", "true");
}
});
</script>
</head>
<body>
<div id="top">
Some Content
</div>
<div id="content">
<!-- You need to put text inside links for them to show -->
<a href="page.html">Some Content</a>
</div>
</body>
</html>
The problem with this solution is that localStorage is easily modifiable and not reliable. Thus, again, you should really use a server-side solution. This is there if you need it, though.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.