踩到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...

28,484 Responses

  1. CharlieMougs表示:

    kraken – кра ссылка, kra30 at

  2. Peterclada表示:

    Kamagra Oral Jelly pas cher kamagra oral jelly kamagra livraison 24h

  3. Robertfap表示:

    http://tadalmed.com/# Acheter Viagra Cialis sans ordonnance

  4. CharlieMougs表示:

    kraken вход – kraken зеркало, кракен магазин

  5. Bernardshoor表示:

    Acheter Cialis: Pharmacie en ligne Cialis sans ordonnance – Acheter Cialis 20 mg pas cher tadalmed.shop

  6. BradleyJaire表示:

    Acheter Kamagra site fiable: kamagra livraison 24h – kamagra gel

  7. Prokarniz表示:

    Инновационные электроприводы для горизонтальных жалюзи
    электропривод для горизонтальных жалюзи электропривод для горизонтальных жалюзи .

  8. Bryansnake表示:

    можно проверить ЗДЕСЬ Крипто босс зеркало

  9. Peterclada表示:

    pharmacie en ligne france livraison belgique Meilleure pharmacie en ligne pharmacie en ligne avec ordonnance pharmafst.shop

  10. BillieLet表示:

    Achat mГ©dicament en ligne fiable: pharmacie en ligne – pharmacies en ligne certifiГ©es pharmafst.com

  11. Robertfap表示:

    https://pharmafst.shop/# pharmacie en ligne france fiable

  12. Bernardshoor表示:

    Tadalafil achat en ligne: cialis prix – Acheter Cialis tadalmed.shop

  13. Robertfap表示:

    https://kamagraprix.com/# achat kamagra

  14. Bernardshoor表示:

    cialis generique: Tadalafil 20 mg prix en pharmacie – cialis prix tadalmed.shop

  15. Robertfap表示:

    https://pharmafst.com/# pharmacie en ligne france fiable

  16. Peterclada表示:

    achat kamagra kamagra oral jelly kamagra pas cher

  17. BradleyJaire表示:

    Kamagra Oral Jelly pas cher: Achetez vos kamagra medicaments – kamagra oral jelly

  18. BillieLet表示:

    kamagra en ligne: Acheter Kamagra site fiable – Kamagra Commander maintenant

  19. BradleyJaire表示:

    Achat mГ©dicament en ligne fiable: pharmacie en ligne sans ordonnance – pharmacie en ligne pas cher pharmafst.com

  20. Peterclada表示:

    kamagra livraison 24h Kamagra Oral Jelly pas cher kamagra oral jelly

  21. BradleyJaire表示:

    Achetez vos kamagra medicaments: kamagra en ligne – kamagra 100mg prix

  22. CharlieMougs表示:

    kra31 – Kra31.cc, kra at

  23. Robertfap表示:

    https://kamagraprix.shop/# kamagra en ligne

  24. Bernardshoor表示:

    pharmacie en ligne france livraison internationale: pharmacie en ligne sans ordonnance – Achat mГ©dicament en ligne fiable pharmafst.com

發佈留言

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