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

22,083 Responses

  1. Joshuareoto表示:

    mexican online pharmacies prescription drugs https://certpharm.com/# Mexican Cert Pharm

  2. AnthonyNum表示:

    Best Mexican pharmacy online: pharmacies in mexico that ship to usa – mexican pharmacy

  3. Joshuareoto表示:

    medicine in mexico pharmacies https://certpharm.shop/# mexican pharmacy online

  4. LarrykeW表示:

    Legit online Mexican pharmacy Cert Pharm Legit online Mexican pharmacy

  5. Joshuareoto表示:

    mexican online pharmacies prescription drugs https://certpharm.com/# mexican pharmacy online

  6. AnthonyNum表示:

    mexican pharmacy: Mexican Cert Pharm – Cert Pharm

  7. If you don’t mind, where do you host your weblog? I am looking for a very good web host and your webpage seams to be extremely fast and up most the time…

  8. LarryHiz表示:

    pinco slot: pinco.legal – pinco.legal

  9. mybet88表示:

    A neighbor of mine encouraged me to take a look at your blog site couple weeks ago, given that we both love similar stuff and I will need to say I am quite impressed.

  10. Making hard to understand topics accessible is a gift, and you have it. Thanks for sharing it with us.

  11. The dedication to high quality content is evident. Keep up the great work!

  12. LarryHiz表示:

    plinko casino: plinko nl – plinko betrouwbaar

  13. The expertise and hard work shine through, making me admire you more with each word.

  14. This is the most thorough piece I’ve read on the topic. The dedication to research is admirable.

  15. The perspective is incredibly valuable to me. Thanks for opening my eyes to new ideas.

  16. Dwightprugs表示:

    https://plinkocasinonl.com/# plinko casino nederland

  17. MichaelBrefe表示:

    plinko germany: plinko wahrscheinlichkeit – Plinko Deutsch

  18. MichaelBrefe表示:

    Plinko game: Plinko-game – Plinko game for real money

  19. Genuinely impressed by The analysis. I was starting to think depth had gone out of style. Kudos for proving me wrong!

  20. 152681 668001Hello! I just now would like to supply a massive thumbs up for any fantastic information you could have here within this post. We are coming back to your weblog post for further soon. 979024

  21. Boycenog表示:

    https://plinkodeutsch.com/# Plinko Deutsch

  22. Louisembap表示:

    How the Business Model of an SEO Company Works
    тут
    While some marketing agencies provide a wide array of services, an SEO company generally focuses its expertise on organic ranking improvements. Their business model can include a monthly retainer, one-time project fees, or performance-based pricing. In the monthly retainer model, the SEO company devotes ongoing resources to adjust strategies, produce new content, and monitor keyword performance. A one-time project might be a large-scale technical overhaul or a complete content revamp. Performance-based pricing, less common but still seen in some arrangements, involves compensation tied to achieving specific milestones like page-one rankings for defined keywords. Regardless of the payment structure, the guiding principle is to consistently enhance the client’s online visibility and measure success through quantifiable data.

  23. The depth of The research really stands out. It’s clear you’ve put a lot of thought into this.

  24. The post added a new layer to my understanding of the subject. Thanks for sharing The knowledge.

  25. LarryHiz表示:

    plinko game: plinko france – plinko

  26. Thanks for the hard work. I could almost see the sweat on the keyboard. Much appreciated!

  27. The post has been incredibly helpful. Thank you for the guidance!

  28. Dwightprugs表示:

    https://plinkocasi.com/# Plinko game for real money

發佈留言

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