how to use an iframe as a link (make the whole iframe clickable)

[mi]

Hi,

I have an iframe which I would like to wrap with a link. The HTML
inside the iframe doesn't contain any links. When the iframe is
clicked, I would like to load the iframe's source in a new window.

I tried something this:

<a href="iframe-content.html" target="_blank">
<iframe src="iframe-content.html">
</iframe>
</a>

But only the iframe's border becomes clickable in Firefox. (I haven't
tried other browsers yet).

Would someone have a solution to make this work?

 

[mi]

Thanks. Indeed, with a little tweaking, this works nicely in Firefox 2
and Safari 3.1.1

Unfortunately, it doesn't in Opera 9.01 or MSIE 6. (Haven't tried IE7
yet).

Besides, I discovered another problem for my project: some of the
iframes should contain SVG, and Safari doesn't display them inside
iframes. (And IE not at all without a plugin). Well...

Still, it would be nice to know how to make the linking work in Opera
and IE.

Here is what I have now for FF and Safari:

<style type="text/css">
div.iframe-link {
position: relative;
float: left;
width: 150px;
height: 150px;
margin: 0 1em 1em 0;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

and

<div class="iframe-link">
<iframe src="mire-siemens.svg" name="siemens" width="150"
height="150">
</iframe>
<a href="mire-siemens.svg" target="_blank" class="iframe-link"></a>
</div>

 

[dorayme]

Interesting. I tried it in Opera and the first problem was that it was
having trouble sizing the <a> properly (you can see this if you give it
a border to see where it is).

In Safari 2, your original made the scrollbars on the i-frame unusable,
the link (hand and function) was "over" it and preventing access. In
other words the abs pos link worked to go to Google over the scroll bars
but no more.

Curiously, the border on this abs pos anchor, (as per your suggestion),
in Safari is tightly around the i-frame, specifically including the
scroll-bars (there being both vert and horiz. on Safari 2). In FF and
Opera and iCab, the border surrounds the viewport (which is surely more
correct).

 

[dorayme]

Yes, it should do that.


That's where it should be (technically, but as you say it's not very
helpful for it to cover the scrollbars).


Which viewport?

How many viewports are there per browser? I have not completed my deep
investigations into root theory as yet - in which viewports take up
starring roles - but I have a rough working hypothesis that there is

I just tested Firefox and discovered that the problem is something we
discovered earlier: it doesn't allow table cell boxes to be containing
blocks.

So the A covers the entire main viewport, not just the iframe.

Ah! So you do understand, you old fox! Yes, in FF and Opera but not in
Safari 2.

So
display: table for the container is no good here in Firefox (the table
cell is a cowardly anonymous table cell hiding in a disgusting fake
anonymous table row inside the div which is a forged table).

And I hope it continues to do this and prove to us all to ignore it
completely as a clueless and useless epiphenomena.

Ideally we'd put the box over the viewport inside the iframe, but
there's no way to do that automatically.

My version of Opera (9.25) gets the origin and width of the A right
but doesn't give it any height.

So, all kinds of problems, but the general method of making the whole
iframe clickable rather than the things in by contriving to cover it up
with something appears to work in some browsers at least.

Alternatively perhaps one could use JS to capture the click on the
iframe element? I don't know whether the click goes to the things inside
the iframe first or not.

OP should consider getting the cursor to make like a magic wand. When
waved, to turn the page into a non i-frame page and secure itself a more
useful and robust future. <g>

 

[dorayme]

Usually one per browser, but each frame or iframe starts a new viewport
(and things that are like iframes-- you can OBJECT for example).

Ah! Of course, you are right. Where frames are concerned, there are at
least* as many viewports as there are frames + 1. Safari and FF were
differing in the viewports they were attending to in relation to borders
and things...

Once I made a homepage in frames and you could see *all* the pages on
the site right there, each in its own frame. No navigation, you just
opened wide any viewport you wanted. I made it to prove to myself once
and for all that I could be more than usually awkward and cause trouble
on earth as and when I wanted.

---------
* there is no upper limit because each frame could have further frames
within. There are references in the bible to suggest that God has made a
website with an infinite number of frames, each one of which has an
infinite number of further frames, and so on.

(btw, and this is strictly OT, I once crashed a Mac when trying to make
like God. Which means that there must be a big difference in the
processing power and RAM of an early Mac and God's creation).