Zen*_*noo 9 javascript css iframe google-chrome
我偶然发现了一个似乎是关于Chrome 65的错误iframes
.
我不能用一个片段来演示这个,所以我使用了这个JSFiddle.
问题是,如果iframe
是display: none;
,则.print()
上说,iframe
不会打印出任何东西.
它只发生在Chrome 65上,而不是Chrome 64上.
这是代码:
<iframe id="frame"></iframe>
<iframe id="frame2" class="hidden"></iframe>
<button class="db">Print without display: none;</button>
<button class="dn">Print with display: none;</button>
$('.db').on('click',function(){
$('#frame').contents().find('body').append('<p>Test without <code>display: none;</code>!</p>')
$('#frame')[0].contentWindow.print();
});
$('.dn').on('click',function(){
$('#frame2').contents().find('body').append('<p>Test with <code>display: none;</code>!</p>')
$('#frame2')[0].contentWindow.print();
});
.hidden{
display: none;
}
Run Code Online (Sandbox Code Playgroud)
PS:不要尝试将其编辑为片段,iframe在其中不起作用.
这可能是一个刻意的改变,但我不知道肯定会说.如果你想去探索,这个变化似乎是https://crrev.com/526112 ; 谷歌文档有一些后果,所以你并不是唯一一个试图解决这个问题的人.
我可以通过使用来解决它
visibility: hidden;
position: absolute;
Run Code Online (Sandbox Code Playgroud)
在iframe上模拟display: none
将其从正常流程中取出但仍然允许它执行自己的布局的效果.https://jsfiddle.net/28w1tomv/