teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

onbeforeprintなるイベントがあるらしい

2019/08/05 07:16

投稿

miyabi-sun
miyabi-sun

スコア21461

answer CHANGED
@@ -13,15 +13,22 @@
13
13
 
14
14
  一度変えてしまったHTMLは元には戻せません。
15
15
 
16
- 変数で保存しておいて`element.innerHTML = htmlString;`みたいなコードでゴリ押しではめ込むとかすれば元には戻せますが、
17
- Ctrl+Pのショートカットで印刷したいなケース考え
18
- 印刷する瞬間だけJSを無効(≒壊したHTMLを戻す)という事は基本的に出来いと考えた方が良いしょう。
16
+ 変数で保存しておいて`element.innerHTML = htmlString;`みたいなコードでゴリ押しではめ込むとかすれば元には戻せます
17
+ [onbeforeprint](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint)や[onafterprint](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onafterprint)というイベント存在していので
18
+ Ctrl+Pのショートカットで印刷したいうなケース
19
+ 元々存在していたHTMLを一時的に復元して印刷が終了したら元に戻すという事は可能です。
19
20
 
21
+ しかし、かなりコストがかさみますし、設置したイベントは剥がれるしでバグの温床になりがちで非現実的と言わざるを得ないでしょう。
22
+ なので額面通りに捉えた**印刷時にJSを無効にする**を選ぶのは不可能と考えた方が良いでしょう。
23
+
20
24
  ---
21
25
 
26
+ 従って、JavaScriptによるHTMLの変更を許容しながら、
22
- 解決しては2通あります。
27
+ 印刷の邪魔にならないようにするという向を模索するこになります。
23
- 使い分けたり併用して解決しましょう。
24
28
 
29
+ そちらの意味では解決方法が2通りあります。
30
+ ページの状況に従って使い分けたり併用してください。
31
+
25
32
  - 印刷を見越してHTMLのクリティカルな所は変更しない
26
33
  - PC閲覧時と印刷時に適用するCSSを分ける
27
34