馬老師 雲端研究室

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

30,386 Responses

  1. Louseced表示:
    2023-12-2507:29:49

    gcse english literature essay examples https://bookmarkangaroo.com/story16140692/the-smart-trick-of-best-custom-essay-writing-service-that-nobody-is-discussing essay about my school in english

    回覆
  2. RalphBic表示:
    2023-12-2505:28:50

    http://edpills.tech/# ed medication online edpills.tech

    回覆
  3. Joshuafab表示:
    2023-12-2504:20:07

    http://canadapharmacy.guru/# canadian pharmacy world reviews canadapharmacy.guru

    回覆
  4. DavidFUs表示:
    2023-12-2504:05:55

    canadianpharmacyworld online canadian pharmacy reviews – canadian online pharmacy canadiandrugs.tech

    回覆
  5. JeffreyAmush表示:
    2023-12-2503:01:39

    Online medicine home delivery п»їlegitimate online pharmacies india п»їlegitimate online pharmacies india indiapharmacy.guru

    回覆
  6. RalphBic表示:
    2023-12-2501:43:45

    https://canadiandrugs.tech/# canadian pharmacy price checker canadiandrugs.tech

    回覆
  7. RalphBic表示:
    2023-12-2422:21:00

    http://indiapharmacy.guru/# indian pharmacy paypal indiapharmacy.guru

    回覆
  8. RalphBic表示:
    2023-12-2419:06:37

    http://indiapharmacy.guru/# indian pharmacy paypal indiapharmacy.guru

    回覆
  9. RalphBic表示:
    2023-12-2415:28:01

    https://canadiandrugs.tech/# onlinepharmaciescanada com canadiandrugs.tech

    回覆
  10. Wilfredtar表示:
    2023-12-2415:10:57

    world pharmacy india indian pharmacy online – indian pharmacies safe indiapharmacy.guru

    回覆
  11. RalphBic表示:
    2023-12-2412:23:43

    https://canadiandrugs.tech/# canadian pharmacy ed medications canadiandrugs.tech

    回覆
  12. JeffreyAmush表示:
    2023-12-2410:31:06

    canadian pharmacies that deliver to the us cheap canadian pharmacy canadian neighbor pharmacy canadiandrugs.tech

    回覆
  13. RalphBic表示:
    2023-12-2409:34:40

    http://edpills.tech/# ed pills edpills.tech

    回覆
  14. DavidFUs表示:
    2023-12-2408:41:57

    new ed pills erectile dysfunction drugs – best ed drug edpills.tech

    回覆
  15. RalphBic表示:
    2023-12-2406:49:12

    http://canadiandrugs.tech/# canadian mail order pharmacy canadiandrugs.tech

    回覆
  16. RalphBic表示:
    2023-12-2403:19:30

    http://indiapharmacy.guru/# mail order pharmacy india indiapharmacy.guru

    回覆
  17. Joshuafab表示:
    2023-12-2400:09:47

    http://mexicanpharmacy.company/# mexico drug stores pharmacies mexicanpharmacy.company

    回覆
  18. RalphBic表示:
    2023-12-2323:50:43

    http://canadiandrugs.tech/# canadian pharmacy canadiandrugs.tech

    回覆
  19. RalphBic表示:
    2023-12-2320:30:24

    http://edpills.tech/# medicine for erectile edpills.tech

    回覆
  20. Wilfredtar表示:
    2023-12-2320:21:26

    reputable indian online pharmacy indianpharmacy com – indian pharmacies safe indiapharmacy.guru

    回覆
  21. Viergy表示:
    2023-12-2319:48:40

    what is your greatest fear essay https://buyessaysonlinedsd69012.blog2freedom.com/23662352/not-known-facts-about-buy-essays-online-d-sd what is diversity essay

    回覆
  22. JeffreyAmush表示:
    2023-12-2318:29:19

    my canadian pharmacy canadian drugs safe reliable canadian pharmacy canadiandrugs.tech

    回覆
  23. RalphBic表示:
    2023-12-2316:58:44

    http://indiapharmacy.guru/# buy medicines online in india indiapharmacy.guru

    回覆
  24. RalphBic表示:
    2023-12-2313:37:52

    https://canadiandrugs.tech/# canada drugs canadiandrugs.tech

    回覆
  25. DavidFUs表示:
    2023-12-2313:24:33

    canadian pharmacy sarasota online canadian pharmacy – canadian pharmacy ed medications canadiandrugs.tech

    回覆
  26. RalphBic表示:
    2023-12-2310:50:27

    http://indiapharmacy.guru/# reputable indian online pharmacy indiapharmacy.guru

    回覆
  27. RalphBic表示:
    2023-12-2308:17:23

    http://canadiandrugs.tech/# canadian pharmacy ed medications canadiandrugs.tech

    回覆
  28. RalphBic表示:
    2023-12-2305:25:26

    https://indiapharmacy.guru/# best india pharmacy indiapharmacy.guru

    回覆
  29. JeffreyAmush表示:
    2023-12-2304:37:16

    canadian pharmacy ltd canadian pharmacies compare real canadian pharmacy canadiandrugs.tech

    回覆
  30. RalphBic表示:
    2023-12-2301:43:01

    http://canadiandrugs.tech/# canadian pharmacy 24 com canadiandrugs.tech

    回覆

發佈回覆給「DavidFUs」的留言 取消回覆

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