I'm trying to wrap my head around using HTML5 pushState. It seems to work great. I can add states, go back with my browser and everything looks fine. However, when I refresh the page, it leads to a 404, because the URL that was appended with pushState doesn't actually exist...
I am trying to get everything to load from a single folder with an index.html page, so the URL would look something like http://www.server.com/app_name/<something> (app_name is a folder with an index.html file).
As far as I could gather, hashbang is considered bad, so what pushState URLs can / should I use that will stay on the same actual page and allow me to refresh?
And after refreshing, would I still be able to retrieve the state?
p.s. I am not concerned about browsers without javascript enabled or maintaining backwards compatibility. I do not want to change any .htaccess rules to make this portable and configuration-free.
Your problem is that your web server tries to locate a file called something in your app_name folder. What you must do is route all requests to /app_name/* to your index.html and then set the appropriate application state using the location object of the DOM.
You won't get far without telling the server what it should do. That's the whole point of the History API. If you don't want to mess with .htaccess files you probably should edit the configuration of your web server (Apache?) using mod_rewrite or sth. like that.
I ended up giving up on pushState, and instead used BBQ jQuery plugin.
The code looks something like this:
$(document).ready(function() {
// making sure a hashchange event is triggered for refresh
$(window).trigger('hashchange');
});
// this gets called on any page change, back button etc
$(window).bind( 'hashchange', function(e) {
// the fragment contains a hash value at the
// end of the url, e.g. #xyz
var url = $.param.fragment();
// simulating a click on the appropriate link on the page
// based on the fragment
$('.panel a[href="#' + url + '"]').click()
});
URLs on the page are in this format:
link to xyz
Related
I am learning HTML, and whenever I execute the href function in HTML and click the blue text, the browser tries to redirect me to a folder inside my computer, when in reality I want to enter a website. For example, if I try to execute the following code, instead of the browser redirecting me to duckduckgo.com, it tries to redirect me to a folder inside my computer:
Browse anonymously and without being traced
How can I solve this issue?
Because href="duckduckgo.com" is using a relative URL, so the browser is looking for duckduckgo.com relative to the current URL that is displaying the page. To the browser it's no different than if you used href="index.html", both are structurally identical.
Instead, use a fully-qualified URL:
Browse anonymously and without being traced
You can also default to the current protocol with this:
Browse anonymously and without being traced
So if the current page is open via http:// or https:// then the link would use the same in the resulting request. Note however that your description of "a folder inside my computer" may somewhat imply that your current protocol could be file://, in which case an inferred protocol clearly wouldn't work. The point is, the structure of a complete URL is pretty versatile so you have options.
I've got a C#, Kendo MVC, Razor site. There's a Kendo grid where one of the cells has a hyperlink to a pdf file, like this:
File 123
Clicking on the link opens a pdf in a new browser tab. The problem is, the URL is visible in the browser and can be changed to see another file. For example, the user could replace 123 with 456 and see File456.pdf. I need to do two things:
Hide the filename in the URL when the pdf is opened.
Hide the URL when the user hovers over the hyperlink.
Alternatively, I'd take a way to click the link (without the user seeing the URL) and download the file, but I think whether to download or view the file is browser specific.
I would just create an event to send the user back to the controller and handle the opening or download there, but the Kendo grid complicates that and this, as usual, needs to be changed right away. I'll take suggestions on how to manipulate the Kendo row to open a pdf, but I'm hoping there's a simple way to change just hide the URL from the user.
The problem is, the URL is visible in the browser and can be changed to see another file.
In my opinion the correct approach in this case would be not to pretend to hide something from the user, but rather know who your users are and implement authorization on your server. This means that if user A attempts to access file 123 that belongs to user B he gets denied. But if he attempts to access file 124 that belongs to him, then why care that he modified the url in the browser? After all user A accessed his own file. So instead of serving a static file directly, you could put those files into a folder that is not directly accessible and serve them through a controller action that will apply the necessary authorization logic (does the file that the user is trying to access actually belong to him before serving it?).
So my advice in this case for you would be to implement authorization on your server based on the resources that he is trying to access.
If you handle the redirection in JS I think it won't show the url. For example
<p onclick="redirect('http://example.com/Files/File123.pdf')">Click here for PDF</p>
<script>
function redirect(link)
{
window.location = link;
}
</script>
When I upload my website files to my server and goto my website, i see the index.html at the url bar of the browser. How can I hide this?
http://bakpinar.com/about/about-us.html
I would like it to look like in this example;
http://www.royaltyline.com
as you can see, you only see the website address in the url bar of the browser. And when you click to another page, it doesnt show the .php, .asp or .html extension, just shows the folder name.
To hide the extension shown in the address bar, you have two options.
If you control the server, you can define rules that rewrite the URL based on the one the user is trying to get to. In PHP you can use the .htaccess file to define mod_rewrite rules. For similar features to .htaccess you can install the application request routing module in IIS 7 and above. In IIS (Windows) you can set up default pages that come up when users go to particular sites.
You can also make that all of your pages are accessed through the same page using AJAX, or put all the content on the same page and hide it using CSS and display it with CSS and/or JS.
This is a very high level answer, because the specifics vary greatly from situation to situation.
An easy way to do this, in case someone is still looking, is to use a full-screen iFrame. No matter where on the page your users are, they will always only see the main url. This used to be very popular back in the day, but it was a terrible practise in terms of usability.
<html><head>the stuff</head><body>
<iframe src="http://bakpinar.com/about/about-us.html" width=100% height=100%></iframe></body></html>
Write that into the index.html file at http://www.royaltyline.com
Yes, you can do by javascript.
<script>
window.history.replaceState('','','/');
</script>
It's not actually a folder name. It's rewritten URL.
To do such things you should redirect all requests to one file (index.php for example), then parse URL and basing on its parts, show particular file.
To redirect everything to index.php, use mod_rewrite module of Apache + .htaccess file.
To choose specific file you can implement one of several approaches. It's usually called routing in design patterns.
Completely other approach would be to use AJAX for reloading content. But it's not the way it was made on the website you gave as example.
In general there is a lot of information about routing urls in PHP on the web. Just do some research.
You are effectively looking to rewrite URLs. If your web server is Apache you will be able to use the rewriting module (mod_rewrite) to direct requests to http://bakpinar.com/about/ to http://bakpinar.com/about/about-us.html
If you are not running Apache, most web servers will serve index.html as the default page when requesting a directory, so renaming
about-us.html
to
index.html
and changing incoming links to
/about/about-us.html
to simply
/about/
Will give you the same results.
I have the following fairly basic greasemonkey script:
var newloc = location.href.replace(/^(.*)-xyz-(.*)$/i, "$1$2");
if (newloc != location.href)
location.href = newloc;
That is, it basically strips out "-xyz-" from the URL and loads the page again. So if you navigate to "www.example.com/a-xyz-b/" it'll reload the page at "www.example.com/ab/".
Now, the script work fine if the page is an HTML page. But if I open a .jpg file or something that's not HTML then the script does not run at all.
Is this just a limitation of greasemonkey? That it only works if the page is actually text/html? What is an alternative way this functionality could be done?
Yes, Greasemoney fires on the DOMContentLoaded event, which doesn't seem to trigger on media objects (no DOM).
Get around this by firing on the parent/referrer pages and changing the links there.
Or, if the file names are on the local machine, use a text editor or batch job to rename/rewrite the links/names.
If neither of these workarounds is viable, post the specific details of how you are feeding these URLS to FireFox (name the browser in use if it's not FF).
(Sorry I am not able to frame question correctly.)
Following is the scenario.
I have 2 Html files.
File1.Html has
Click Me
File2.Html has
Click Me
Now when I open the file1.html in browser by typing following in browser.
http://Localhost/File1.html
The file1.html with a link is shown and when clicked it goes to
http://Localhost/File2.html
BUT
If I open the file1.html in browser by typing following in browser(note the / at the end).
http://Localhost/File1.html/
The file1.html with a link is shown and when clicked it goes to
http://Localhost/File1.html/File2.html
I know this is not a right way to do in browser but you cant stop user doing so.
The above example I have used just to simplify the issue. My real production issue issue is while using the MVC url are actually routed. So a user can legally use http://example.com/Employee Or http://example.com/Employee/ and due to this my jqGrid is not working.
Please guide me for a workaround.
UPDATE:
This works ok in IExplorer : wierd.
You want a link relative to the root. The following:
Click Me
(note the '/' at the start of the href) will link to http://Localhost/File1.html wherever the page containing the link is (so long as it's on the same host).
not relative to root i need it relative to parent
That's not possible. If you are using routed URIs there can be all sorts of /path/segments following the base name. The browser has no way of knowing what the real ‘parent’ is.
The usual solution is to use root-relative URIs as suggested by Joe. If you need to allow your application to be mounted at a configurable prefix under the root, that prefix will need to be copied out into the link.
Your question reminds me of a technique for search friendly URLs, implemented in PHP.
Things like:
http://localhost/index.php/2009/09/
It was described on Sitepoint.com The idea was that index.php could retrieve the trailing part of the URL from the web server and decide what to do with it. Including whether to deal with a final / or not.
It won't be relevant to html files (which could not, after all, retrieve the trailing part of a URL) but it might provide further ideas.