Clicking an anchor inside an iFrame behaves differently in Firefox and Chrome

Question

I have the following code in jsBin: http://jsbin.com/iRoROvu/1/edit

It basically has an anchor inside an iframe. If you click the link you will see nothing happens in Chrome but in Firefox it just goes blank.

Here's the same code in jsFiddle: http://jsfiddle.net/LbNwd/

JavaScript:

 var previewFrame = document.getElementById('preview');
    var preview =  previewFrame.contentDocument ||     previewFrame.contentWindow.document;     
    preview.open();
    preview.write("Hello World!<br/><a href='#'>Click me!</a>");
    preview.close();

HTML:

<iframe id="preview"></iframe>

In this case, if you use Firefox, it creates another iframe inside the existing iframe...and keeps on doing it...like 'Inception'. But the same code works fine in Chrome.

Can anyone tell me why?

Answer 1

Yes. You should use href='javascript:void(0);' instead href='#'

OR

You can use <a href='#' target="preview">Click me!</a> instead.

I think adding target="preview" also should solve your problem.

Just try it once & let us know wether its working or not.