質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1521閲覧

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

tob

総合スコア16

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/10/05 04:49

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

追記
「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に保存し読みだす際にその値を元に戻す」
ぐらいでしょう。

投稿2020/10/05 05:04

編集2020/10/05 05:35
kuma_kuma_

総合スコア2506

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tob

2020/10/05 05:18

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問