在子窗口中的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打开对话框可防止在主窗口中切换，隐藏或显示

回答

相关问题