楽天ECサイト(RMS)でiframeを使ったカスタマイズで発生するバグの対処法
前回記事「楽天ECサイト(RMS)で商品詳細ページをカスタマイズする 」では、iframeを使って、外部HTMLを商品情報欄に表示させることで、カスタマイズに柔軟性を持たせる方法をまとめていきました。
ただ、その方法でカスタマイズした時にiframe部分の表示がおかしくなる場合があります。モダンブラウザでは見られないようですが、IEなどで発生する症状のようです。具体的にこの症状が発生するタイミングですが、ブラウザの戻るボタンを押して再表示した際におかしな表示になってしまいます。
原因ですが、iframeを読み込む際にブラウザバックのヒストリーにiframeで呼び出しているHTMLのキャッシュが残ることで複数表示されるといった症状が起こるようです。
対処法ですが、下記のようにコードを記述してブラウザの戻るボタンを押した時にキャッシュをクリアさせることで問題が解決しました。(要jQuery)
(参考にさせて頂いたサイト) iframeのキャッシュが強すぎる
<script> $('window').on('unload', function(){}); </script>iframeを使ったカスタマイズは便利ですが、このような症状にも対応しないといけないのが大変ですね。。
(参考にさせて頂いたサイト) iframeのキャッシュが強すぎる
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories