web-dev-qa-db-ja.com

ファンシーボックス-iframeポップアップを閉じるときに親ページを更新する方法

ファンシーボックスのポップアップフレームを閉じると、親ページが更新されます。ポップアップ内にログインページがあるので、ファンシーボックスが閉じたときに親ページを更新して新しいログイン状態を表示する必要があります。

私はそれをiFrameコードなしで動作させることができます：

<script type="text/javascript">
 $(document).ready(function() {
  $("a.iframeFancybox1").fancybox({
   'width': 800,
   'height': 450,   
   'onClosed': function() {   
     parent.location.reload(true); 
    ;}
   });
 });
</script>

しかし、iFrameコードで動作させることはできません。

<script type="text/javascript">
 $(document).ready(function() {
  $('a.iframeFancybox1').fancybox({
   'width': 800,
   'height': 450,
   'type' : 'iframe'
   'onClosed': function() {
     parent.location.reload(true); 
    ;}
   });
 });
</script>

問題は次の行で行うことです：

'type' : 'iframe'


その行を追加するとすぐに、ポップアップが機能しなくなります。

ファンシーボックスでiframeをポップアップ表示し、ボックスが閉じたときに親ページを更新する方法については、誰でも解決策を提案できますか？ありがとう！

jqueryfancybox
13
dave
_$(".fancybox").fancybox({
    type: 'iframe',
    afterClose: function () { // USE THIS IT IS YOUR ANSWER THE KEY Word IS "afterClose"
        parent.location.reload(true);
    }
});
_

または：

jquery.fancybox.jsファイルに移動し、行138に移動します。これは次のようになり、parent.location.reload(true);を追加します

_afterClose: function (opts) {
    if (this.overlay) {
        this.overlay.fadeOut(opts.speedOut || 0, function () {
            $(this).remove();
            parent.location.reload(true);
        });
    }
    this.overlay = null;
}
_
29
Kemal Can ÖZÇELİK
$(".fancybox").fancybox({
            'width'             : '75%',
            'height'            : '65%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'hideOnOverlayClick': false,
            'onClosed'          : function() {
                                  parent.location.reload(true);
                                  }
        });
10
adil

IMOを修正したと言う明らかな欠落のほかに、これはfancyboxの問題ではなく、親の更新の問題です。

「理論的に」これを実現する方法は複数ありますが、「ほとんど」は実際には機能せず、さらに悪いことに実際には何も表示されないため、フレームの親をリロードするのは難しいことがわかりました。テストに使用したWebブラウザーによって発生したエラー。

Chrome、FF、IEでうまく機能するコードを次に示します。

afterClose: function(){
    parent.location.href = parent.location.href;
},

これは基本的に、親hrefを現在の任意のものに設定することを意味します。これにより、実際にはページが更新されます。試してみてください。問題なく動作するはずです。

実際には次の行：

parent.location.href = parent.location.href;

フレームを使用して（もちろん親から）、またはフレームを使用せずにWebページを更新することができます。 HTH。

2
nikolaosinlight

私にとって次のコードは問題なく動作します：

$("a.ic-edit").fancybox({
            'width'     : '65%',
            'height'    : '85%',
            'autoScale'     : false,
            'titleShow' : false,
            'transitionIn'  : 'no',
            'transitionOut' : 'no',
            'scrolling'     : 'no',
            'type'          : 'iframe',
            onCleanup   : function() {
                return window.location.reload();
            }
       });

正確には言えませんが、おそらく「onCleanup」を使用する理由です（実際にはonClosedを使用しようとしませんでした）。

2
Vovkin
'onClosed': function() {
 parent.location.reload(true); 
;} // <----is it ok if you have an extra ';' here?
1
n3ISe

Fancyboxを閉じるために2行を書き込む必要があります。閉じた後、fancyboxを開いた親ページをリロードします。

注意すべきことの1つは、window.openerで試してみると、fancyboxがwindow.openerに関して親の子ウィンドウとして扱われないため、機能しません。

IEはすでに愚かであるため、windows.openerはWindows PhoneでもIEでも機能しません。

<script type="text/javascript">
parent.$.fancybox.close();
         parent.location.reload(true); 
</script>
1
trig_php

リンクの更新：

jQuery(function($){ 
    $('#refresh').click(function ()
        {      
            parent.location.reload();
    });
});

<a href="#" id="refresh">refresh</a>

あなたは与えることができます：

setTimeout(function () {
            parent.location.reload(); 
        }, 1000);

または条件、例えば、

<script>
if(formSend == true){
setTimeout(function () {
                parent.location.reload(); 
            }, 1000);
}
</script>
1
websky

IFrameを閉じるときにPOSTDATA警告が表示されないようにするための回避策

1）フォームを作成してください：

<form name="RefreshForm" method="post" action="" >
<input name="Name1" value="Value1" type="hidden" />
<input name="DatafromPost1" value="ValuefromPOST1" type="hidden" />
<input name="DatafromPost2" value="ValuefromPOST2" type="hidden" />
</form>

2）ファンシーボックスの最後に次の行を追加します。

ファンシーver 2.x.x

afterClose : function() { 
setTimeout('document.RefreshForm.submit()',1000); }

ファンシーバージョン1.3.x

     onClosed : function() { 
setTimeout('document.RefreshForm.submit()',1000); }

1000 = 1秒。

1
LLukaso

「location.reload」で例を使用すると、ページをリロードする必要があることを通知するブラウザポップが表示されます。ボタンをクリックしてページを更新し、警告ポップアップを表示しませんでした。

$(".addDoc").colorbox({
    iframe: true, 
    width: "550px", 
    height: "230px",
    'onClosed': function() {
        $("#btnContSave").click();
    }
});
0
Greg

Shopifyでfancyboxを使用してフォームを閉じるときに更新または再読み込み

私はこれをShopifyで使用していましたが、これは他にも機能します

  jQuery(".add-device").fancybox({
    maxWidth  : 970,
    maxHeight : 700,
    fitToView : false,
    width     : '90%',
    height    : '90%',
    autoSize  : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    beforeClose: function() {
      device_has_subs = false;
      $("#mac_address").prop("readonly", false);
    },
    afterClose    : function() {
      window.location.reload(true);
        }
  });

ここで、AfterCloseがタスクを再生しているときのみ、ウィンドウの代わりに親を書き込むこともできます

afterClose    : function() {
  parent.location.reload(true);
    }

shopifyでフォームをリセットするだけの場合、shopifyで$（ "form"）[0] .reset（）が機能しないため、反復を使用してフォームの値を空にできます

  jQuery(".add-device").fancybox({
    maxWidth  : 970,
    maxHeight : 700,
    fitToView : false,
    width     : '90%',
    height    : '90%',
    autoSize  : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    beforeClose: function() {
      device_has_subs = false;
      $("#mac_address").prop("readonly", false);

      var array_element = document.getElementById("form_id");
      if (array_element){

        for (i=0; i < array_element.length; i++){
            element = array_element[i].type.toLowerCase();
            switch(element){
              case "text":
                  array_element[i].value = "";
                  break;
              case "hidden":
                  array_element[i].value = "";
                  break;
              case "email":
                  array_element[i].value = "";
                  break;
              case "checkbox":
                  if(array_element[i].checked){
                    array_element[i].checked = false;
                  }
                  break;
              case "select-one":
                  array_element[i].selectedIndex = -1;
                  break;
              case "select-multi":
                  array_element[i].selectedIndex = -1;
                  break;
              default:
                  break;
          }

        }

      }

    },
  });

form_idはフォームIDです

0
Vinay Kumar