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

25,965 Responses

  1. Pingidiof表示:

    dark web market urls darknet sites

  2. ILooklWat表示:

    Нужна арматура оптом в Москве – вам на armatura-v-mosmow.ru за выгодными ценами за метр и тонну.

  3. FNDavidemert表示:

    darknet market lists dark market

  4. Malcolmseern表示:

    online apotheek online apotheek Online apotheek Nederland met recept

  5. Louislen表示:

    https://apotheekmax.shop/# Online apotheek Nederland zonder recept

  6. Derekgroum表示:

    apotek online recept: Apotek hemleverans idag – Apotek hemleverans recept

  7. Michaeltor表示:

    Apotek hemleverans idag: Apoteket online – Apoteket online

  8. HomerFaw表示:

    https://apotheekmax.com/# Apotheek online bestellen

  9. LarryTus表示:

    Strategy and Planning: How an SEO Agency Sets the Stage for Success
    link
    Before any tangible optimization begins, a reputable SEO agency invests time in research and planning. They evaluate the client’s goals, industry landscape, and competitor positioning. If, for instance, a client aims to capture local customers, the agency may focus on local SEO tactics like Google Business Profile optimization and localized content. On the other hand, an e-commerce client might need a product-centric strategy emphasizing product page optimizations, schema markup, and robust category descriptions. This strategic planning phase is crucial because it ensures that every subsequent action is driven by data, aligning with the client’s broader marketing objectives.

  10. Louislen表示:

    http://apotheekmax.com/# online apotheek

  11. Derekgroum表示:

    apotek pa nett: Apotek hemleverans recept – Apotek hemleverans idag

  12. Brianrub表示:

    Кому будет полезен «форум мам»?
    Будущим мамам: Женщины, которые только планируют беременность или уже находятся в ожидании ребёнка, часто нуждаются в эмоциональной поддержке и практических рекомендациях. Форум помогает узнать о том, как лучше
    ссылка
    питаться, какие обследования пройти, как подготовиться к родам и избежать распространённых страхов.
    Молодым мамам: Первый год жизни малыша полон вызовов: грудное вскармливание, выбор смесей, смена режимов сна и бодрствования, уход за ребёнком в разных сезонах года, профилактика болезней и многое другое. На форуме мам можно найти единомышленниц, которые уже нашли ответы на подобные вопросы.
    Опытным родителям: Когда ребёнок подрастает, меняются и задачи: адаптация в детском саду, подготовка к школе, появление второго ребёнка, а позже – выбор кружков и секций. Все эти вопросы также обсуждаются в отдельных тематических ветках.
    Папам и другим родственникам: Несмотря на то, что название звучит как «форум мамочек», мужчины и другие члены семьи тоже часто участвуют в обсуждениях, узнавая больше о воспитании и взаимодействии с детьми.

  13. Louislen表示:

    https://apotekonlinerecept.shop/# Apotek hemleverans idag

  14. Louislen表示:

    https://apotheekmax.com/# online apotheek

  15. Derekgroum表示:

    Apotheek Max: Apotheek online bestellen – Beste online drogist

  16. JeffreyVot表示:

    кракен зеркало – актуальные ссылки на сайт Кракен, кракен ссылка актуальная

  17. Rogertug表示:

    меры безопасности на Кракен – как установить Tor браузер, Кракен Telegram канал актуальные новости

  18. Michaeltor表示:

    apotek pa nett: Apoteket online – Apotek hemleverans idag

  19. Rogertug表示:

    кракен зеркало актуальное – кракен площадка, кракен актуальная ссылка

發佈留言

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