As titled,
I've a webpage which has multiple pages on it. The page was originally a single page app created using jQuery before I moved some of the contents into separate files, and load it dynamically using a jQuery templating plugin. The page starts at default pathname ('/') and whenever the content change, the pathname on the URL will change too.
function goTo(page){
// Changing URL without reloading the page (to allow changing the URL
//state without changing the page)
if (page !== 'main'){
console.log("Yes it is not main!");
window.history.pushState("", "", "/"+page);
} else {
console.log("Yes it is main!");
window.history.pushState("", "", "/");
}
// Set page template
$('#main').loadTemplate('pages/'+page+'.html');
}
The above is the method i used to change the URL and content whenever user clicks on the link.
The problem that I encounter is that, whenever I refresh the page when there is a pathname on the URL, the page will return 404 error (not found) and it will return an unknown blank html page that is totally empty (no css and script loaded).
For example, the main page URL is http://localhost:8000, and if I clicked to page A, the URL becomes http://localhost:8000/pageA. However in pageA, when I refresh the page, it will return blank. Only if I reset the URL to http://localhost:8000 then the page will refresh normally.
Is there a way to fix this blank page and pathname problem? Like changed the pathname before the DOM loads?
Thanks
Using window.history.pushState you will replace the browser location, and by hit page refresh you are sending request to the server, and you are asking to serve the page which name is in the location bar. However the page does not exist on the server so the server answers with Not found and that's correct behavior.
You have two options:
Implement the page also on the server side
Use client routing using hash (there are a lot of libraries for that, for example http://projects.jga.me/routie/)
Related
The website that I'm editing right now, every link at switching pages has hash symbol. And the page doesn't refresh everytime I switch and sticks on the last position of the site.
Where can I find the code and remove the hash from the url.
Does removing it will make the pages refresh everytime?
Vue is a Single Page Application framework. That means you don't have full page loads, instead page content is swapped out dynamically on the client.
Assuming you're using vue router, you can switch to historyMode which won't use # for urls and instead real urls.
From the docs:
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
This will get you "normal" urls as seen anywhere else on the web.
I have a page that is loaded inside. The application including this page is located on another domain. So the domain of my page and the application rendering it inside an iframe are located on different domains. The page inside iframe reads the URL it is loaded from to store in the database. The page loading has a hash in the URL.It is like:
https://www.somedomain.com/organizers/list/#type=current&sort=bydate
I am reading the URL from mypage. It is located on:
https://www.someotherdomain.com/organizers/#sample
var _url = document.referrer
The above code gives me the URL but only till "https://www.somedomain.com/organizers/list/", "#type=current&sort=bydate" is missing. I need that else this code is of no use to me. Is there a way I can read the complete URL without missing any segment?
like this
var _url = window.location;
This is by design. The browser will give you the referrer which is the URL where the user came from, however the #hashmark is technically (by its original design) a sub-navigation concept within a page, thus not passed on to the next page load.
If you were on the same domain as the parent page, you could access it via the
window.parent.location.hash
however since you are from a different domain this access will likely be blocked for security reasons.
I have two websites www.mywebsite.com and www.otherwebsite.com. I use iframe to redirect mywebsite.com to otherwebsite.com. Is there a to change the path of url on page change. For example when a link otherwebsite.com/contact.html is clicked the frame adds /contact.html to mywebsite.com making it www.mywebsite.com/contact.html. I tried adding the code below to the page but it doesn't seem to work on the frame.
history.pushState(null, "A new title!", "contact.html")
what you trying to do is not possible without a server side language (for example php).
this is because you need to define filename as a variable for your frame to load it with another site.
but you can do it at some static way like making the real contact.html and code it with a frame that shows contact.html for another side ... but i dont think that would be a dynamic way without any server side coding...
all. I'm using livereload which is autoreload html,js file tool.
It is very convenient.But I have one problem. I am making single web page app which is depends on hash change website.
Like this . /#/home, /#/product. So when reload browser at /#/product it reloads and back to root / url.It's difficult to debug.
I want to save hash location when reload browser. If I reload /#/product page , and I want to stay still at /#/product page.
Do you have any idea? Thanks in advance.
You are not using a real hash in /#/home. Use /#home or /#product and it will persist on reload.
When your page is loaded, you need to have javascript code that runs that examines the current hash value and constructs the right page state that matches that hash value. Then, when your page is reloaded, the base page will load from the server and then your code will run and see that #/product hash value and construct the appropriate page for that hash value.
Is there any way to follow a URL in JavaScript without setting the document.location.href?
I have a page that displays a list of objects and each object may have a file download associated with it, which is accessed via a hyperlink. Clicking the link initiates an AJAX request that ultimately leads to a transient file being generated that can be referenced by a unique and temporary URL.
At the moment when the AJAX call completes, it simply sets the document.location.href to the temporary URL and the file download is initiated. Of course this has the side effect of changing the URL in the browser's address bar, so if the page is refreshed the file is downloaded again rather than the object listing page itself getting refreshed. I guess I could set the URL back to what it was before, but that feels a bit hacky.
Incidentally, I'm using the Prototype JavaScript framework.
you could open a new window with the new url? or try setting an iframe's url to the new url, both should present a file download (the latter being the better option)
You could use a hidden iframe - set the src of that to the file to download.
If you're doing all this just to trigger a file download, it sounds like a good application for using a hidden Iframe. Set the SRC of the Iframe instead, so you don't have to mess with the main page.