【javascript, css】iframe の読み込み時のGIFロード画像表示【SAMEORIGIN】

iframe の読み込み時のGIFロード画像表示

・検索画面の結果表示用として iframe を利用
・spring framework の環境ではデフォルトでは使えないので オプション設定 も載せます

環境

・Windows10 64bit
・SpringFramework 4
・Java 8
・jQuery 3.4.1

web.xml 設定追加

設定しないとブラウザで表示してくれないので・・・
今回は同じドメインでの利用なので SAMEORIGIN 設定にしてます。

  <!-- クリックジャッキング対策 -->
  <filter>
    <filter-name>SecurityFilter</filter-name>
    <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
    <init-param>
      <!-- iframe 用 -->
      <param-name>antiClickJackingOption</param-name>
      <param-value>SAMEORIGIN</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>SecurityFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

ロード中の画像を準備

https://loading.io/
すばらしく簡単にカスタマイズできるロード中画像が作れます。

iframe の css

iframe の真ん中に表示設定

<style>
.iframe-placeholder {
   background-image: url('${imagePath}/loading.gif');
   background-position: center center;
   background-repeat: no-repeat;
}
</style>

iframe

      <iframe id="iframeResults" class="results_area iframe-placeholder" src="about:blank" name="results">
        この部分はインラインフレームを使用しています。
      </iframe>

javascript

    // iframe ロード時に css 無効化 (画像撤去)
    $('#iframeResults').on('load', function(){
    	$(this).removeClass('iframe-placeholder');
    });
    // フォームサブミット時に css 有効化 (画像表示)
    $('#myForm').on('submit', function(evt){
    	$(this).addClass('iframe-placeholder');
    });

関係ないですが、Edge が chromium 系になって本当に良かった・・・。

以上です、お疲れさまでした！