Question

为什么以下网页在Google Chrome上无法打印？ JSFiddle

<!doctype html>
<html>
<head></head>
<body>
<iframe id="f" src="http://placehold.it/350x1500?q=1"></iframe>
<script>
    window.addEventListener("resize",function () {
       var f = document.querySelector("#f");
        f.src = f.src+"1";
        f.style.height="2000px";
    });
</script>
</body>
</html>

如果您无法复制该问题，我使用的是Google Chrome 55.0.2883.95 (Official Build) (64-bit)，我的屏幕尺寸为1920x1080

更有趣的是，当你设置display: none时仍无法打印。 JSFiddle

<!doctype html>
<html>
<head></head>
<body>
<iframe id="f" src="http://placehold.it/350x1500?q=1" style="display: none"></iframe>
<script>
    window.addEventListener("resize",function () {
       var f = document.querySelector("#f");
        f.src = f.src+"1";
        f.style.height="2000px";
    });
</script>
</body>
</html>

更新

f.style.height不是必需的，主要问题是iframe src更改（窗口小部件在其位置需要大小参数）

Answer 1

它与你的resize处理程序有关。如果删除该代码，它可以正常工作。我相信你可以在CSS媒体查询中完成你正在寻找的东西：

<iframe id="f" src="https://placehold.it/350x1500?q=1"></iframe>

@media print {
  #f { height: 2000px }
}

https://jsfiddle.net/7x9sdf79/1/

Chrome打印对话框关闭

1 个答案: