HTML anchor tag in an iframe

Question

I have this weird issue in chrome (only in chrome).

I have a page with std layout (header,content,footer with left and right margin). Content section has an iframe containing many anchor tags of the form <a href="#" onclick="doSomething()">Text</a>

When any of this anchor tag is clicked, header goes hidden. Any anchor tag of the same form but outside the iframe works fine.

I have verified that the DOM has the header elements intact. Display is not 'none' (Zooming in the page to 150%, header starts appearing slightly).

When I force the browser to redraw the page, like changing any css attribute(height) of the content section , header appears.

When I change the href from '#' to say '#nonexistent', the link works perfectly fine.

One quick fix is to change the href to, say javascript:void(null); (and this works too) or something equivalent. But I'm somehow constrained that I can't add any scriptlets. This looks so weird. Can somebody help/point me to the right direction?

Answer 1

Try changing/adding a target attribute to the anchor tags in the iframe. I'm not certain whether the header is disappearing within the iframe or the parent page, but my guess is you want target="_parent".

Also, javascript:void(null) should be javascript:void. void is a type, not a function. Calling (null) is unnecessary.