Change URL Path when refreshing site with JavaScript - javascript

I'm searching for a lightweight way to change the URL by refreshing the site. Or detect when the URL is an error 404 and redirect it immediately back to the homepage.
I saw some ways with jQuery but I really just want to use something lightweight.
more info:
I'm building a onepager Portfolio which changes sites immediately without refreshing. but I want the to behave like a normal page, So I found a way to change the URL Path so when I click a link it also shows on which page I am in the URL.
The problem is when I refresh the page it wants to load the fake URL which is obviously not existing. So I need a way to change the URL when I refresh to a wrong URL Path.
I will be super thankful if someone has a solution for me because a dream would become true.

when you refresh, browser sends the URI to server to parse it, so there is no way to redirect it client side(ie. javascript)
you have to set up redirect on the server.
what backend are you using? are you using nginx?

You might be looking for this https://es.wikipedia.org/wiki/Single-page_application
Otherwise if you want to set it up a simple page all yourself I would just use CSS visibility in your logic while changing the URL.

Related

url of current page and previous page

I'm trying to do something so simple, yet it seems like there's no way to do it. Im making a chrome extension, I want the extension when its clicked on to take the full URL of the current page as well as the page before it, that's all. document.referrer doesn't work all the time, and if it works it doesn't return the full URL, it takes out the parameters. I need the full URL of the referrer page. Is there anyway to get that, maybe using chrome APIs?

History API - tell browser to stay on index.html, regardless of the url

I am making one-page web on my school project. I am using very simple history API, to just change the URL so user thinks he is on another page (but I am hiding and displaying different elements on a page)
It looks like this:
www.mypage.com/main
www.mypage.com/slideshow
When I am using the application with back/forward history buttons it works fine, but when I want to reload the page, the browser tries to load that fake URL and that cause a crash of course. How do I manage to stay always on index.html no matter what url is displayed to the user please?
I tried to manage this with htaccess, but I wasn't sucessful
It seems you are not using a back-end, which is the only way to achieve your desired result. (If my assumption is correct) The browser gives error (cannot load /slideshow after refresh) because it is trying to fetch that file (from you local machine) but that does not exist. SO answer explaining this well.
So in your example you should instruct the back-end to render the same view for all routes (using a wildcard), and do the displaying on front-end based on the given url.
You do not have to use React-Router, but instead create a router-handling function which runs at each refresh (that is, when your javascript is loaded) which tells your page what to render based on what route (or url, call them as you like).
(you will know that the javascript will be run for every url, because the back-end already handles routing with the wildcard, *)
If you want to rewrite all requests to only one URL, you can do so with just
RewriteRule ^ /index.html [L]

Javascript History.Go default to page if not current site

I'm using the following history.go in search results with acceptable results cross-browser. I'd prefer a PHP solution but this filled the needs until I realized a larger issue.
Return To Search Results
My only issue is when the viewer comes from a page NOT originating from the search page http://www.domain.com/search/
Is there a way to modify this to use the simple script but if the previous -1 history is NOT the search page URL to redirect to the search page URL if the href is clicked?
the php variable $_SERVER['HTTP_REFERER'] will give you the page the current tab / window was on before it got to you.
this value might be empty if someone opened your page directly by typing in the url or by preventing this value to be transmitted to the server.
all in all there is no way to access the browser history at all due to security reasons.
$_SERVER['HTTP_REFERER'] is all there is that you could make use of. sorry to disappoint you.
btw.. its commonly used in hot linking prevention through out various blogs so people cannot "link" to pictures and files etc.
in your case you just need to figure out if the url equals the search site.

In a Chrome Extension, How can I change the shown url without refreshing the page?

I am creating a chrome extension that modifies the url for certain pages. I know I can use
chrome.tabs.update(tabId, {url: newURL})
to redirect to another url entirely, but is there a way I can change the visible url without chrome actually going to that page?
(I'm using a proxy server to get to certain pages, and it'd be nicer to look at if I didn't have to see the proxy's url in the omnibox, just the actual site I'm viewing.)

How can I return home from an a Rails Kiosk Error page without an adress bar or keyboard

Im hosting a rails app on heroku. It runs on the client on a touchscreen with Google Chrome in Kiosk mode, so no browser chrome or keyboard. The login/home page is different for every kiosk.
Error pages are static assets, so I'll have to do this with Javascript. If there is an error I want to display a button that will let the user get back to the home page.
I can't just use a back button script b/c of the potential for multiple errors. I thought about using localstorage to store a reference to the home page, but the error pages are served from a different domain so they wont have access.
Any ideas?
Edit:
This works in Firefox onClick="window.home();" If I set the browser's home page to that particular kiosk. But apparently isn't supported in Chrome. Is there any way to store some kind of variable that any domain can access on a per browser/kiosk basis.
I think you're making this too hard. You already have the information you need to go back stored in "local storage" -- the browser history. Simply use javascript to look at the history and go back as far as you need.
As far as returning to the home page, isn't the home page a well known URI? What's wrong with go home?
Update
Isn't the home page always going to be the first page in the history? You seem to be saying that you're in a situation where you want to return to a page for which you don't know the base URI, don't know how you got where you are, and don't know where you started.
I suppose you could put the place you'd like to go into a cookie, but if you don't even know the base URI, how would you retrieve it?
I'm beginning to think the real answer is "you need to rethink your design, there's something deeply wrong."

Categories