I am trying to implement a single page application in knockout and at a point I am clicking a link to go back to a page. The URL is changing but it is still remaining on the same page. Only on refresh it is going to the required page.
I am using window.location.hash = "#/home" to set the link in the URL.
Any idea what can be done so that the page actually changes according to the URL.
Use event onhashchange like,
window.onhashchange = function(){
// change your page content here
}
Related
I have a jQuery Mobile application I'm developing. jQuery Mobile uses pushState by default to allow the browser's back button to work dynamically.
Now, my application is meant to change its pages dynamically, and the user should always arrive at the front page when loading the application.
The problem is, jQuery Mobile updates the page's hash in the URL whenever I go to a page in the application. Now, if the user enters the same hash in the application, jQuery Mobile will automatically take them to that page (when I'd want them to be handled by my code). Also, if they refresh the page, I'd like my code to take them back to where they should be, not directly moved to the hash the URL had.
To prevent this, I tried to add the following code in the mobileinit event:
$.mobile.hashListeningEnabled = false;
This works, but it also disables the pushState updates, which in turn breaks the back button, which I don't want to happen.
What would be the best way to allow users to use the back button while still not allowing manual movement between pages?
I don't have so much element to describe a possible and accurate solution for your problem, but an easy one should be this:
on every link on your page that take to another one attach a function like this:
$(DOMElem).on("click",function(){
sessionStorage["urlChangedByLink"] = "true";
});
On the same page you can try if there are no problem with this:
$( window ).on( "navigate", function( event, data ) {
if(sessionStorage["urlChangedByLink"] == "true")
$.mobile.hashListeningEnabled = true;
else
$.mobile.hashListeningEnabled = false;
});
Or this, on the other page you check if this storage variable exsist and than make your operation:
if(sessionStorage["urlChangedByLink"] == "true")
continue navigation...
else
window.history.back();
one option here is to set the data-url for each of your pages you simply add the attribute to your page div and set it equal to your home page that way the url for the page shown in the history doesnt have the hash values (or you could include your own values). the documentation on this is better explained in the jquery mobile documentation
I have a web service generating a html and I need it to be automatically refreshed in the browser every 10 seconds. I've done it simply with <meta http-equiv="refresh" content="10"> and it worked fine, preserving the scroll position (at least in Firefox).
Then I added some internal linking within the page, using e.g. Foo to link to <a name="foo"/>. After clicking such a link, I jump to the appropriate section and #foo is appended to the URL in the address bar, as expected. But if the automatic refresh happens now, #foo disappears from the address bar and the page scrolls to the top after refresh.
Is there some way to keep automatically refreshing the page, keeping the scroll position and being able to use internal linking without breaking it all?
UPDATE
I've tried to change the meta to <meta http-equiv="refresh" content="10;url=page.html#foo"> (without Javascript for now, just directly this value to see if it works). I open the page as page.html, it refreshes once as page.html#foo and then it stops. Why doesn't it keep refreshing?
It's unfortunate that the whole page needs to be reloaded, and you're not able to just do an AJAX call to get the data.
Since your page needs to be refreshed every time, you could consider storing the scroll position in local storage and reading it when the page loads again. That code might look something like this:
document.addEventListener("DOMContentLoaded", function(event) {
var scrollpos = localStorage.getItem('scrollpos');
if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
localStorage.setItem('scrollpos', window.scrollY);
};
If you would like to refresh the page and keep the anchor link, you can use JavaScript instead of a meta refresh tag:
setTimeout(function() {
location.reload();
},10000);
You could try client side routing.
Eg youresite.com/path#section2
"#section2" refers to an id of your DOM element.
When ever you refresh this URL it should land you to id section2 of your DOM.
In your document.ready you could first parse the url using window.location.href and scroll to the found id.
I think this may solve your issue. :)
I'm currently using one page to spawn a new window, with a timed playback URLs in it. Many of the pages it's loading respond to hash navigation. I'm doing this like:
window.open(url,"playback");
As we play through the URLs, we should see the page respond accordingly. The problem I've run into however, is that the window.open() call actually reloads the page when the hash is changed.
For instance, loading "pageA.htm", then "pageB.htm#tab2" works flawlessly. The issue however is that when I try to go from "pageB.htm#tab2" to "pageB.htm#tab3"; the page reloads (responding properly to hash) completely instead of just firing "onhashchange" as I'd expect.
Is there an alternative to window.open() that I should call for hash-only changes, that will prevent full page reload?
Edit: The final solution looks something like this:
playbackWindow = window.open(url,"playback");
Then when we want to change the hash:
playbackWindow.location.href = "poundIt";
You can't use window.open to change the hash without reloading the page. Simply change the value of window.location.hash instead.
window.location.hash = "This";
should do the trick.
I want to change url when i open big image in pop up window on a current page with preview images. I don't want use window.location.hash feature because i want to manipulate with new url through PHP next and i found this complex to made it with hash. So, I found that I can use HTML5 feature to make this.
window.history.pushState(“object or string”, “Title”, “/new-url”);
My problem is: I want to remove this new-url from page when i close big image. How can i make this, without using
window.history.back();
?
Thanks.
Closing the image is not analogous to pressing the back button in the browser. It is analogous to following another link back to the original page. So there's no need to go back. Just pushState again, back to the original URL.
On the other hand, if the person does click the back button in their browser, you want that to bring them back to the original page too. So you need to listen for the popstate event, and, when it's fired, run a function which will remove the popup image:
window.addEventListener("popstate", function(e) {
hideimage();
}
Read more about the HTML5 history API.
Is there any way through which i can have a javascript on a page to redirect any url that's present on the page to some specific site.
For example on a HTML page i have say 10 urls present. Can i add a javascript to the HTML page so that if anyone clicks on any url on that page, it gets redirected to the a specified page.
Thanks.
EDIT::
My scenario is i have some 13k links on a page and i do highlighting of terms on the page, even if any link is also clicked on the page, the word gets highlighted on that page. In order to do that i process each url and add some more info to it to go thought my server perl script which does the job of highlighting. But now due to large number of links on page, it takes time to process the page and page is rendered after a long time. So i want to have a javascript which can pass any link by adding info to my perl script on server.
I tried doing it server side my breaking page into pieces and processing in parallel but not much improvement.
Any other solution or suggestions are welcomed.
Appreciate your help in this regard.
You can use preventDefault in the click event handler to prevent the default behavior(open the link), and use location.href to redirect to a new page.
if you're using jQuery:
$(".links").click(function(event){
event.preventDefault();
location.href = "http://google.com";
});
You can do this with the following jQuery block:
$(document).ready(function () {
$('#urlId').live('click', function (e) {
e.preventDefault(); //Stops the link from opening
window.location.href = "/specifiedPage"; // Changes the location of the page
});
});
You can create a "protective glass" div in front of everything and handle the click event on that div. This has the advantage of not touching the page so after removing the div anything can go back to normal.
Only be sure to put a non-fully-transparent color on the div background because I've found that Internet Explorer ignores events if the div is fully transparent.
Something like rgba(0,0,0,0.001) is enough.