Use iframe as a link?

Question

I am using an iframe and in the iframe I am loading a dynamic image. I want to use that image as a link to the respective article. Actually this is a news site.

I already have used many stuffs like:

<a href="whatever.."><iframe src="dynamic url"></iframe></a>

does work with IE but not with safari and FF.

and

some tweets like

div.iframe-link {
    position: relative;
}
a.iframe-link1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

code:

<div class="iframe-link">
    <iframe src="file" width="90px" height="60px" frameborder="0" scrolling="no"
     marginheight="0" marginwidth="0" allowtransparency="true" noscaling="true">
    </iframe>
    <a href="url" target="_top" class="iframe-link1"></a>
</div>

worked in FF and Safari not in IE7,8.

SO can anybody suggest what to do..

any help would be appreciated.

The Iframe is loading a dynamic address of image like::::

<div class="news_img01">
    <div onclick="window.open('URL','_self')" style="cursor: pointer;"><br>
        <iframe scrolling="no" height="60px" frameborder="0" width="90px" noscaling="true" allowtransparency="true" marginwidth="0" marginheight="0" src="thumbnails/1188.gif">
        </iframe>
    </div>
</div>

so i cant add tag inside but already wrapped tag inside . it worked for IE but not for others like FF, Safari..

Not for this specific question, but the approach in [html - How to force link from iframe to be opened in the parent window - Stack Overflow](https://stackoverflow.com/questions/1037839/how-to-force-link-from-iframe-to-be-opened-in-the-parent-window) should also work. — user202729, Aug 17 '21 at 14:54

score 28 · Answer 1 · answered Jun 06 '14 at 20:56

28

You could create a overlay to make the area over a iframe clickable. This worked for me.

<div style="position:relative;">
<iframe src="somepage.html" width="500" height="500" />
<a href="redirect.html" style="position:absolute; top:0; left:0; display:inline-block; width:500px; height:500px; z-index:5;"></a>
</div>

I found this code snippet from this thread here: https://forums.digitalpoint.com/threads/how-do-i-make-this-iframe-clickable.2320741/

answered Jun 06 '14 at 20:56

ScottyG

3,204
3
32
42

2

Had a problem where the only way to load content in was via an iframe... this fixed the issue of making the iframe behave like a link. A nasty hack - but a very good one :) thanks! – Rob Dec 16 '14 at 09:14

Eric · Accepted Answer · 2020-01-17T12:47:33.347

According to your earlier comments, you were using the iframe in order to crop an image of unknown size to a 60 by 90 pixel box. To do this, use the overflow:hidden css attribute on the a tag, which slices off any content not fitting within the border-box.

<div class="news_img01">
    <a href="URL"
       style="display: block; width:90px; height:60px; overflow:hidden;">
        <img src="thumbnails/1188.gif" />
    </a>
</div>

score 7 · Answer 3 · answered Feb 16 '16 at 09:59

Why don't you enclose <iframe> inside a <div> and add an onClick event on the containing <div> to navigate the user to the desired page?

<div onClick=""> <!-- Or just bind 'click' event with a handler function -->
  <iframe ...></iframe>
</div>

By adding the following css rule, it will work as if the iframe were a clickable link.

div {
  cursor: pointer
}

iframe {
  pointer-events: none; // This is needed to make sure the iframe is not interactive
}

score 3 · Answer 4 · answered Dec 13 '22 at 03:11

3

Set css property pointer-events to none on iframe tag.

a {
  display : block; /* or inline-block */
}
a iframe {
  pointer-events : none;
}

<a href="https://stackoverflow.com/questions/3317917/use-iframe-as-a-link">
    <iframe src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</a>

answered Dec 13 '22 at 03:11

M Andhika Bagaskara

56
3

Is there a way to still make it scrollable? – Adan Vivero Jun 29 '23 at 03:04
This is great an all but doing this will have the element be "invisible" to pointer events, and any pointer interactions passing through it to the elements beneath it. This means it won't be scrollable... – Adan Vivero Jun 30 '23 at 02:34

score 0 · Answer 5 · answered Oct 24 '13 at 16:05

I have the same problem and I solved it with this code:

div.iframe-link {
position: relative;
float: left;
width: 960px;
height: 30px;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
opacity: 0.1;
filter:Alpha(opacity=10);
}

For me,it works for all browsers and IE8 as well. Hope it helps :)

score 0 · Answer 6 · answered Jan 17 '14 at 07:43

0

I faced such type of problem and solved by this:

a.iframe-link1 {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    width:90px;
    height:60px;
    z-index:5;
}

answered Jan 17 '14 at 07:43

Zaman-A-Piri Pasa

419
5
8

score 0 · Answer 7 · answered Jul 23 '10 at 12:06

0

If the iframe is loading an HTML page, just put your <a> tags in the source of that.

If it is just loading an image, why are you not using an <img> tag?

answered Jul 23 '10 at 12:06

DanSingerman

36,066
13
81
92

But i cant change that page... beacuse this is other site sending image.... I simply wanna make this image clickable... – Anil Jul 23 '10 at 12:32
2

If the other site is just providing an image, why not put use that in the img's src attribute? – ThatBlairGuy Jul 23 '10 at 12:46
the images are dynamic in size.so i only need to display upper left 90X60 size image. rest part automatically should cut off. thats the rest i used iframe not to distort the image. I need small part but clear part. Thanxx for reply – Anil Jul 23 '10 at 13:01
@user400210 - then you could use inline CSS: give your `` a `display:block` property, `width:90px;height:60px;` and a `background-image` which refers to the other site. – Richard JP Le Guen Jul 23 '10 at 13:08
See my updated answer for a similar method without using background-images. – Eric Jul 23 '10 at 13:22
Thanxx Guys ...It worked............. Thanks so so much.... By the way it took my lots of time... Once again thanks.. – Anil Jul 23 '10 at 13:36

Peter Perháč · Answer 8 · 2010-07-23T13:00:34.433

0

I would recommend using jQuery to select the image element in that iframe and wrap it with <a> tag so it's clickable.

I believe it's possible to attach an onHTMLReady listener to the document inside the iframe. Then wait for the iframe to load and then make the image clickable

$(frames[0].document).ready(function(){ /*find and wrap with a-tag goes here*/ });

edited Jul 23 '10 at 13:00

answered Jul 23 '10 at 12:52

Peter Perháč

20,434
21
120
152

I am newbie in Jquery. Can you please Elaborate. – Anil Jul 23 '10 at 13:04

Use iframe as a link?

8 Answers8

Linked