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 系になって本当に良かった・・・。

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