LoginSignup
4
2

More than 5 years have passed since last update.

iframeを含むページが印刷できない

Last updated at Posted at 2017-06-21

2017年7月のWindows Updateで解消したようです。

現象

2017年6月のWindows Update以降、IEでiframe内のページを印刷すると空白だったり404エラーだったりという問題が発生。
ちなみにframesetの場合、この問題は発生しないようなので古いページは逆にセーフ!
※framesetはHTML5では廃止

dummy.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <a href="#" onclick="window.print()">window.print</a>
</body>
</html>
iframe.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iframe</title>
</head>
<body>
  <!-- 印刷できない -->
  <iframe src="dummy.html"></iframe>
</body>
</html>
frameset.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>frameset</title>
</head>
<frameset>
  <!-- 印刷できる -->
  <frame src="dummy.html"></frame>
</frameset>
</html>

対策

デベロッパーフォーラムによるとPrintPreview(jquery plugin)かdocument.execCommand('print', false, null)を使えば回避できるっぽいことが書かれている。
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12349663/#comment-1

PrintPreview

印刷対象を指定して印刷用の別ウィンドウをポップアップするプラグイン?
https://github.com/etimbo/jquery-print-preview-plugin
iframeが問題っぽいので別ウィンドウで開くことで回避

document.execCommand

https://w3c.github.io/editing/execCommand.html
execCommand(command, show UI, value)
まだW3Cで正式勧告されていない
execCommandについてぐぐっても第1引数のcommandにprintが見つからない…

というわけで試してみた

dummy2.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <!-- 印刷できない -->
  <a href="#" onclick="window.print()">window.print</a><br>

  <!-- 印刷できる -->
  <a href="#" onclick="document.execCommand('print', false, null)">document.execCommand</a>
</body>
</html>

とりあえずIE11(11.413.15063.0)では印刷できた。
ブラウザによってできるできないがありそうなので、IEに限る&先にコマンド自体が使えるかチェックする…などが必要か。

4
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2