How to clear browsing history using JavaScript? - javascript

I am doing a simple project, let us take high secure website. I have 5 different JSP pages. If I started from first JSP page, it is redirecting to second JSP page and so on. In the meanwhile, it should not store those pages in my browser history.
How to clear those browsing history using JavaScript?

Can you try using document.location.replace() it is used to clear the last entry in the history and replace it with the address of a new url. replace() removes the URL of the current document from the document history, meaning that it is not possible to use the "back" button to navigate back to the original document.
<script type="text/javascript">
function Navigate(){
window.location.replace('your link');
return false;
}
</script>
HTML:
<button onclick="Navigate()">Replace document</button>

As MDN Window.history() describes :
For top-level pages you can see the list of pages in the session history, accessible via the History object, in the browser's dropdowns next to the back and forward buttons.
For security reasons the History object doesn't allow the non-privileged code to access the URLs of other pages in the session history, but it does allow it to navigate the session history.
There is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the location.replace() method, which replaces the current item of the session history with the provided URL.
So there is no Javascript method to clear the session history, instead, if you want to block navigating back to a certain page, you can use the location.replace() method, and pass the page link as parameter, which will not push the page to the browser's session history list. For example, there are three pages:
a.html:
<!doctype html>
<html>
<head>
<title>a.html page</title>
<meta charset="utf-8">
</head>
<body>
<p>This is <code style="color:red">a.html</code> page ! Go to b.html page !</p>
</body>
</html>
b.html:
<!doctype html>
<html>
<head>
<title>b.html page</title>
<meta charset="utf-8">
</head>
<body>
<p>This is <code style="color:red">b.html</code> page ! Go to <a id="jumper" href="c.html">c.html</a> page !</p>
<script type="text/javascript">
var jumper = document.getElementById("jumper");
jumper.onclick = function(event) {
var e = event || window.event ;
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = true ;
}
location.replace(this.href);
jumper = null;
}
</script>
</body>
c.html:
<!doctype html>
<html>
<head>
<title>c.html page</title>
<meta charset="utf-8">
</head>
<body>
<p>This is <code style="color:red">c.html</code> page</p>
</body>
</html>
With href link, we can navigate from a.html to b.html to c.html. In b.html, we use the location.replace(c.html) method to navigate from b.html to c.html. Finally, we go to c.html*, and if we click the back button in the browser, we will jump to **a.html.
So this is it! Hope it helps.

It's not possible to clear user history without plugins. And also it's not an issue at developer's perspective, it's the burden of the user to clear his history.
For information refer to How to clear browsers (IE, Firefox, Opera, Chrome) history using JavaScript or Java except from browser itself?

No,that would be a security issue.
However, it's possible to clear the history in JavaScript within a Google chrome extension. chrome.history.deleteAll().
Use
window.location.replace('pageName.html');
similar behavior as an HTTP redirect
Read How to redirect to another webpage in JavaScript/jQuery?

to disable back function of the back button:
window.addEventListener('popstate', function (event) {
history.pushState(null, document.title, location.href);
});

Ok. This is an ancient history, but may be my solution could be useful for you or another developers.
If I don't want an user press back key in a page (lets say page B called from an page A) and go back to last page (page A), I do next steps:
First, on page A, instead call next page using window.location.href or window.location.replace, I make a call using two commands: window.open and window.close example on page A:
<a href="#"
onclick="window.open('B.htm','B','height=768,width=1024,top=0,left=0,menubar=0,
toolbar=0,location=0,directories=0,scrollbars=1,status=0');
window.open('','_parent','');
window.close();">
Page B</a>;
All modifiers on window open are just to make up the resulting page. This will open a new window (popWindow) without posibilities of use the back key, and will close the caller page (Page A)
Second: On page B you can use the same proccess if you want this page do the same thing.
Well. This needs the user accept you can open popup windows, but in a controlled system, as if you are programming pages for your work or client, this is easily recommended for the users. Just accept the site as trusted.

You cannot clear the browser history. It belongs to the user, not the developer. Also have a look at the MDN documentation.
Update: The link you were posting all over does not actually clear your browser history. It just prevents using the back button.

Related

Writing to a field On a web Page

I want to create a simple HTML that on load will go to a URL and then put text in a textbox on the page. Below is the HTML that I came up with so far. It will open the page but will not enter the text that I put in.
Any ideas will be appreciated.
Thank you
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.body.innerHTML += 'Link';
document.getElementById("link").click();
</script>
<script>
function displayResult(element)
{
document.getElementById(element).value = "TEST";
}
}
</script>
displayResult("sb_form_q");
</body>
</html>
I tried the above code and I wanted it to put the text "TEST" in the text box on the form.
JavaScript (in a <script> element) runs in the current page. Navigating to a new page will kill the currently running JavaScript program.
If you want to run some JavaScript on the subsequent page then you need to put the JavaScript in that page. You, clearly, don't control Bing, so you can't do that.
It would be a major security problem if you could do that.
The nearest you could come to this would be to write a browser extension that had permission to access bing.com.
If you are specifically looking for Bing searches, you will have to introduce parameters into your href="https://Bing.com/"
example: https://Bing.com/search?q=SEARCHTHIS

Chrome: How to detect history navigation (back button having been pressed)

