Question

我正在尝试在我的网站上显示动态iframe，我需要让整个图片成为原始页面的可点击链接。这是： http://radar.weather.gov/ridge/radar.php?rid=okx&product=N0R&loop=yes

iframe {
  -moz-transform: scale(01.2, 01.2);
  -webkit-transform: scale(01.2, 01.2);
  -o-transform: scale(01.2, 01.2);
  -ms-transform: scale(01.2, 01.2);
  transform: scale(01.2, 01.2);
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  -o-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}

iframe-link1 {
  position:absolute;
  top:0;
  left:0;
  display:inline-block;
  width:90px;
  height:60px;
  z-index:5;
}

<div class="iframe-link1">

  <div style="overflow: hidden;">
    <iframe scrolling="no" src="http://radar.weather.gov/ridge/Conus/northeast_loop.php" style="border: 0px none; margin-left: -537px; height: 700px; margin-top: -520px; width: 590px;"></iframe>
  </div>
  <a href="http://radar.weather.gov/ridge/radar.php?rid=okx&product=N0R&loop=yes"></a>

</div>

我甚至不确定这是否可行。

仅供参考，我有权使用其他网站。

Answer 1

你可以用2种方式做，一种是创建一个与iframe重叠的标签。

另一种方法是使用javascript，这样更优雅。

<script>
document.getElementById("your_iframe_id").contentWindow.document.body.onclick = 
function() {
  window.location.href = 'http://newurl.com';
}
</script>

iframe在这里使用是否正确？如果是这样，如何让它可点击？

1 个答案: