馬老師 雲端研究室

Passion inspires professional

馬老師 雲端研究室

踩到Window resize在Preview print的雷

by · 2018-01-25

最近在作案的過程中遇到一個狀況，從Art design那邊拿到的頁面，會在Window resize的時候執行某個Function，本來一切都正常，但測試到Chrome和Firefox預覽列印時發現也會Trigger這個Event，會讓在預覽列印過後的頁面發生問題，所以必須要進行修正，以下是這個案例的說明：

先在測試頁加入以下的程式，發現在預覽列印的時候會Trigger window resize event：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Preview Print Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(window).resize(function() {
            console.log("Window Resize");
        });
    </script>
</head>
<body>
<h1>Window Resize Test</h1>
</body>
</html>
Preview print trigger window resize event
Preview print trigger window resize event

網路上搜尋了一下解決方案，將Script改寫如下，可以順利解決，但不知道是不是最好的方法，如果大家有更好的也別忘了告訴我唷～

openResizeFn();

// Chorme
var print = false;
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
    if (mql.matches) {
        closeResizeFn();
    } else {
        setTimeout(openResizeFn, 2000);
    }
});

// Firefox
window.onbeforeprint = function () {
    closeResizeFn();
};
window.onafterprint = function () {
    setTimeout(openResizeFn, 2000);
};

// Common Function
function openResizeFn() {
    $(window).on("resize", windowResize);
}

function closeResizeFn() {
    $(window).off("resize", windowResize);
}

function windowResize() {
    console.log("Window Resize");
}

Tags:

You may also like...

29,885 Responses

  1. Tracyseils表示:
    2023-12-0703:15:21

    viagra naturale: viagra online spedizione gratuita – viagra generico in farmacia costo

    回覆
  2. TerryRam表示:
    2023-12-0700:59:48

    farmacie online affidabili cialis generico consegna 48 ore acquisto farmaci con ricetta

    回覆
  3. Tracyseils表示:
    2023-12-0623:55:38

    farmacie online affidabili: Farmacie a milano che vendono cialis senza ricetta – farmacia online migliore

    回覆
  4. Tracyseils表示:
    2023-12-0620:43:01

    viagra naturale: viagra senza ricetta – pillole per erezioni fortissime

    回覆
  5. Tracyseils表示:
    2023-12-0617:30:28

    farmacia online miglior prezzo: kamagra gel – farmacie online autorizzate elenco

    回覆
  6. Sidneycrurn表示:
    2023-12-0615:45:05

    https://tadalafilit.store/# acquisto farmaci con ricetta

    回覆
  7. Tracyseils表示:
    2023-12-0614:21:03

    acquisto farmaci con ricetta: farmacia online – farmacie online affidabili

    回覆
  8. Sonnyaftem表示:
    2023-12-0611:26:45

    farmacie on line spedizione gratuita: avanafil prezzo – farmacie online affidabili

    回覆
  9. TerryRam表示:
    2023-12-0611:04:33

    comprare farmaci online all’estero kamagra gel comprare farmaci online all’estero

    回覆
  10. Tracyseils表示:
    2023-12-0608:52:21

    farmaci senza ricetta elenco: farmacia online miglior prezzo – farmacia online più conveniente

    回覆
  11. Tracyseils表示:
    2023-12-0606:14:09

    acquistare farmaci senza ricetta: avanafil prezzo in farmacia – farmacia online

    回覆
  12. Tracyseils表示:
    2023-12-0603:08:18

    farmacie online affidabili: avanafil prezzo – farmacie online sicure

    回覆
  13. Tracyseils表示:
    2023-12-0523:51:42

    farmacie on line spedizione gratuita: farmacia online – farmacie online sicure

    回覆
  14. Sidneycrurn表示:
    2023-12-0521:52:56

    http://avanafilit.icu/# farmacie online affidabili

    回覆
  15. Tracyseils表示:
    2023-12-0520:28:45

    farmacie online sicure: kamagra – farmacia online migliore

    回覆
  16. TerryRam表示:
    2023-12-0519:56:39

    farmacia online senza ricetta kamagra oral jelly farmacia online piГ№ conveniente

    回覆
  17. Sonnyaftem表示:
    2023-12-0517:20:44

    farmacie online affidabili: kamagra – farmacie online sicure

    回覆
  18. Tracyseils表示:
    2023-12-0514:17:37

    migliori farmacie online 2023: farmacia online miglior prezzo – migliori farmacie online 2023

    回覆
  19. Tracyseils表示:
    2023-12-0508:33:15

    acquistare farmaci senza ricetta: farmacia online miglior prezzo – farmaci senza ricetta elenco

    回覆
  20. Sidneycrurn表示:
    2023-12-0503:58:19

    http://avanafilit.icu/# farmacia online piГ№ conveniente

    回覆
  21. TerryRam表示:
    2023-12-0503:48:42

    comprare farmaci online con ricetta cialis prezzo comprare farmaci online con ricetta

    回覆
  22. Tracyseils表示:
    2023-12-0502:08:32

    migliori farmacie online 2023: kamagra oral jelly consegna 24 ore – farmacia online più conveniente

    回覆
  23. Sonnyaftem表示:
    2023-12-0423:12:25

    migliori farmacie online 2023: kamagra oral jelly consegna 24 ore – farmacie online sicure

    回覆
  24. Tracyseils表示:
    2023-12-0422:44:45

    farmacia online migliore: kamagra gel – farmaci senza ricetta elenco

    回覆
  25. Tracyseils表示:
    2023-12-0419:30:58

    comprare farmaci online all’estero: kamagra gold – farmacia online

    回覆
  26. Tracyseils表示:
    2023-12-0416:15:25

    farmacia online più conveniente: farmacia online migliore – farmacia online miglior prezzo

    回覆
  27. TerryRam表示:
    2023-12-0411:27:52

    farmacia online kamagra oral jelly consegna 24 ore migliori farmacie online 2023

    回覆
  28. Sidneycrurn表示:
    2023-12-0410:17:53

    http://tadalafilit.store/# comprare farmaci online con ricetta

    回覆
  29. Tracyseils表示:
    2023-12-0406:58:54

    migliori farmacie online 2023: kamagra oral jelly consegna 24 ore – comprare farmaci online con ricetta

    回覆
  30. Sonnyaftem表示:
    2023-12-0406:41:32

    migliori farmacie online 2023: avanafil prezzo in farmacia – acquistare farmaci senza ricetta

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。