I know, this question looks quite the same as those asked and reasked regularly, as for example here:
How to force reloading a page when using browser back button?
I need to know if the user has...
. navigated to current page, or reloaded current page (in both cases the page has been normally loaded, I need no further specific action)
. or has arrived on current page using history back or forward button (in these cases, the page is not loaded, just anyhow taken out of browser-cache, and I need to take further actions -the simplest being just reloading the page, window.location.reload(); or equivalent).
I tried the solutions exposed here: https://stackoverflow.com/a/43043658/3872061 and here: https://stackoverflow.com/a/56851042/3872061 as well as in several other places, within Stackoverflow or not.
It works well for Firefox (105.0.1), for Edge (105.0.1343.50), but I can't get it to work with Chrome (105.0.5195.127).
Here the simplest test I could imagine.
page1.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).on("pageshow", function(e){
$("#type").text(window.performance.getEntriesByType("navigation")[0].type);
let historyTraversal = event.persisted
|| ( typeof window.performance != "undefined" && window.performance.getEntriesByType("navigation")[0].type === "back_forward" );
if ( historyTraversal ) { // Handle page restore.
$("#backOrNot").text('User just came back using the history "back" button');
//window.location.reload(); // this is actually the targetted action: reload page
}
else {
$("#backOrNot").text('User loaded the page');
}
});
</script>
</head>
<body>
<p id="backOrNot"></p>
<p>( window.performance.getEntriesByType("navigation")[0].type = <span id="type"></span> )</p>
<p>Just a link from where you can click the history back button</p>
</body>
</html>
page2.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>
From here, try to:<br>
1. Navigate to page1.html<br>
2. Go back to page1.html using the history back-button
</p>
</body>
</html>
With both FF and Edge, when you come back to page1 using the history, the "back_forward" information is available.
With Chrome, you just get the status ("navigate" or "reload") which the page had on the initial load,as if you had never navigated away then returned using the back button.
What have I missed? What am I doing wrong here?
Your page will automatically reload, if you send off page headers to not allow caching of that itemsList.php page. My test code -- see answer here -- should help you understand the concept. I am still trying to find a better way to solve that problem differently. In my case, I am firing off a "page-is-now-loading-spinner" that is not resetting itself to hidden, if the back button (go back one page) is presses.

Page reload by javascript

I have a page which contains multiple tabs. I want to reload the page but it should stay on the same page.
I tried reloading by using
window.location.reload()
But its redirecting to the 1st page which i dont want.
Please suggest me other ways of reloading by using js.
if you can use query parameters in url, then it will work without localstorage, sessionstorage, cache or cookies.
Eg: www.something.com?reloaded=true&tab_num=2
In all tabs we have some fields textfield, dropdown etc. The user has entered some value for those fields. So i want whenever the user nevigates to other tab it should reset the fields.
I would try to go this way.
Most of all, on each tab you have initialization method that set some initial values into your controls. So, you need to:
1. Subscribe on event when tab is changed. Realization of this depends on your plugin.
2. On tab change - re initialize tab and set your values empty again.
This approach will
1. Update only one tab instead of all (this will be faster)
2. Give you control under initialization of each tab.
3. Make a point where you can easily add some additional logic when new requirements come.
Hope this helps.
See attached code snippet. To do a reload you can call it through javascript. I attached the javascript function to a HTML button to demonstrate the function.
This solution should work, since you have already pressed the tab.
If you do not want it triggered by the HTML button you can anyhow use the function and let it run from javascript.
function pageReload() {
location.reload();
}
#button {
width: 100px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<button id="button" type="button" name="button" onclick="pageReload()">Reload</button>
<script src="index.js"></script>
</body>
</html>

JavaScript - prerender another page

I'm trying to make a simple gallery page. The website will always reload after pressing "Next" and I want to make some prerender for the next slide (for better performance and faster load).
At the moment I'm using prefetch/prerender options from HTML5, for Chrome and FireFox:
<!DOCTYPE html>
<html>
<head>
<link rel="prefetch" href="index2.html">
<link rel="prerender" href="index2.html">
</head>
<body>
<img src="big_big_buck_bunny.jpg"/>
Next
</body>
</html>
Is there any other way to cache/prerender next page (in this example - index2.html) ? For example using JavaScript? I'm asking about it because I want to make the prerender work also on Opera 12 and IE (8/9).
Maybe use AJAX. In jquery exists .load() method (http://api.jquery.com/load/)
$('#next').click(function () {
$('#container').load('http://fiddle.jshell.net/webdevem/JfcJp/show/');
});
$('#prev').click(function () {
$('#container').load('http://fiddle.jshell.net/webdevem/JfcJp/show/ #specialContent');
});
Here You have example jsfiddle
If your going to navigate to a new page there's no way to precache html. That's what Ajax is for.
You can Ajax in the html, set the document body to the new html. But if the use reloads the page it will be at the wrong place unless you set a #! In the URL. There's not a lot of nice options with IE8.
Cant you see just preload the images, The page itself isnt gona take any time to build...is it?

Make back button go to a different page

I'd like to JavaScript, or JQuery (or any plug in actually) to force the browser to load a specific page when the back button is clicked.
Basically insert a page into the browser's history.
I've found a way of doing it below, but it seems long winded. Am I missing something?
<html>
<head>
<title>Back button test</title>
</head>
<body>
<script type="text/javascript">
window.history.pushState('other.html', 'Other Page', 'other.html');
window.history.pushState('initial.html', 'Initial Page', 'initial.html');
</script>
Initial page <br />
<script type="text/javascript">
window.addEventListener("popstate", function(e) {
if(document.URL.indexOf("other.html") >= 0){
document.location.href = document.location;
}
});
</script>
</body>
</html>
In general, you can't modify the history of a browser, this is a major security feature. If you've found a way around it, that might work well for you, but keep in mind it might upset people. I know if I was on a site that hijacked the back button, I wouldn't be back. Instead, use better UX to give the user links.

Categories