I just wanted to know, is there any possible way to change the URL that appears in the address bar of a webpage dynamically? Like, maybe there are two buttons on the webpage, and when the user clicks one it will (or won't it does not matter) refresh the page and the url will be mysite.com/page1, or if the user clickes the second button, the url that appears in the address bar will be mysite.com/page2?
I do not need it to chaneg the domain, just the part after.
Just wanted to say, that I DO NOT want to go to another page. This must be done on one page. It does not matter if it is done with JS, PHP, or via the .htaccess file, but it must do this with only one page.
Outside of changing the .location you only really have control over the window.location.hash.
window.location.hash = "boo"; http://mysite.com -> http://mysite.com/#boo
This is the only way to not go to a new page while changing the URL. All other methods will refresh the page or redirect the page:
window.location redirects user when changed
window.location.pathname redirects user when changed
window.location.search redirects user when changed
window.location.hash does not redirect user when changed
You can also just change the non domain path by using a relative url:
window.location = "page1"; // include forward-slash if necessary
// goes to http://somesite.com/page1
You can definitely (and easily) serve the same page off both /page1 and /page2 and have the buttons navigate respectively to one and the other -- "refreshing the page", as you say (i.e. loading it up again from the server, or browser cache), and of course change accordingly what appears in the address bar, too. However, I don't see what's the point of doing that.
I don't quite understand what you want.
Is it that in both cases, you want the same page to be shown but with different urls ?
In that case, you could write a .htaccess file to redirect to the same page for both /link1 and /link2 and point the button to either of the links.
Just to update this question in case others come along.
This can now be handled via javascript using pushState(). There's a couple of libraries (such as History.js) that aim to ease implementation across different browsers currently without proper support. However, if you'd like see a simple usage example without the use of such libraries, feel free to check out the following article on Hawkee
Dynamically change URLs using Push and Popstate
Related
I am trying to use Ajax in a Project.
The Idea is when i click a Tab,
The Relevant Data should load according to that Tab.
But it also should append the Url on address bar of current form that i am in.
Let Suppose i clicked the ERP Tab, so then ERP Divs should load inside the page but also the relative url should also show
e-g
www.mydomain.com\erp
i know about .load function, but with it it dont update the url on address bar.
plus data will be coming from different files.
Also Left Side Menus will be coming from Database on Role Base.
i am using codeigniter in this project
i want to have Url functionality as it will be easy for user to access that page directly with the complete url plus it also gives bookmark advantage too..
Here is the screenshot for more convenience.
AFAIK you can't change the actual URL without a page reload.
You'll have to use 'jquery-address' library. Check out https://github.com/asual/jquery-address
I would do two different things here:
To change the URL dynamically without page load, use the new history.pushState() method. If you are supporting older browsers, history.js is essentially the same API that falls back to a hashtag method. Note that these URLs are not accessible from the outside. Thus:
When a user travels to one of those URLs, default the open tab to whichever one you are trying to. You will have to capture the intended route and work some javascript magic on it.
I'm looking for a way to load a full-functional copy of a web site inside a php proxy page in order to be able to grab and change part of its elements and styles.
I decided to post this question to merge my previous two into a more relevant evolution:
live change any site visualization properties
load external site and change its visualization
I have found cURL functions useful to load the page (eg. www.google.it; for google.com I received a 302 redirection, but I won't face it now).
Some of the page elements, like the image logo, are not properly loaded; this should be due to the original relative path to the site resources. I have to manually add "//google.it" before them to fix, and it worked.
Now I have another issue:
How is it possible to go further in the site navigation?
When I click any link the page is reloaded with its "real" destination. I suppose I have to reload my php and use the href link attribute as url to load (I can do that).
But what about the submit buttons? How can I redirect their destination?
Use an existing proxy for that.
Generally you'll have to just find all the strings matching the old domain name and change them into your url, so every link on the page will turn from being www.bla.com/page.htm into proxy.com/page.htm.
This will also require some server setup thanks to possible ajax requests and relative paths. Besides, super hard would be to catch dynamically constructed url's such as: var add r = 'b'+'la.com';
How do I remove path inforation from a url?
For example in this url, http://stackoverflow.com/questions/ask, I want the user to only see http://stackoverflow.com. Is this possible to do?
I do a redirect in PHP from my root directory to path Foo. I don't want Foo to display in the URL.I also do a page reload of sorts using window.location.href = domain_name/foo. Similarly I don't want foo to display in the URL.
Is this possible to implment in Javascript or PHP or do I have to configure Apache to do this?
You cannot manipulate URLs in the browser's address bar using PHP or JavaScript. But you have guessed correctly, this is something that can be configured in Apache. For a primer on URL rewriting, take a look at this article.
I have seen websites that keep the user on the homepage and use AJAX to change the page content.
You should make yourself sober and then consider if you really want to hide anything and if your web site would work at all.
However, I can answer you already - it wouldn't.
We are using path information for the reason. And you'd better see it.
Read up on URL masking:
htaccess mask for my url
http://www.willmaster.com/library/web-development/URL-masking.php
etc... This cannot be handled in JS.
If you REALLY wanted to, you could do this in PHP: you would need to create an index.php page that was set up to handle the loading of other pages, and add a handler at the top of every page that detects the REQUEST_URI that sets any other link to redirect (header()) to the index page with the filepath stored in $_SESSION or another retrievable location. The index page would then render the requested page. However, this is ugly, wastes resources, and you're much better off with an apache level rewrite.
Using the following tutorial I want my website to use AJAX to load the content (but also want to be able to use the back button etc. etc):
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
Ofcourse if someone has javascript disabled the website should also work (without Ajax).
The problem however comes when a javascript enabled user sends a link to a non javascript enabled user. Because javascript is disabled it will not handle the #-tag correctly and will just go to the homepage (so linking directly to pages from a javascript user to non-javascript user is impossible). Is there a way to resolve this issue (preferably php or htacces).
HTML5 gives us methods to alter the URL without refreshing the page https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
This means you can update something without a page refresh but still give the user a url they can bookmark or send to someone else. These urls will work without JavaScript, as long as you have pages at those locations or are catching them with mod_rewrite or similar.
https://github.com/browserstate/history.js is a great little pollyfill which will use the HTML5 history stuff if the browser supports it, otherwise (Internet Explorer) it changes the hash of the url.
Basically, three steps:
code your "a" tags just normal: <a href='about'>About us</a>
in your javascript code, intercept all click events on <a> tags and navigate to # + this.href. So when they click the above url, you navigate to site.com/#about instead of site.com/about
in your javascript code, have a timer function that reads the hash value form the current location and loads a corresponding url (with # removed) via ajax
Since you code your html just as usual, the site remains fully accessible for non-js users, and, more important, for search engines' bots.
In response to the comments I can suggest the following:
redirect your home page via javascript from just site.com to site.com/js/
when <a href='about'> is clicked, navigate to site.com/js/#about
on the "js" page, have something like <a id=about href="/about">click here</a> for non-js users
Why not just build your application normally and then add the AJAX on top, rather than going the other way round and causing more work for yourself?
Ask yourself, why do you need AJAX page transitions? Does your app actually need them, or is it just because you've seen it on another site, like Twitter?
Here's the situation.
I have a site where clicking hyperlinks within a certain div makes a jQuery function get the content of a div from a separate page. Because of this, the URL don't change. I need it to change as well as writing an entry in history.
My pages are setup like this (not sure this is the smartest way of going though)
access.php (main logon)
new-user.php
forgot-pass.php
index.php
controlpanel.php
etcetc. Now, all of these pages are reachable on their own and are mainly identical and all contain a div called "container". When clicking links, the content from this div gets erased and the content from the coresponding div (container) gets loaded from the file of the URL (href). I'm terrible at explaining..
So basically, what I need is some javascript that picks up the href link address and just pastes it in the url bar at the same time as it creates an entry in history so the back and forth buttons work.
I plan on extending this in a while as well, translating query strings as well. But there are a few constant static pages I need to take care of first. Any help would be very appreciated! :)
You are not allowed to change the entire URL by JavaScript but you can use URL hashes. I recommend you the browser history plug-in. You can simply register a handler to react on URL changes and load your corresponding content via ajax.
Have you looked at the jquery address plugin? Look at the examples. Is this similar to what you want?
It's not possible with "normal urls" (we must wait for a new generation of browsers...)
But there is a "trick": playing with anchors.
A link like "same_page.php#anchor" does not reload the page, but act on both the history and the adress bar.
So, if instead of having url like "page.php?param=lorem", you could have "page.php#param=lorem", you have your solution :)