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:centercenter;background-repeat:no-repeat;}</style>iframe
<iframeid="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 系になって本当に良かった・・・。
以上です、お疲れさまでした！