Question

My iframe contains a link that should change the hash/trigger an event in the parent.

How come this code won’t work:

<!-- in iframe -->
<a href="#" onClick="parent.navigate();return false;">Link</a>

// in parent
  function navigate() {
    window.location.href = '#anchor';
  }

But this does:

<!-- in iframe -->
<a href="#" onClick="parent.navigate();return false;">Link</a>

// in parent
  function navigate() {
    setTimeout(function() {
      window.location.href = '#anchor';
    }, 0); 
  }

Answer 1

I think you have an issue with the context that the navigate() function is in, with window being in the context of the iframe.

Try setting you navigate method to use top.location.href instead, for example:

// in parent
  function navigate() {
    top.location.href = '#anchor';
  }

or alternatively, in your iframe, call parent.window.location.href = '#anchor'