CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
paulalexandru
paulalexandru

Reputation: 9530

Can't click on anchor if it has an iframe inside

So basicaly I have this:

<a href="myurl">
    <iframe>...</iframe>
</a>

If I try to click on the <a> nothing happends. I also tried to add a class to my anchor and try to catch the event via jquery but nothing happends again.

Is there any solution for this?

Upvotes: 1

Views: 1571

Answers (4)

paulalexandru
paulalexandru

Reputation: 9530

I found a hack to make this work using html only. So my example was this:

<a href="http://www.example.com">
    <iframe style="width: 163px; height: 163px;" scrolling="no" src="http://www.example.com"></iframe>
</a>

and I figured this solution:

<a href="http://www.example.com" style="position: relative; display: block; width: 163px; height: 163px;">
    <div style="position:absolute; width: 100%; height: 100%; top: 0; left: 0;"></div>
    <iframe style="width: 163px; height: 163px;" scrolling="no" src="http://www.example.com"></iframe>
</a>

Upvotes: 1

Yann Poir&#233;
Yann Poir&#233;

Reputation: 134

This is invalid HTML. You should use some JavaScript to replicate the desired action. Hard to type code on my tablet but create a click action that takes you to the desired URL.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075517

Having an iframe inside an a is invalid HTML. If you have an invalid document, a browser can render and handle it however its authors see fit, including not doing what you were expecting.

a's content model is transparent, but there must be no interactive content:

Interactive content is content that is specifically intended for user interaction.

=> a audio (if the controls attribute is present) button embed iframe img (if the usemap attribute is present) input (if the type attribute is not in the hidden state) keygen label object (if the usemap attribute is present) select textarea video (if the controls attribute is present)

(my emphasis on iframe)

Instead, put the link in the iframe's content.

Upvotes: 0

Pav Sidhu
Pav Sidhu

Reputation: 6954

If you want to use an anchor for an iframe why not do it like this:

index.html:

<iframe src="iframe_page.html"></iframe>

iframe_page.html:

<html>
  <head>
    <title>Page</title>
  </head>
  <body>
    <a href="another_page.html">
    ...
    </a>
  </body>
</html>

Upvotes: 0

Related Questions