2018/04/27

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