How to Detect Back button click - javascript

I am working on an HTML website where I have 4 divs in an index.html page.
Earlier on clicking the div section used to expand it and the other section became smaller in width.
Then the client asked to make sure that the URL was changed when we click any of the div.
Suppose we click the div called test. The page url shoul become /test.html, without the page reloading. I have implemented this functionality using the history API.
Now when I click on the test div and the url becomes /test.html and then if I click a link, it redirects to another page.
From this page, if I click on the browser back button, then it takes me to /test.html which does not exist and we get a 404 error.
I tried making a redirection page called test.html which redirects back to the index.html page, but we get a blink while doing so.
What I want to ask is whether there is a solution for this problem?

If you have mod_rewrite enabled on the web server, you could set this up as a URL rewrite rule.
RewriteEngine On
RewriteRule ^test.html originalfile.html [NC]
This will redirect test.html to the original html file when the user presses the back button and navigates to test.html while the browser address bar still displays test.html. From here, you should be able to detect the address in javascript and display the appropriate div.
(Note that you will probably need to modify the above rewrite rules depending on how your server is configured. For more information about creating rewrite rules, see this link.

Related

Creating a link to another website and loading a modal

I have just seen a website that can create a link to any website and display a modal when the link is clicked on someone else website. I was just curious if anyone knows how this is done?
Here's the test link that does this:
https://twitter.com/workladuk/status/955752813333766144
Here's how this scheme works:
Notice that clicking on the link in the tweet mentioned in your comment (seen at https://twitter.com/workladuk/status/955752813333766144) doesn't actually take you to StackOverflow, even though it appears to point to this article.
It takes you to http://readr.me/vc-25, a totally different site. This is clear from the browser address bar.
By inspecting the HTML of that page using the browser developer tools, we can see that it actually is a totally different page containing an overlay with the signup form, and also an iframe containing the page the user was hoping to visit, giving the illusion that they're on the page and just need to close the popup to view it. Once they do close the popup, it actually makes a whole new HTTP request and redirects the user to the real page.
Interestingly, this was even more obvious given the example you used, because when going to the site with the signup form, the StackOverflow page displayed underneath it showed I was not signed in, even though I was signed in to SO in other tabs in the browser. This will be because running it in an iframe caused it to be run in a separate session, in which I was not signed in. This was a another big clue to show that I was not on the real Stackoverflow page.
So to be clear, it is absolutely not making a popup appear on another website, because that's impossible without hacking it. Instead it's actually creating another page containing the signup form, redirecting the user to that page and embedding the "real" page within that to create an illusion.

Dynamic Website - load almost all of the page with out reload and change the url

I am developing a website and having trouble figuring out what I can use to accomplish this requirement.
I need a website where links in the document load the contents of page that was clicked.
I am thinking about using angular.js but how might a user get back to the back by entering it into the url.
Example of what I am looking for:
You are on www.example.com
You click the link to www.example.com/profile/1234.
The page doesn't reload but loads the contents of the new page.
The static element at the bottom of the page doesn't change the the rest of the page does.
The url has also changed and you have the history of being at www.example.com
You can also load the exact same page by pasting the url www.example.com/profile/1234, it also has the same bar at the bottom.
You could also say I need something similar to youtubes website. You click a link and it loads only some of the page. But if you re-enter the url you get all of the page.
Thanks.

Same Domain link is loading in top iFrame and not on whole page

We have a header on our main website (Site #1) that is then fed to another website (Site #2). The header has a "My Account" link that is supposed to belong to site #2. When you click on from site #1 it loads full page same window correctly. When you go to site #2 and click the button it loads ONLY in the iframe at the top of the page (essentially the same area that is holding the header).
Site #1 is www.saclibrary.org
Site #2 is www.saclibrarycatalog.org
The original link that is supposed to be there for the my account link is https://find.saclibrarycatalog.org/iii/encore/myaccount
To get it to work for now I had to change the link to a redirect page on the first site, then have that page auto-redirect back to the second site's my account page. The urls in the iframe work correctly for any link that is not the same domain (saclibrarycatalog.org). That's why my work around works, but the original link in the same domain does not.
I've found a lot of places online telling you how to make a link load only in the iframe and not in full same page, but not the other way around, and I can't seem to reverse engineer any of those tips. Another web developer I talked to said it was a browser issue, but we have not done any updates to the browsers on the computers here. We are running firefox 25.0.1, and IE 9.
Thanks in advance!
You should really modernize your method. Using php, asp or cgi (depending on your hosting server capability) will allow you to split your header from the rest of your page (as for the footer and any other part). So loading your page and checking the requested URI, you can decide what is shown, when, and even don't load certain parts of your page.

jquery mobile preventing page render

I have a very simple jquery mobile application:
/index.html (contains a link to home.html)
/home.html
I want home.html to only be visible for users who satisfy a prerequisite (e.g local storage should contain a logged=true). Otherwise I want them to be redirected back to index.html. Of course I want this to happen either when the user clicks on the link from index.html or if he/she navigates directly to home.html via the URL.
In order to enforce this I have the following in an external script which is inluded in all pages:
$(document).on('pagebeforecreate', function(e) {
if (!userIsLoggedIn() && e.target.id=='home_page') {
$.mobile.changePage('index.html');
}
});
Note that my home.html starts with <div home-role="page" id="home_page">
This code works but the problem is that the user gets to see the contents of home.html for an instant. I've seen in the API that pagebeforecreate is the earliest event that is being called on a page transition. Calling the changePage though doesn't stop from further events to being called on this page that I don't want users to see.
How can I completely stop the rendering of home.html and immediatelly redirect user back to index.html?
follow is just idea adding your code.
make a page invisible by default in "home.html".
check logged in when "home_page" is at 'pagebeforecreate'.
if logged, make page to be visible.
if no, change to index.html
but, this is just hide a page to unlogged person, not really secure.
it's still opened to get a HTML Plain code from URL.
This will help you to prevent jquery mobile from rendering page.
jQuery(document).on('mobileinit', function(){ jQuery.mobile.autoInitializePage = false; });

How to 'un-cache' ajax-loaded html when user leaves page

Right now, when a user clicks on a link on my site, I use ajax to only replace the content in the main frame (the header and a sidebar need to keep state across pages, so I don't want to reload them). I use pushState and popState to alter the url bar.
I explicitly do not cache the ajax content and my site works fine--but it's a bit too slow-feeling, particularly on 'back' commands.
If I do cache the xhr html requests, then the site works well internally. However, if a user enters a new URL and leaves the site, if he/she hits the 'back' command, only the unstyled, header and side-bar-less main view content will be pulled from the cache and the site won't display properly.
Is there any way for me to have caching internally but flush the cache if the user leaves the page?
I think I understand your description now.
When I visit /page1.html on your site then the downloaded HTML has main content + header + sidebar.
When I click a link to visit /page2.html, AJAX loads the page and the downloaded HTML has main content ONLY.
So, at this point the cache contains a full /page1.html and a partial /page2.html
Now, when I leave your site and then return with the back-button, the browser grabs /page2.html from cache. But that is only a partial page, and your site "breaks".
Ideally you want the browser to grab partial content only when requested with XMLHttpRequest.
Also, it would be nice if both the partial and full pages could be cached.
pjax addresses this issue by appending a _pjax=true param to the URL query in the AJAX request. I think this should just work in most scenarios.
NOTE that you don't add this param to the URL that you pass to pushState().
An alternative to this would be to ALWAYS download the full page, and then extract the #main-view when using AJAX.
Of course, you could make this someone else's problem by switching to PJAX (you'll need to use the fragment option).
Another JS lib that handles pushState() for you is my HTMLDecor project. With HTMLDecor, your pages only contain main content + a <link> to another (presumably shared) HTML page that contains the header / footer / sidebar. HTMLDecor adds these to the page from within the browser. When the user clicks on a link to browse to another page, HTMLDecor uses AJAX and pushState - no configuration needed. Of course, if the browser doesn't support pushState then a normal link navigation occurs.

Categories