Использовать iframe как ссылку?

Question

Я использую iframe и в iframe загружаю динамическое изображение. Я хочу использовать это изображение в качестве ссылки на соответствующую статью. На самом деле это новостной сайт.

Я уже использовал много питания, как:

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

работает с IE, но не с сафари и 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.

Answer 1

Согласно вашим более ранним комментариям, вы использовали iframe для обрезки изображения неизвестного размера в поле размером 60 на 90 пикселей. Сделайте это, используйте атрибут css overflow:hidden на теге 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 2

Если iframe загружает HTML-страницу, просто поместите свои <a> теги в источник этого.

Если вы просто загрузили изображение, почему бы вам не использовать тег <img>?

Answer 3

Я рекомендовал бы использовать JQuery, чтобы выбрать элемент изображения в этом IFRAME и оберните его с <a> теге так это интерактивная.

Я считаю, что можно подключить слушателя onHTMLReady к документу внутри iframe. Затем ждать фрейма для загрузки, а затем сделать изображение интерактивного

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

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

Answer 6

Вы можете создать наложение, чтобы сделать область над IFrame Clickable. Это сработало для меня.

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

Почему вы не заключите внутри <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 
}