Trouble with creating web pages - javascript

I'm having trouble with creating a web page with following features:
When users visit my page, their address bar will display ONLY URLs having no accompanied ID such as http://127.0.0.1/client
Whenever they REFRESH the page, real requested URLs will be attached with IDs. For example: http://127.0.0.1/client?id=3
Previously, I tried to use hidden input tags, but it's fruitless. Any idea?
My mark up is below
<html>
<head>
<meta http-equiv='refresh' content='1,url=/client'>
</head>
<body onload="JavaScript:setTimeout('location.reload(true);',0);">
<input type="hidden" name="id" value="3" />
</body>
</html>

You can hijack page refresh with something that POSTs to your page.

You could use pushState to change the url on load like:
function updateURL (){
window.history.pushState(null, null, "?id=3")
}
window.onload=updateURL;
You could also accomplish something similar using location.hash as pushState is not supported on some old browsers.

Related

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.

Open multiple tabs using JavaScript on Bing for Mobile

I know how to open Multiple Tabs using JavaScript but my solution does not seem not to work on "Bing for mobile".
I'm trying to achieve the following.
Whenever a user clicks on the Call Now button, a call to specified number should be made and the page should redirect to some other page.
For this, the sample code I used is,
<a id="makeCall" onclick="callNRedirect()"> <!-- Target blank, if you want to open in new tab -->
<img alt="Call icon" src="https://static.wixstatic.com/media/14e16f_9f3a8d8153914af3b9ee7c1bb7218506~mv2.png/v1/fill/w_354,h_212,al_c,usm_0.66_1.00_0.01/14e16f_9f3a8d8153914af3b9ee7c1bb7218506~mv2.png" style="width: 170px;" />
</a>
<script type="text/javascript">
let callNRedirect = function(){
makeCall().then(function() {
window.top.location.href = 'http://www.business-insurance-now.com/call2';
});
}
async function makeCall() {
window.open("tel:989898", “_blank”);
}
</script>
The thing is, it is working fine on Webkit based browsers, but Bing for mobile and Microsoft Edge are not working as expected.
Live link for the demo: https://codestroke.blogspot.com/2018/10/samples-samples-everywhere.html
The Bing app won't open the dial app.
The Edge app won't redirect to the page.
Update: Looks like the Edge was blocking the redirection, so it is kinda solved. Not sure of bing though!
Below is a simple example to open 2 links using HREF.
<a href="http://Microsoft.com" onclick="window.open('http://Bing.com');
return true;">multiopen</a>
If you want to open more then 2 links then you can try to refer example below.
<!DOCTYPE html>
<head>
<script>
function demo()
{
window.open('http://yahoo.com');
window.open('http://bing.com');
window.open('http://microsoft.com');
};
</script>
</head>
<body>
multiopen
</body>
</html>

JavaScript - get content of popup window

I'm trying to read the contents of a document that is loaded via window.open:
<!DOCTYPE html>
<html>
<body>
<button onclick="openWin()">Open "newWindow" and read its content</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("http://www.google.com/",
"myWindow", "width=400, height=400");
myWindow.opener.document.write(myWindow.document.body.innerHTML);
}
</script>
</body>
</html>
How can I read the contents of a document after loading it via window.open?
I've tried this with setTimeout function but it didn't work.
This is working :
myWindow.opener.document.write("Done!!");
You can't do that if the document you're opening in a new window is from a different domain (for example, yoursite.com opening a new window that loads google.com). This is a security restriction known as same-origin policy. More information: Same-origin policy (MDN).
Hope this clarifies things a bit for you.
It can sometimes pay to try a few things.
My isp recently added a time stamp to their login form which prevented me using my local post form with preloaded name and password.
I looked for ways of downloading their login page and copying the time stamp to my local form. This would have been easy with almost any script except JavaScript.
Frames failed as they use the X-Frame-Option set to 'Deny'.
To my surprise I was able to copy the time stamp to my local form from a pop-up window containing their form. This now works well. The only slight imperfection was having to use a fixed timeout rather than detecting pop-up page fully loaded.
Here is the disguised full solution:
<html>
<head>
<base href='https://www.isp.net'>
<title>isp</title>
</head>
<body onload="w=window.open('login'); setTimeout('document.f.time-stamp.value=w.document.forms[0].time-stamp.value; document.f.submit(); w.close()',2000)">
<form name=f action='login' method=post>
<input type=hidden name='user-name' value='my-name'>
<input type=hidden name='password' value='my-password'>
<input type=hidden name='time-stamp' value=''>
</form>
</body>
</html>

How to clear browsing history using 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.

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?

Categories