使用iframe作为链接？

我正在使用iframe并在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。

SO可以有人建议该怎么做..

任何帮助，将不胜感激。

的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等其他人。

来源

2010-07-23 Anil

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

来源

2010-07-23 12:49:10 Eric

Thanxx伙计们...它的工作...............非常感谢....顺便花了我很多时间... 再次感谢.. – Anil 2010-07-23 13:36:18

如果回答你的问题，**然后点击左边的勾号！ – Eric 2010-07-23 13:49:56

如果iframe正在加载HTML页面，请将您的<a>标记置于该源代码中。

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

来源

2010-07-23 12:06:22 DanSingerman

，但我不能改变这一页......怎么一回事，因为这是其他网站发送图像....我只是想使这个形象点击... – Anil 2010-07-23 12:32:04

如果其他网站只是提供一个形象，为什么不把在img的src属性中使用它？ – ThatBlairGuy 2010-07-23 12:46:58

图像的大小是动态的，所以我只需要显示左上90X60大小的图像。休息部分自动切断。多数民众赞成在休息我用iframe不扭曲的形象。我需要一小部分但清晰的部分。 Thanxx的回复 – Anil 2010-07-23 13:01:52

我会建议使用jQuery选择在该iframe的图像元素，并与<a>标签包装它，所以它的点击。

我相信有可能将一个onHTMLReady监听器附加到iframe中的文档。然后等待iframe来加载，然后使图像可点击

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

来源

2010-07-23 12:52:48

我是Jquery的新手。你可以请详细说明。 – Anil 2010-07-23 13:04:04

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

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以及。希望它能帮助:)

来源

2013-10-24 16:05:32

我面对这种类型的问题，并通过该解决：

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

来源

2014-01-17 07:43:53

您可以创建一个叠加，使在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/

来源

2014-06-06 20:56:09 ScottyG

有一个问题，只有通过iframe加载内容的方法...这解决了使iframe的行为像链接的问题。讨厌的黑客 - 但非常好的:)谢谢！ – Rob 2014-12-16 09:14:25

你为什么不封闭一个<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 
}

来源

2016-02-16 09:59:51

使用iframe作为链接？

回答

相关问题