I'm using history.pushState() to show a URL that indicates the dynamic content (an article) currently displayed.
If I return to my home page (index.html) after looking at some dynamic content and then try to visit another page other than index.html, my nav links become broken.
On mysite.com/articles whenever a new article is chosen I call history.pushState(null, null, '/articles/' + <articleID>);. This works correctly as I'd expect. The displayed URL becomes mysite.com/articles/articleID.
Current Behavior:
At this point, if I click a nav link to go back to index.html the page successfully changes to index.html but the displayed URL becomes mysite.com/articles/index.html
Expected Behavior
The displayed URL should become mysite.com or mysite.com/index.
So is my problem:
The way I'm using history.pushState(); or
The way that my navigation links are configured?
Your generic redirect method redirects everything to /articles/<articleID> including the link to home page (as you mention ...articles/index.html).
While your app from a reason can resolve articles/index.html to home page (I'm not sure why). From now on, all the relative link (which not start with /) will be relative to the current path - /articles/index.html.
In order to fix this, you should exclude the homepage links from the generic redirect mechanizm and redirect to /.
Related
I am building a progressive web app (PWA) that is usable offline.
On the page, I use the link to navigate back to the previous page like this.
<a href="/alink">Back<a>
It doesn't work but causes the No Internet.
On the other hand, the window.location.href does navigate to the previous page even when I'm offline.
Why does this happen? What is the difference between a tag and window.location.href?
The a tag will redirect to the new page by going forward to it.
However the window.location.href will just change the route in the URL. But not actually redirect the page.
If you want to go back, try using the window history. As this is what things like react router use to move around different paths.
https://developer.mozilla.org/en-US/docs/Web/API/Window/history
Hope this helps.
The a tag always redirects you to a new page which is required a network connection. If you want to get back to the previous page with the a tag. You can use this
Back
It will navigate you back to the cached page that you loaded before going offline.
So I'm struggling to figure out how to do this and I can't find any answers. I've been searching the whole web for the last two days but haven't found an answer yet.
The goal: I want a dynamic navigation for an admin/dashbaord website that only updates a div (the main view) of a website and updates the url accordinly (eg. pressing on the
welcome menu button loads the welcome.html into the
#main-view and the url updates from
samplewebsite.com/dashboard to
samplewebsite.com/dashboard/welcome). Then on refresh, stay on the same website with the loaded content (eg. samplewebsite.com/dashboard/welcome still has welcome.html in the #main-view but doesn't actually navigate to the welcome.html file.
Examples: mee6.xyz/moderation or contacts.google.com
What I've already accomplished: Loading welcome.html into #main-view and updating the url with /welcome by clicking on a button by doing this:
HTML:
Welcome
JS:
$('#welcome-button').click(function(event){
event.preventDefault();
var href = $(this).attr('href');
$('#main-view').load(href, function() {
console.log("Load was performed.");
});
history.pushState(null, "Welcome", href);
})
I'm using Flask with Python where I have the following routing set up:
#app.route('/dashboard')
def dashboard_server():
return render_template("dashboard_server.html")
#app.route('/dashboard/welcome')
def welcome():
return render_template("welcome.html")
The behaviour I experience: When I click the welcome menu button, #main-view updates with the welcome.html and the url updates. When I
refresh the browser though, I takes me to the actual welcome.html which makes sense, since it's pointing to this file. That's how I loaded the html into the div in the rist place. But how can I prevent that?
Also the navigation (back/forward) doesn't work but that's another problem I'll
adress after I got this figured out.
What I behaviour I expect: I want it to stay on the main page with #main-view still being filled with welcome.html. Then when
pressing another menu button I want it to update the div and url and
on the refresh be on the same page with the updated div and so on.
A visual explanation:
I'm grateful for any kind of help. Thanks a lot in advance!
This seems to be a pretty hacky way to do routing with JavaScript. But here is how I think your problem can be solved:
When user refreshes the page on this url: /dashboard/welcome, you should run some js that would grab the location.pathname and know that the url must not have the welcome part and would redirect the user back to dashboard but you would have to add an url parameter to let the js on dashboard page know which page's content to load in the #main-view so from dashboard/welcome you can redirect the user to an url similar to this: dashboard?page=welcome. Now through js on the dashboard page, you need to grab the url parameter page and load the content of the welcome.html which you already have achieved. Now you should change the url back to dashboard/welcome from dashboard?page=welcome and push the url to history too.
This approach might have a lot of scenarios where the stie might break. One would be: when your js is evaluating things on dashboard/welcome page, the welcome page might have already been loaded, so you would have to show a loader or similar to prevent the flash of incorrect content.
I can't think of more scenarios from top of my head. I would suggest you to use some sort of framework/library to take care of routing for you. CRA (create react app), Next.js, Gatsby.js, Nuxt.js are all great libraries that can handle routing in a very robust way so you don't have to worry about that and can focus on the content and styling your applciation. Except CRA, I think all other libraries support static site generation which gives you better SEO overall. But to use these, you need to know React.js or Next.js at least. Best of luck!
I'm trying to figure out how to refresh the contents of an iFrame on a page. I did quite a bit of Googling and hunting around through old posts, but all of the solutions offered are for reloading an iFrame to the initial src URL, and not the active URL.
For example, I have an iFrame that contains my Freshdesk client portal embedded into my main website. If I click around to a couple of different pages within the iFrame, I then want to be able to intercept a page refresh and simply refresh the iFrame to the active page.
Current Behavior:
Freshdesk Home --> Knowledgebase --> New Ticket --> Refresh --> Back to home
Desired Behavior:
Freshdesk Home --> Knowledgebase --> New Ticket --> Refresh --> Back to new ticket screen (the last page visited in the iFrame before triggering the refresh)
The refresh doesn't have to be triggered by an f5 refresh, I can use an inline button on the page, but it needs to reload the iFrame to the same page that it was last on, not the original src URL. I tried the following code, but it refreshes to the home page of my Freshdesk every time:
document.getElementById('iframeid').src = document.getElementById('iframeid').src
and
document.getElementById('some_frame_id').contentWindow.location.reload();
So, how can I refresh my iFrame without restarting back to the original src URL?
You can use the onbeforeunload event https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload to detect that the page is going to be closed or refreshed.
So you can then compare the active src and the original src of the iframe to know if the user navigated to some page inside the iframe.
Then choose your favourite message passing system to make sure the portal has a way to know that src after it loaded again: url parameter, local storage, cookie, something else...
With the help of Shilly and a bit of brainstorming, I figured out a solution to my problem, and am posting it here for anyone else in my situation. Turns out that Freshdesk (the website inside the iframe) allows you to use custom javascript. Using this functionality, I came up with the following:
1) use parent.postMessage on first page load to send the URL of the currently active page to my main website.
2) use sessionStorage to store the URL of the current Freshdesk page on my website
3) on first page load of my main website, check to see if a sessionStorage value is set, and if so, set the iFrame's src to this value.
It's not quite a true "only on refresh" solution, however it does make the last iFrame page visited persist throughout the remainder of the user's session, which means they won't lose their place if refreshing or navigating away temporarily. Thanks to the use of sessionStorage, this will also reset back when the user closes the page, meaning on their next visit they'll restart at the Freshdesk home page (or whatever other website you're hosting inside the iFrame).
I am currently developing a website using bootstrap, I am using the bootstrap tabs feature to navigate between pages without loading any other html files, but I am also trying to allow URLs to point to certain pages, here is my issue..
I can set the URL to go to the said page using
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
But this won't show any of the content which is on the page unless you navigate out of the page and back in, basically if I put text in that tab, it wouldn't show, but if I opened another tab, and then went back in to the page I linked to it would work fine.
Here is a link to what I'm working on: http://xuz.co/dev/takistanmain/
Navigating pages works, but when I use a url like http://xuz.co/dev/takistanmain/#about it will show a blank page as you can see.
Let me know if you need anymore info and I thank you for your assistance!
Is it possible to have a button on a webpage that will be named 'Back' and do window.history.back() if the user has navigated to the page from another page on your website and otherwise have some other title and be a direct link if the user navigated to your page from another website or went to the page directly.
Google plus on mobile seems to have this behaviour. When you click on a post in your stream then it has a 'back' button on the post page. However, if you go to the post page directly then it has a 'stream' button on the post page.
This seems tricky to implement because you don't have access to the urls in window.history.
Have you any chance of adding an ext lib like BBQ? It's a package used to manage the history behavior in your page.
I have done this before. You can do this with an anchor in the link. The anchor needs to have every get parameter of your application (i.e. application state) stored. Your application should be able to parse the anchor. To intercept the back button look here: stackoverflow.com/questions/136937/is-there-a-way-to-catch-the-back-button-event-in-javascript.
#benmmurphy I also had the same problem, then I used the following, which worked perfectly for me. You have to paste it on the page, from where you want to go back.
GO BACK
Hope this will help you.