馬老師 雲端研究室

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,783 Responses

  1. Mariophity表示:
    2023-12-0916:23:03

    viagra online cerca de bilbao: viagra generico – viagra para mujeres

    回覆
  2. JasonBib表示:
    2023-12-0915:15:53

    https://vardenafilo.icu/# farmacia online barata

    回覆
  3. Eddieduart表示:
    2023-12-0914:51:14

    farmacia online internacional kamagra oral jelly farmacia online 24 horas

    回覆
  4. Ronniewessy表示:
    2023-12-0914:40:30

    https://farmacia.best/# farmacia envíos internacionales

    回覆
  5. Ronniewessy表示:
    2023-12-0911:44:11

    https://kamagraes.site/# farmacia barata

    回覆
  6. Mariophity表示:
    2023-12-0900:09:50

    п»їfarmacia online: comprar kamagra en espana – farmacia online 24 horas

    回覆
  7. JasonBib表示:
    2023-12-0822:30:51

    https://farmacia.best/# farmacias online seguras en espaГ±a

    回覆
  8. Eddieduart表示:
    2023-12-0820:22:48

    farmacia envГ­os internacionales farmacia 24h farmacia barata

    回覆
  9. Ronniewessy表示:
    2023-12-0820:14:00

    http://vardenafilo.icu/# farmacia envíos internacionales

    回覆
  10. Ronniewessy表示:
    2023-12-0817:03:46

    http://kamagraes.site/# farmacia online madrid

    回覆
  11. Ronniewessy表示:
    2023-12-0814:04:37

    https://kamagraes.site/# farmacia online 24 horas

    回覆
  12. Ronniewessy表示:
    2023-12-0811:16:09

    https://sildenafilo.store/# comprar viagra contrareembolso 48 horas

    回覆
  13. Ronniewessy表示:
    2023-12-0808:27:10

    http://kamagraes.site/# farmacias online baratas

    回覆
  14. Mariophity表示:
    2023-12-0808:09:05

    farmacia envГ­os internacionales: vardenafilo – farmacia 24h

    回覆
  15. JasonBib表示:
    2023-12-0806:36:36

    https://kamagraes.site/# farmacias online seguras

    回覆
  16. Ronniewessy表示:
    2023-12-0805:40:08

    https://farmacia.best/# farmacia online 24 horas

    回覆
  17. Eddieduart表示:
    2023-12-0803:39:28

    farmacia online 24 horas comprar cialis online seguro opiniones farmacia barata

    回覆
  18. Ronniewessy表示:
    2023-12-0802:38:15

    http://tadalafilo.pro/# farmacia online madrid

    回覆
  19. Ronniewessy表示:
    2023-12-0723:29:33

    https://vardenafilo.icu/# farmacias online seguras en españa

    回覆
  20. Mariophity表示:
    2023-12-0720:35:53

    farmacia 24h: Precio Levitra En Farmacia – farmacia 24h

    回覆
  21. Ronniewessy表示:
    2023-12-0720:21:04

    https://vardenafilo.icu/# farmacias online seguras

    回覆
  22. JasonBib表示:
    2023-12-0718:32:47

    http://farmacia.best/# п»їfarmacia online

    回覆
  23. Ronniewessy表示:
    2023-12-0717:06:16

    https://farmacia.best/# farmacia online envío gratis

    回覆
  24. Eddieduart表示:
    2023-12-0714:47:52

    farmacias online baratas Comprar Levitra Sin Receta En Espana farmacia online 24 horas

    回覆
  25. Ronniewessy表示:
    2023-12-0714:03:23

    http://vardenafilo.icu/# farmacia online

    回覆
  26. потолки натяжные москва表示:
    2023-12-0713:31:53

    потолки натяжные москва

    回覆
  27. Tracyseils表示:
    2023-12-0711:44:13

    farmacia online senza ricetta: kamagra oral jelly consegna 24 ore – top farmacia online

    回覆
  28. Sidneycrurn表示:
    2023-12-0709:44:24

    http://farmaciait.pro/# farmacie online affidabili

    回覆
  29. Tracyseils表示:
    2023-12-0706:18:24

    farmacia online miglior prezzo: kamagra gold – acquisto farmaci con ricetta

    回覆
  30. Sonnyaftem表示:
    2023-12-0705:42:16

    farmacia online migliore: dove acquistare cialis online sicuro – farmacia online senza ricetta

    回覆

發佈留言

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