踩到Window resize在Preview print的雷

最近在作案的過程中遇到一個狀況,從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");
}

You may also like...

15,197 Responses

  1. DennisRep表示:

    https://sildenafilo.men/# sildenafilo 100mg precio farmacia

  2. Indian and Pakistani food.

  3. There’s still time to enjoy end of summer offers!

  4. DouglasHoapy表示:

    1xBet
    1xBet offers free promo codes that provide users with bonuses without requiring a deposit. These codes are a great way to try out the platform and win real money without risking your own funds.

  5. With quick winter approaching and the primary snowfall occurring in some places, it is essential to be prepared for the next storm.

  6. Just came from google to your website have to say thanks.

  7. This look is for those who love the shade pink!

  8. Normanfer表示:

    sildenafilo 100mg farmacia: viagra precio – comprar viagra contrareembolso 48 horas

  9. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники

  10. Если вы искали где отремонтировать сломаную технику, обратите внимание – сервис центр в волгограде

  11. I’m so happy to read this. This is the kind of manual that needs to be given and not the random misinformation that is at the other blogs. Appreciate your sharing this best doc.

  12. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники

  13. JamesMix表示:

    farmacia online 24 horas: comprar cialis online seguro – farmacia online 24 horas

  14. Normanfer表示:

    farmacias online baratas: Cialis sin receta – farmacia online madrid

  15. DennisRep表示:

    https://tadalafilo.bid/# farmacia online 24 horas

  16. Если вы искали где отремонтировать сломаную технику, обратите внимание – тех профи

  17. FloydDwent表示:

    http://sildenafilo.men/# viagra entrega inmediata
    farmacias online seguras

  18. Normanfer表示:

    farmacias online seguras en espaГ±a: Cialis generico – farmacias online seguras

  19. Профессиональный сервисный центр по ремонту парогенераторов в Москве.
    Мы предлагаем: парогенератор ремонт
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  20. Профессиональный сервисный центр по ремонту парогенераторов в Москве.
    Мы предлагаем: ремонт парогенераторов москва
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  21. Профессиональный сервисный центр по ремонту парогенераторов в Москве.
    Мы предлагаем: ремонт парогенераторов с гарантией
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  22. Fantastic piece of writing here1

  23. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: сервисные центры в перми
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  24. JamesMix表示:

    sildenafilo 50 mg comprar online: viagra generico – comprar viagra en espaГ±a envio urgente contrareembolso

  25. DennisRep表示:

    http://tadalafilo.bid/# farmacias online seguras

  26. Normanfer表示:

    farmacias direct: mejores farmacias online – farmacias online baratas

  27. Профессиональный сервисный центр по ремонту кнаручных часов от советских до швейцарских в Москве.
    Мы предлагаем: срочный ремонт часов
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

發佈留言

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