Here is the flow of events on my web site
Go to [http://example.com]. The web page shows the content from http://example.com/foo even though the browser address bar says http://example.com
The text on the web page asks the user to check out bar. The user clicks on the link and is taken to
[http://example.com/bar]
The text on the web page asks the user to check out baz. The user clicks on the link and is taken to
[http://example.com/baz]
The text on the web page asks the user to check out qux. However, the user clicks on the browser back button and is taken to
[http://example.com/bar]
The text on the web page asks the user to check out baz. However, the user clicks on the browser back button and is taken to ... FAIL! This is where the browser bar should have become [http://example.com] but it doesn't change at all.
The code implementing all this is rather straighforward
var goTo: function(uri) {
get uri via XMLHttpRequest
swap content
history.pushState(null, null, uri);
}
window.addEventListener("popstate", function(event) {
var uri = location.pathname.replace("\/", "");
goTo(uri);
}, false);
Problem solved. See HTML 5 History - window.pushState not working for details, but the short of it is that I can't have history.pushState() inside a popstate event. Once I isolated the two, it is working great.
Related
Scenario:
I enter a web page
Page shows desired content for a few seconds
It reloads and opens another web page (within the same tab, no new tab is fired - usually an ad)
I press the back button and the desired page opens again
How can i block this behaviour having only the desired page displayed, without reloading.
What actually causes this? I have some extensions for blocking redirects, but they work only on new tab redirects.
I am also a software engineer so a technical explanation would help me, if possible.
I am making a project in school where we need to make a small website on a specific topic, now I want that when the browser's back button is clicked. I come to my home page which I have included in the code provided above, Please help me!
i dont know if it is true or not , but i tried a simple code now , so when user opened our first page , current page URL will save in your session or cookie . after that in second page when user clicked back button you should save that page URL in session again . when user clicked back you have 2 URL and you can check : if these 2 URL matches it means user is in same page , but else user clicked back button . and you must check this in all your pages or in pages you want .
if ($_SESSION['link1'] === $_SESSION['link2']) {
$backClicked = false;
}else {
$backClicked = true;
header("location: Your Home Page");
}
There is no way to control the back button in a browser only using HTML and CSS. You will have to use JavaScript.
With JavaScript you could look to use history.pushState() or history.replaceState() to modify the history of the browser. Adding the homepage to the history, so that when the user clicks the back button that is where they will go.
You can read more about the History API here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API#Interfaces
What I would like to do is open up a web page without it showing, inject javascript into it, and then proceed into my app.
The secondary page is a login page that I need to use but I don't want to show it in my app.
Therefore, I would like to open that page, use it, and most importantly, get the login information back, all without seeing the external login page.
I have my own login page to gather the information and a "login" button to kick it all off.
Here is what I have so far:
login(){
const browser = this.iab.create('https://authn.exampleLoginPage.com/login.aspx', "_blank","hidden=yes,location=no");
browser.executeScript({code:'document.getElementById("uxUserName").value="myUserName"'});
browser.executeScript({code:'document.getElementById("uxPassword").value="myPassword"'})
browser.executeScript({code:'document.getElementById("SubmitCreds").click();'})
.then( (value) => {
console.log("ob2 is ", value);
})
this.nav.setRoot(TabsPage);
}
login() gets called by clicking my login button.
I am testing this in chrome by running ionic serve and I'm encountering a couple problems. First, the code pulls up a new tab with the external website. Second, the javascript doesn't seem to be firing. I never get to the console log in the promise. I don't know what I'm missing here.
What I am doing is sending a user a link to a page but I want to close that page once the user submits the form.
To do this I have to open a new window for the user
//this always opens a new tab not a new window
open in new window
after the user opens the link I don't want to close his/her browser (from where the user opened the link). All i am sending is the link in a e-mail.
This is not something you have any control over.
Given a target attribute indicating that a new browsing context should be opened, the choice between opening a new tab or a new window is a user preference and not under the control of the page author.
If you were using JavaScript, then you could specify the dimensions of the window using window.open() and a side effect of that would be to trigger a new window instead of a new tab. Since you are working in an email, that isn't an option. Email clients strip JavaScript from HTML formatted emails.
When I login to a site, which is a "learning system" at my university, I have found that I cannot open a new tab with the same site open. When I do so, somehow the site is aware and displays the following message?
How on earth does the site know what tabs I have open on my computer? As far as I know, the front-end code shouldn't have any access to my private browser information. What accessible information could this site be using to determine that I have another tab open already?
I am accessing the site using a private computer, and the site being accessed isn't on a local network, it is being accessed through the internet. Therefore there is no internal monitoring software that could be causing this. I am using Google Chrome 24 Beta for Mac.
One way to do this is via cookies and ids. Firstly, you are logged in to the site and have a session on there. This is managed using cookies; whenever you visit a page on the site, your browser will send a cookie which normally contains some kind of id. That way the server can identify any request coming from you, is really from you. So, in this case, both your original tab and your new tab will send the same cookie.
Secondly, it can also add another, different id (call it the page id), to any link or form you submit on the site. So a form on a page might contain the id 1234, and any links will also contain that id. Each new page you visit might contain a new id. So at any point, the site knows that next request from your browser (identified by the cookies) should also contain this other id. If you navigate around the site in a normal way, clicking on links, submitting forms, this will be true and all will be good.
Cases when your next request would NOT submit the expected, second id are:
you hit the back button (you would be sending an old page id)
you open a new tab (this depends on the browser, but if it opens the
same page you are already on in the original tab, it would be sending the current page
id, not the next page id, which the server expects)
Either way, you send a request with a page id the server doesn't expect and it can make a best guess as to what you did.
They track your mouse cursor movement while visiting their website. It's a great way to get the attention of a visitor. They put some query programmatically when you move your mouse and when you wish to close.
It's good UX.
Another way the site may know that you have another tab open is through broadcasting channels. To put it simply, broadcasting channels are a means for windows, tabs, etc; to communicate (correct me if I am wrong). Here is a simple implementation:
//Channel to post and receive messages from
const bc = new BroadcastChannel("Check-tabs");
//On message receive
bc.onmessage = (event) => {
if (event.data === `First tab?`) {
//Post that there is already a tab open
bc.postMessage(`Tab already open`);
}
//Check if a tab is open
if (event.data === `Tab already open`) {
alert(`Another tab is already open.`);
}
//Posts message to check whether another tab is open
bc.postMessage(`First tab?`);