やったこと

webサービスを作るときに考えたことを垂れ流します

【HTML】iframeをクリックすると別ページに飛ぶ動作!

iframeをクリックすると、別ページに飛ぶ動作を作ろうと思ったのですが、かなり手こずってしまいました・・。

結論から言うと、以下のようなコードで出来るようになります。

<div style="position:relative;">
  <div style="pointer-events: none;">
    <iframe>・・・</iframe>
  </div>
  <a href="xxxx" style="position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; z-index:9999;"></a>
</div>

「pointer-events: none;」でiframeのクリック動作を無効化し、表面に「z-index:9999」のaリンクの幕を貼りつけています。
普通にiframeをaリンクで囲むと、なぜか「iPhone Safari」でまともに表示してくれなってしまうので、こういう苦しい方法を取ることになりました・・。

↓下記のページに他にもいろいろ詳しい方法が載っています。
html - Use iframe as a link? - Stack Overflow

以上・・。