Can I change the text in the address bar without navigating away?
html, iframe, javascript
Solution
You are able to change part of the URL with something like `window.pushState`. Take a look at MDN's explanation:
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
Browser compatibility: http://caniuse.com/history
A nice library that wraps these features and provides similar functionality in browsers that don't support it is history.js: http://balupton.github.io/history.js/demo/
An example from the MDN link:
Example
Suppose `http://mozilla.org/foo.html` executes the following JavaScript:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
This will cause the URL bar to display `http://mozilla.org/bar.html`, but won't cause the browser to load `bar.html` or even check that `bar.html` exists.
Suppose now that the user now navigates to `http://google.com`, then clicks back. At this point, the URL bar will display `http://mozilla.org/bar.html`, and the page will get a `popstate` event whose state object contains a copy of `stateObj`. The page itself will look like `foo.html`, although the page might modify its contents during the `popstate` event.
If we click back again, the URL will change to `http://mozilla.org/foo.html`, and the document will get another `popstate` event, this time with a null state object. Here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the `popstate` event.
Problem
I've made a search page for a client, but in this case the actual search page is in an `iframe` and the user is presented with a decorative shell surrounding said `iframe`, which passes its URL parameters to the `iframe`, which then interprets them and performs a search. This is something I cannot change. It also presents me with the unique problem that if the user types into the search page's search bar to perform another search, the iframe refreshes but the shell page does not. This means the URL is now no longer relevant to the current search. How can I change the URL in the address bar without navigating away from this shell page? The whole point of this system is that there is less wait for the `iframe` to refresh than the whole page, so refreshing the whole page would be counter-productive. Full Solution For anyone wanting just a code snippet, here's my final implementation of Ian's solution: ``` <?PHP // ... function buildTitleChanger($search) { ?> window.top.history.pushState({search : "<?PHP echo str_replace("\"", "\\\"", $search); ?>"}, document.title, window.location.search); window.top.document.title = document.title;<?PHP } // ... ?> ``` it's a little dirty with that inline PHP, but it works 100% of the time :3