iflameでクリックで読み込み先を変える

iframeってこんなことできたんですね。
知らなかった。


動作サンプル

See the Pen iframeをクリックで読み込み先を切り替える by takapen (@takapen) on CodePen.

html

SourceTree、Gitでpull出来なくなったときのメモ2
簡単なモーダルウィンドウのサンプル

この下のエリアが切り替わります

ただhtmlをそのまま読み込んだら測定系で以下のエラーが出たので、他のやり方を検討しました。

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided...

jsとか使ってなかったらiflameでさくっとやるのもありかも。




あとブラウザのスマホプレビューでは、問題なかったのに実機で見ると拡大表示され、スクロールできない状態だったので注意が必要かもです。

自分はモーダルで開いてやったので、たしかこんな感じで表示できた気が。
htmlは、waku > waku2 > iflame といった階層です

css

#waku {
  width:80%;
  height:80%;
  position:fixed;
  top:10%;
  left:10%;
  overflow:hidden;
}
#waku2 {
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overflow-scrolling:touch;
}
iframe {
  width:100%;
  height:100%;
}