2016-11-30 8 views
0

長いコードの最後のページには結果ページといくつかのアコーディオンスタイルのコントロールがあります。 "ボタンをクリックすると、同じレポートのプリンタフレンドリなバージョンが開きます。プリンタフレンドリーなページが開くと、自動的に印刷ダイアログが表示されます。子ウィンドウのjQueryオープンダイアログは、メインウィンドウでのトグル、非表示、または表示を防止します

ダイアログが開いたら、新しいタブでユーザーがChromeを使用している場合、元のタブに戻ることができますが、トグルボタンは機能しなくなります。 jQuery hideおよびshowも機能しなくなりました。代わりに、キューに入れられているように見えますが、遅延しています。ユーザーが子タブに戻り、印刷ダイアログを閉じるか、タブを閉じると、トグル、非表示、および表示のすべての関数呼び出しが連続して行われます。

これは端のように見えるかもしれませんが、子ウィンドウが親ウィンドウの機能をブロックするのを防ぐ方法、印刷ダイアログが閉じられるまでコントロールを無効にする方法、または無効にする方法があるかどうかを知る必要があります子タブが閉じられるまでコントロールします。私は周りに検索した後、それはsetIntervalsetTimeoutを使用して、すべてのコードをブロックする、クロームのバグだ知っているから

<html><head></head><body> 

<!-- Accordion content below. --> 
<div id="div1"> 
      Here is our content<br /> 
      to be displayed.<br /> 
      Part of the issue becomes<br /> 
      more apparent when<br /> 
      several lines are<br /> 
      present.<br /> 
      Lorem Ipsum...<br /> 
      Lorem Ipsum...<br /> 
      Lorem Ipsum...<br /> 
      Lorem Ipsum...<br /> 
</div> 

<!-- Our collapse/hide button. Will not work when print dialog is open 
    in child tab. --> 
<button id="btn1">Show/Hide Content</button> 

<!-- Our print button --> 
<div><a href="test.php?print=true" target="_blank">Print in New Tab</a></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    // When the button is clicked, show/hide content 
    $('#btn1').on("click", function() { 
     $('#div1').toggle("slow"); 
    }); 

    // Flag used to determine whether we print this page. Pretend that there 
    // is more print-unfriendly cruft that would be removed if this were the 
    // print-friendly page. 
    var do_print = false 

    // if the ?print=true request variable has been appended to the url, 
    // trigger javascript that brings up the print dialog. 
    <?php if(isset($_REQUEST['print'])) :?> 
     do_print=true; 
    <?php endif ?> 

    if(do_print==true) { 
     window.print(); 
    } 

</script> 
</body></html> 

答えて

1

:ここ

は、問題を実証するサンプルコードです。 toggleのアニメーションは setIntervalを使用しているため、ブロックされています。 この問題を回避するには、いくつかの方法があります。

  1. 使用.toggleは、パラメータなしで、アニメーションが使用されていません。

    // When the button is clicked, show/hide content 
    $('#btn1').on("click", function() { 
        $('#div1').toggle("slow"); 
    }); 
    window.disableBtns = function() { 
        // Optionally show some warning message 
        $('#btn1').attr('disabled', true) 
        console.log('disable'); 
    }; 
    window.enableBtns = function() { 
        $('#btn1').attr('disabled', false) 
        console.log('enable'); 
    }; 
    
    // Flag used to determine whether we print this page. Pretend that there 
    // is more print-unfriendly cruft that would be removed if this were the 
    // print-friendly page. 
    var do_print = false 
    
    // if the ?print=true request variable has been appended to the url, 
    // trigger javascript that brings up the print dialog. 
    <?php if(isset($_REQUEST['print'])) :?> 
        do_print=true; 
    <?php endif ?> 
    
    if(do_print==true) { 
        opener.disableBtns(); 
        window.print(); 
        opener.enableBtns(); 
    } 
    
:印刷ダイアログは、このコードを追加することによって、閉じられるまで、メインページ
  • 無効ボタンは、必要に応じて、このページがアクティブでないことをユーザーに伝えるメッセージを表示します

  • 関連する問題