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

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


動作サンプル

html

?

1 2 3 4 5

<p><a href="https://www.proglad.tokyo/2018/04/sourcetreegitpull2.html" target="linkSample">SourceTree、Gitでpull出来なくなったときのメモ2</a></p> <p><a href="https://www.proglad.tokyo/2018/04/blog-post.html" target="linkSample">簡単なモーダルウィンドウのサンプル</a></p>   <p>この下のエリアが切り替わります</p> <iframe src="" name="linkSample" width="100%" height="100%"></iframe>

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

?

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

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




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

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

css

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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