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

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

Answer 2

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

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

Answer 3

为什么不将<iframe> 包含在<div> 中，并在包含<div> 上添加onClick 事件以将用户导航到所需的页面？

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

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

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

Answer 5

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

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

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

Answer 6

我有同样的问题，我用这段代码解决了它：

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

对我来说，它也适用于所有浏览器和 IE8。 希望对你有帮助:)

Answer 7

我遇到了这样的问题并通过这个解决了：

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