Display iFrame url in address bar

Question

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

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

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.com/first.php in iframe, i want the url in address bar to change to sub.test.com/first.php or sub.test.com/first

Answer 1

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 compatible 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

Answer 2

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.