iframe 2度目以降の読み込みを行わせない

Question

angular material の
mat-tabを使った
タブのうちの1つに、
iframeで別サイトを埋め込んでいます。

埋め込んでいるサイト内UI(ドロップダウンなど)を変更した後、
別タブに遷移してから再度iframeで別サイトが埋め込んであるタブを表示させると、また初期表示になってしまいます。

タブ表示を切り替える度にサイトを読み込みにいってるようですが、
一度読み込んだら以降読み込まないなど、既に読みこんでいたら以降は読み込まないなどといったことはできるのでしょうか？

お詳しい方いらっしゃいましたらご教示願います。

Answer 1

まず本当にタブ切り替えで再読み込みされているか確認してください。
通常そのような方式はとりません。(ふつうはタブ表示単位で表示・非表示を切り替えるだけ)
タブ切り替えイベント等で値の初期化などの処理を入れていませんか？

追記
「angular material」の「mat-tab」という事が判明しました。

結果からすると「angular material」の「mat-tab」を使う以上iframeの再読み込みは停止できません。

仕組みとしてはふつうはタブ内の情報は非表示して切り替えを行います。
例 タブ2を選んだ場合

• ブロック1 (非表示)
• ブロック2 (表示)
• ブロック3 (非表示)

「angular material」の「mat-tab」の場合
例 タブ2を選んだ場合
タブ表示ブロックに
タブ内容保管ブロックの内容をコピー

タブ内容保管ブロック (非表示)

• ブロック1
• ブロック2
• ブロック3

というように別の場所に保管されているタブ情報をコピーしています。
(アニメーション等の関係でしょう)
その為input系は切り替え時その内容で戻されるので値がのこる（はず）
ですがiframeはURL情報しか残らない。
その為タブ切り替え時点で毎回読み込まれるというわけです。
これではどんな手段をとってiframeのタグ自体を書き換えているので対応は不可能です
あえてするなら
「iframeの情報をcookieに保存し読みだす際にその値を元に戻す」
ぐらいでしょう。

Comments

[tob]

chromeの開発者ツールnetworkタブで確認すると、タブを切り替える度にiframeのsrcに指定しているuRLを読み込みに行っています。
angular material の　mat-tab
も公式HPのサンプル同様に使っているだけで、タブが変更された時に独自でイベントを発火させたりもしていません。