In my web app, a user can click an item in a list, and I modify the url in their browser:
<li>Horse</li>
<li>Cow</li>
<li>Goat</li>
function onListItemClicked() {
window.location.hash = item.name;
}
this will change the url in the user's browser to:
www.example.com#Horse
www.example.com#Cow
www.example.com#Goat
if I'm reading correctly, we can't get the # part of the url servlet-side, right? If the user copies and pastes the url from their browser to friend, it would be cool if I could generate the page already initialized with the item they clicked.
It looks like this is not possible, I'll have to load the appropriate page via javascript after the document finishes loading,
Thanks
No, you can't do this from the server side on. URL fragments are purely client side. You need to do this in the client side during page load.
window.onload = function() {
var hash = window.location.hash;
// Do your business thing here based on the hash.
}
Related
I am designing a HTML page, and I would like to send a simple message (or trigger some action) when the user intentionally request updating (update button on the web browser, pressing F5... or whatever any other manual method that could exist) of the HTML file.
Something like:
window.onmanualupdaterequest = alert("You requested update");
Or whatever the correct procedure could be.
How could I do this?
Further notes:
I have tried the window.onbeforeunload function (example), but it does not exactly solve the problem (I would say it has not the same behavior as user request).
I would like to ignore the autoupdate case (like in setInterval or similar functions or scripts) from the manual update case. This question is about the manual one.
The classical Android swipe-down update method for a web page is considered here as a manual update method.
My idea would be to use the sessionStorage to save the window.location.href on pageload. If the user reloads the page the stored location should match the current url:
window.addEventListener('load', function () {
const lastUrl = sessionStorage.getItem('lastUrl');
if(lastUrl && lastUrl === window.location.href) {
alert("You requested update");
}
sessionStorage.setItem('lastUrl', window.location.href);
});
I am making a redirect using window.location.href to Listing view after an Item is added to DB after successful CREATE operation.
But what it does, it simply fetches old page (not showing the newly added item) that was previously in borwser's cache.
I want it to fetch every think from server, just like we use true parameter in document.location.reload(true) to load a fresh copy of page from server.
You can use this:
window.location.href = "http://www.mywebsite.com/products?t="+ (new Date().getTime());
Or:
window.location.href = "http://www.mywebsite.com/products?t="+ Math.random();
Let's say normally my users access our web page via https://www.mycompany.com/go/mybusinessname
Inside this web page, we have a iframe which actually comes from https://www.mycompany.com/myapp
Everything is working fine, except that if for some reason, the users come to know about this url https://www.mycompany.com/myapp. They can start accessing it directly by typing into the address bar.
This is what I want to prevent them from doing. Is there any best practice to achieve this?
==== Update to provide more background ====
The parent page which is https://www.mycompany.com is the company's page and it's maintained by some other team. So they have all the generic header and footer, etc. so each application is rendered as an iframe inside it. (This also means we cannot change the parent page's code)
If users access https://www.mycompany.com/myapp directly, they won't be able to see the header and footer. Yes, it's not a big deal, but I just want to maintain the consistency.
Another of my concern is that, in our dev environment (aka when running the page locally) we don't have the parent-iframe thing. We access our page directly from http://localhost:port. Hence I want to find a solution that can allow us access it normally when running locally as well.
If such solution simple does not exist, please let me know as well :)
On your iframe's source, you can check the parent's window by using window.top.location and see if it's set to 'https://www.mycompany.com/go/mybusinessname'. If not, redirect the page.
var myUrl = 'https://www.mycompany.com/go/mybusinessname';
if(window.top.location.href !== myUrl) {
window.top.location.href = myUrl;
}
I realized we already had a function to determine whether the page in running under https://www.mycompany.com. So now I only need to do the below to perform the redirecting when our page is not iframe
var expectedPathname = "/go/mybusinessname";
var getLocation = function (href) {
var l = document.createElement("a");
l.href = href;
return l;
};
if (window == window.top) { // if not iframe
var link = getLocation(window.top.location.href);
if (link.pathname !== expectedPathname) {
link.pathname = expectedPathname;
window.top.location.replace(link.href);
}
}
You can use HTTP referer header on server-side. If the page is opened in IFRAME - the referer contains parent page address. Otherwise, it is empty or contains different page.
I think I have a major fault in my webpage design. I need to save the content if I reboot the computer or close the webpage.
I do not have access to any type of a database server only MS Access. I was thinking of utilizing localstorage as the page will be constantly viewed from the same computer.
I found this example [link]Edit functionality using javascript and local storage however I am not sure if it will work.
Can someone look at my example and let me know if I can do this or if I need to abandon this and start over.
$(document).ready(function () {
var id = 0;
// Add button functionality
$("table.dynatable button.add").click(function () {
id++;
var master = $(this).parents("table.dynatable");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone(true);
prot.attr("class", "")
prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$(document).on("click", "table.dynatable button.remove", function () {
$(this).parents("tr").remove();
});
});
http://jsfiddle.net/deaconf19/csL68/
Thanks
If you are running the web page from a web-server -- that is, your URL begins with http:// or https://, then yes, you can use localStorage to save data.
If you are running the file directly from your hard drive, that is, your url begins with file:, then you'll have trouble. Chrome won't let you use localStorage -- I don't remember if Firefox does.
(If you need to run this from your local hard drive and not a server, and you are running under Windows, you can turn the file into an HTA and save data to a regular file.)
I was on Facebook and realised that when I change page the page address changes but the page does not redirect but loads via ajax instead.
You can tell because the console does not clear when you click the link but the URL changes.
Weird, but anyone know how it is done?
Facebook runs with massive AJAX calls that changes the page state and the sections.
So to make a page linkable to somebody by copying the URL address, every time you call an AJAX relevant function they updates the URL using a fake anchor "#!" plus the real address.
Simply when you load the real page (using F5 or linking that so somebody) a JS parser catchs the string after #! (if there is) and redirect you to baseaddress + that.
I belive something like this (untested):
var urlstr = new String(location.href);
var urlparm = urlstr.split('#!');
var last = urlparm.length - 1;
if( (urlparm[last] != urlparm[0]) && (urlparm[last] != "/") )
{ var redir = "http://www.facebook.com" + urlparm[last];
location.href = redir;
}
In Google Chrome instead the URL really changes, I'm according that there is an hash somewhere, but I don't know where and how.