Html 使用 iframe 作为链接？

Use iframe as a link?

提问by Anil

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.

我正在使用 iframe 并在 iframe 中加载动态图像。我想使用该图像作为相应文章的链接。其实这是一个新闻网站。

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.

确实适用于 IE，但不适用于 safari 和 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.

在 FF 和 Safari 中工作，而不是在 IE7,8 中。

SO can anybody suggest what to do..

所以任何人都可以建议该怎么做..

any help would be appreciated.

任何帮助，将不胜感激。

---

---

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

Iframe 正在加载图像的动态地址，例如::::

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

所以我不能在里面添加标签，但已经在里面包装了标签。它适用于 IE，但不适用于 FF、Safari 等其他人。

采纳答案by Eric

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:hiddencss attribute on the atag, which slices off any content not fitting within the border-box.

根据您之前的评论，您使用 iframe 将未知大小的图像裁剪为 60 x 90 像素的框。为此，请使用标签overflow:hidden上的css 属性a，它会切掉任何不适合边框框的内容。

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

回答by ScottyG

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

您可以创建一个叠加层，使 iframe 上的区域可点击。这对我有用。

<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/

我在这里找到了这个线程的代码片段：https: //forums.digitalpoint.com/threads/how-do-i-make-this-iframe-clickable.2320741/

回答by Sung Cho

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

为什么不将<iframe>a括起来<div>并onClick在包含的内容上添加一个事件<div>以将用户导航到所需的页面？

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

通过添加以下 css 规则，它会像 iframe 是一个可点击的链接一样工作。

div {
  cursor: pointer
}

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

回答by DanSingerman

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

如果iframe正在加载 HTML 页面，只需将您的<a>标签放在该页面的源代码中。

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

如果它只是加载图像，为什么不使用<img>标签？

回答by Peter Perhá?

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

我建议使用 jQuery 来选择该 iframe 中的图像元素，并用<a>标签将其包装起来，使其可点击。

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

我相信可以将 onHTMLReady 侦听器附加到 iframe 内的文档。然后等待 iframe 加载，然后使图像可点击

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

回答by RedApple Freelancer

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

对我来说，它也适用于所有浏览器和 IE8。希望能帮助到你 ：）

回答by Zaman-A-Piri Pasa

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;
}