Display iFrame url in address bar

问题

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

回答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

回答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.

来源：https://stackoverflow.com/questions/23559740/display-iframe-url-in-address-bar

标签

javascript

html

url

iframe

address-bar