
楽天ECサイト(RMS)でiframeを使ったカスタマイズで発生するバグの対処法
前回記事「楽天ECサイト(RMS)で商品詳細ページをカスタマイズする 」では、iframeを使って、外部HTMLを商品情報欄に表示させることで、カスタマイズに柔軟性を持たせる方法をまとめていきました。
ただ、その方法でカスタマイズした時にiframe部分の表示がおかしくなる場合があります。モダンブラウザでは見られないようですが、IEなどで発生する症状のようです。具体的にこの症状が発生するタイミングですが、ブラウザの戻るボタンを押して再表示した際におかしな表示になってしまいます。
原因ですが、iframeを読み込む際にブラウザバックのヒストリーにiframeで呼び出しているHTMLのキャッシュが残ることで複数表示されるといった症状が起こるようです。
対処法ですが、下記のようにコードを記述してブラウザの戻るボタンを押した時にキャッシュをクリアさせることで問題が解決しました。(要jQuery)
(参考にさせて頂いたサイト) iframeのキャッシュが強すぎる
<script>
$('window').on('unload', function(){});
</script>
iframeを使ったカスタマイズは便利ですが、このような症状にも対応しないといけないのが大変ですね。。
(参考にさせて頂いたサイト) iframeのキャッシュが強すぎる
categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)