Changing URL based on page opened in an iFrame

Question

I'm designing a website, in which there's a navigation bar on top, and an iFrame below it. What I'm trying to do is, the user will navigate through out the website within this iFrame. And the nav bar will be there on the top, the whole time. Currently, my nav bar links open a document in my iFrame like this:

<li class="nav-top-links"><a class="a-nav-top-links" href="sample1.html" target="tFrame">ITEM1</a></li>

What I want to know is:

How can I change the URL in the browser, based on the link of the opened page in the iFrame? Is there any kind of 'listener' that I can implement? All pages will be of same domain.
Would someone like to advise on any better approach?

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

You can pass messages between an iframe and the parent document. Check out this answer for details: make iframe height dynamic based on content inside- JQUERY/Javascript

edited May 23 '17 at 11:58

Community

1
1

answered Oct 30 '15 at 16:40

Marty Mulligan

994
6
8

score 0 · Answer 2 · edited May 23 '17 at 11:51

You might try pushState or Hash key navigation.

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;

Changing URL based on page opened in an iFrame

2 Answers2