在子窗口中的jQuery打開對話框可防止在主窗口中切換，隱藏或顯示

我有一個較老的代碼庫，其中冗長進程的最後一頁有一個結果頁面，帶有一些手風琴風格的控件，還有一個「打印此「按鈕，打開相同報告的打印版本。當打印機友好的頁面打開時，它會自動打開打印對話框。在子窗口中的jQuery打開對話框可防止在主窗口中切換，隱藏或顯示

一旦對話框打開，在新選項卡中，如果用戶使用Chrome，用戶可以切換回原始選項卡，但切換按鈕不再有效。 jQuery hide和show函數不再起作用。相反，他們似乎排隊，但延遲。一旦用戶切換回子選項卡並關閉打印對話框或關閉選項卡，則所有切換，隱藏和顯示功能調用都將以背對背的方式進行。

這看起來像是一個邊緣情況，但我需要知道是否有辦法阻止子窗口在父窗口中阻止功能，在打印對話框關閉之前禁用控件或禁用控制，直到子標籤關閉。

這裏是一個示例代碼來演示該問題：

<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>

來源

2016-11-30 TMorgan

據我所知周圍進行搜索後，這是Chrome瀏覽器的一個bug，阻止使用setInterval和setTimeout的所有代碼。動畫toggle使用setInterval，所以它被阻止。有幾種方法來解決此問題：

使用.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(); 
}

來源

2016-11-30 15:48:29 ntahoang

在子窗口中的jQuery打開對話框可防止在主窗口中切換，隱藏或顯示

回答

相關問題