使用iframe作为链接？

Question

我正在使用iframe,在iframe中我正在加载动态图像.我想将该图像用作相应文章的链接.实际上这是一个新闻网站.

我已经使用过很多东西,比如:

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

确实可以使用IE但不适用于safari和FF.

和

一些推文喜欢

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

码:

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

在FF和Safari中工作不在IE7,8中.

所以有人可以建议做什么..

任何帮助,将不胜感激.

---

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>

所以我不能在里面添加标签,但已经包装了标签.它适用于IE,但不适用于FF,Safari ..

Answer 1

您可以创建一个叠加层,使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>

我从这个帖子中找到了这个代码片段:https: //forums.digitalpoint.com/threads/how-do-i-make-this-iframe-clickable.2320741/

Answer 2

您为什么不将其包含<iframe>在中，<div>并onClick在其中包含一个事件<div>以将用户导航到所需页面？

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

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

div {
  cursor: pointer
}

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

Answer 3

根据您之前的评论,您使用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>

Answer 4

在 iframe 标记上将css 属性指针事件设置为none。

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>