Is it possible to include the url of the iframe content in the url address bar?

For example, i have a domain sub.test which has an iframe with src to realpage

Surfing through the page logically doesnt change anything in the address bar since we are opening the realpage in the iframe on other domain.

I know it is not possible to inject the whole url into address bar, but what about without the hostname?

For example, if i open site realpage/first.php in iframe, i want the url in address bar to change to sub.test/first.php or sub.test/first

Is it possible to include the url of the iframe content in the url address bar?

For example, i have a domain sub.test. which has an iframe with src to realpage.

Surfing through the page logically doesnt change anything in the address bar since we are opening the realpage in the iframe on other domain.

I know it is not possible to inject the whole url into address bar, but what about without the hostname?

For example, if i open site realpage./first.php in iframe, i want the url in address bar to change to sub.test./first.php or sub.test./first

• javascript
• html
• url
• iframe
• address-bar

• Check out the following link for more info: stackoverflow./questions/136458/…. – adamj Commented May 9, 2014 at 8:22

2 Answers 2

You have two options here you can either use pushState (more info) or you can use Hash key navigation (more info) if you wish to make it patible with browsers that do not yet have pushState available.

pushState example:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Hash Key example:

if ("onhashchange" in window) {  
  alert("The browser supports the hashchange event!");  
}  

function locationHashChanged() {  
  if (location.hash === "#somecoolfeature") {  
    somecoolfeature();  
  }  
}  

window.onhashchange = locationHashChanged;

For more info here is another link: Change the URL in the browser without loading the new page using JavaScript

The top level frame can change the address (although not the origin parts) with the history api, see pushState in particular.

To do this in reaction to navigation in the frame, since it is across origins, you'd need to use postMessage to send the URL you want to change it to.