iframe 本来の表示と違う内容が表示される

Question

お世話になります。

弊社サイトにて、iframeを使用して表示している内容があるのですが、
たまに同じページ内で違う箇所に表示しているiframが表示される時があります。

(添付:image.png)
facebookのプラグインを表示している箇所に直前に配置しているiframeの内容が表示しています。

ページを再読み込みすると表示は直ります。

iframeに問題があるのか、それ以外にどのような原因が考えられますでしょうか。
現象について、ご存知でしたらご教示のほどよろしくお願いします。###HR######IMG04f11360e5e7d24155d19879e2b784418.pngIMG0###

Answer

ECマスターズの北原です。

>弊社サイトにて、iframeを使用して表示している内容があるのですが、
たまに同じページ内で違う箇所に表示しているiframが表示される時があります。

私の方で動作確認をしたところ、
ブラウザバックをした際に
発生しているようでした。

ブラウザバックを行った場合、
JavaScriptが正しく動作しない場合があります。

今回の場合ですと、facebookのiframeの上にある
下記のiframeがJavaScriptによって
読み込みを遅らせる処理がございました。



こちら処理に不具合が生じてしまい、
facebookのiframeに別のコンテンツが
表示されてしまった可能性がございます。

解決案としてブラウザバックを検知した場合に
ページをリロードさせるのはいかがでしょうか。

下記のスクリプトタグを埋め込むことで、
ブラウザバックした際にページを
リロードさせることができます。


        window.addEventListener('pageshow', function (event) {
            if (event.persisted) {
                // bfcache発動時の処理
                window.location.reload();
            }
        });
    

ぜひお試しください。

Answer

ECマスターズ 北原様。
お世話になります。

スクリプトタグありがとうございました。

早速、テストページで試しましたが、
ブラウザバックしても別の内容が入ったままでした。

スクリプトタグの配置する位置でリロードする動きが
変わることはありますでしょうか。

またブラウザバックをして、ページがリロードをしたか、
挙動がわかる方法はありましたら、ご教示お願いします。

お手数おかけしますが、宜しくお願い致します。

Answer

ECマスターズの北原です。

>早速、テストページで試しましたが、
>ブラウザバックしても別の内容が入ったままでした

大変失礼しました。
調べたところ以前に送ったスクリプトでは、
ブラウザバックを検知しないことがあるようでした。

お手数ではございますが、
再度下記のスクリプトを
お試しいただけますでしょうか。

    
        if (window.performance.navigation.type == 2) {
            alert('ブラウザバック');
            location.reload();
        }
    

>スクリプトタグの配置する位置でリロードする動きが
>変わることはありますでしょうか。

スクリプトタグの配置する位置によって、
挙動が変わることがございます。

基本的にスクリプトはページの上から順に読み込まれます。
今回のようなページの表示前に処理するようなものは、
なるべく上の方に記述するのが良いです。

具体的には、bodyタグの直後に
記述するとページの読み込み直後に、
スクリプトを発火させることができます。

>またブラウザバックをして、ページがリロードをしたか、
>挙動がわかる方法はありましたら、ご教示お願いします。

今回はif文内にalert('ブラウザバック');を記述しました。
ブラウザバックをした際にアラートが表示されれば、
正しく動作した確認ができます。

動作確認後はalert()をコメントアウトしてください。