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

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?

On 2008-05-20, mi <mi.gg (AT) alma (DOT) ch> wrote:

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?

You could make the anchor a transparent block on top of the iframe.

<div style="position: relative; display: table">
<iframe src="http://www.google.co.uk">
</iframe>
<a style="position: absolute;
top: 0; right: 0; bottom: 0; left: 0;"
href="http://www.google.co.uk"></a>
</div>

Display:table is just to get shrink-to-fit width on the div. If you
require IE support (display: table doesn't work in IE), you can make it
a float instead and put a clearing div in at the end.

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>

On 2008-05-20, mi <mi.gg (AT) alma (DOT) ch> wrote:

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).

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).

So I set an explicit height on it and then found that it's immune to the
mouse if if it's background: transparent (which it is-- that's the
default).

So then I wondered if "background-color: white; opacity: 0.0;" would
fool it, and it did. It still looks just as transparent that way, but
it's a different kind of transparent because mice cannot pass through
it.

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.

Can't help with IE. You could try the Opera version. Add:

height: 150px;
background-color: white;
opacity: 0.0;

to a.iframe-link.

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

In article <slrng36dqd.f4a.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

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

On 2008-05-20, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <slrng36dqd.f4a.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

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.

Yes, it should do that.

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).

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

In FF and Opera and iCab, the border surrounds the viewport (which is
surely more correct).

Which viewport?

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. 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).

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.

On 2008-05-21, Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-05-20, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrng36dqd.f4a.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

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.

Yes, it should do that.

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).

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

I should have said why. The iframe is a replaced element and the
scrollbars belong to the thing inside the iframe, not to the viewport
itself.

In article <slrng37ief.5h7.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-05-20, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrng36dqd.f4a.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

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.

Yes, it should do that.

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).

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

In FF and Opera and iCab, the border surrounds the viewport (which is
surely more correct).

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
just one per browser that I was seeing this morning. <g>

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

On 2008-05-21, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <slrng37ief.5h7.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:
[...]
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
just one per browser that I was seeing this morning. <g

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

[...]

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.

I have already thanked it in advance.

In article <slrng382on.710.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-05-21, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrng37ief.5h7.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:
[...]
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
just one per browser that I was seeing this morning. <g

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).

--
dorayme