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正在加载HTML页面，只需将<a>标记放入其中。

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

Answer 4

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

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 5

我遇到了这样的问题，并由此解决了：

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

使用iframe作为链接？

7 个答案: