tech

埋め込みモードで画面が真っ白になる現象を回避する方法

下田敦

ChoiceRESERVEを埋め込みモードで運用する際、iframeの縦幅が非常に長いと、iframe内での画面遷移後にフレーム内が真っ白になり、利用者を混乱させてしまうケースがあります。対処方法として、jqueryを使い、iframe内でページ遷移が発生したら、埋め込み元ページの指定の位置へ自動的に移動する運用をご提案いたします。

2パターンの運用方法をご案内しますので、埋め込み元のページのどの部分に<iframe>を設置するかによって使い分けてみてください。

とにかく埋め込み元ページの最上部へ移動させるパターン

サンプル画面

デモ用のサンプル画面はこちらから

設定方法について

設定はとても簡単です。3つのステップに分けてご案内します。

STEP1iframeタグにidを指定します。

ChoiceRESERVEの埋め込み用の<iframe>タグに、お好きなidを指定して下さい。

<IFRAME id="cr" SRC="https://{お客様のご利用アカウント名}.resv.jp/index.php" name="a" frameborder="0" scrolling="auto" vspace="0" width="700" height="1600" align="center">
このブラウザはインラインフレームに対応しておりません。インラインフレーム対応のブラウザでご覧ください。
</IFRAME>

STEP2jqueryを設置する

埋め込み元のページへjqueryを設置して下さい※下記はGoogleのCDNを利用した例

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

STEP3スクリプトを書く。

以下のように、指定したIDに対してloadメソッドを適用します。scrollTopの値を変更すれば、ページトップからの距離を変更できます。また、duration の値を変更することで、スピードを調節できます。

   $(function(){
      $('#cr').load(function(){
         $( 'html,body' ).animate( {scrollTop:0} , { duration: 300,}  ) ;
      });
   });

<iframe>内の読み込み回数によって移動させる位置を変更するパターン

初めてページを開いた時にはブラウザトップからコンテンツを表示したいが、<iframe>内での遷移が始まったら、ブラウザトップへ移動ではなく、<iframe>タグの開始位置に移動させたい時にはこちらの方法をお試し下さい。パターン1の運用方法ですと、<iframe>内のコンテンツが読み込まれる度に、ブラウザトップへ移動してしまい、ユーザビリティに難があります。この方法なら、<iframe>の読み込まれた回数に応じて処理を分けることができますので、より快適なユーザーエクスペリエンスを提供できます。

サンプル画面

デモ用のサンプル画面はこちらから

設定方法について

パターン1のコードを編集して、以下のように記述します。

   $(function(){
      //#crの位置を取得
      var position = $('#cr').offset().top;
      var i = 0;
      $('#cr').load(function(){
         i++;
         if(i == 1){
            //はじめてページを表示する場合はベージトップへ 
            $( 'html,body' ).animate( {scrollTop:0} , { duration: 300,}  ) ;
            }else{
            //iframeの読み込みが2回め以降なら#crの位置へ
            $( 'html,body' ).animate( {scrollTop:position} , {duration: 300,}  ) ;
            }
      });
   });

0

0

このエントリーをはてなブックマークに追加

この記事を書いた人

下田敦

下田敦

主に予約システム「ChoiceRESERVE」のフロントエンド、製品サイトの運営・管理を行っています。ChoiceRESERVEをもっと便利に、もっと楽しく使っていただけるよう、機能の説明やノウハウをご紹介します。

この人が書いた記事

関連する記事

前の記事

自社のサービスサイトから会員連携機能でシームレスな予約を実現。予約者の利便性向上に【KOIL導入事例】
ページトップへ