owned mediaウェブ制作に役立つコンテンツを発信中!

楽天ECサイト(RMS)でiframeを使ったカスタマイズで発生するバグの対処法

前回記事「楽天ECサイト(RMS)で商品詳細ページをカスタマイズする 」では、iframeを使って、外部HTMLを商品情報欄に表示させることで、カスタマイズに柔軟性を持たせる方法をまとめていきました。   ただ、その方法でカスタマイズした時にiframe部分の表示がおかしくなる場合があります。モダンブラウザでは見られないようですが、IEなどで発生する症状のようです。具体的にこの症状が発生するタイミングですが、ブラウザの戻るボタンを押して再表示した際におかしな表示になってしまいます。   原因ですが、iframeを読み込む際にブラウザバックのヒストリーにiframeで呼び出しているHTMLのキャッシュが残ることで複数表示されるといった症状が起こるようです。   対処法ですが、下記のようにコードを記述してブラウザの戻るボタンを押した時にキャッシュをクリアさせることで問題が解決しました。(要jQuery)
<script>
  $('window').on('unload', function(){});
</script>
  iframeを使ったカスタマイズは便利ですが、このような症状にも対応しないといけないのが大変ですね。。  
  (参考にさせて頂いたサイト) iframeのキャッシュが強すぎる
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram