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

26,893 Responses

  1. Derekgroum表示:

    Apotek hemleverans recept: apotek online recept – Apoteket online

  2. Louislen表示:

    https://kamagrapotenzmittel.com/# Kamagra online bestellen

  3. HomerFaw表示:

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

  4. Derekgroum表示:

    Apotheek Max: de online drogist kortingscode – Online apotheek Nederland zonder recept

  5. Michaeltor表示:

    Betrouwbare online apotheek zonder recept: Online apotheek Nederland met recept – Apotheek online bestellen

  6. Malcolmseern表示:

    kamagra Kamagra Original kamagra

  7. Louislen表示:

    https://apotheekmax.com/# Beste online drogist

  8. Derekgroum表示:

    Kamagra Oral Jelly: Kamagra kaufen – Kamagra kaufen

  9. Rabyemert表示:

    dark web drug marketplace dark market link

  10. HomerFaw表示:

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

  11. Michaeltor表示:

    Beste online drogist: ApotheekMax – de online drogist kortingscode

  12. Derekgroum表示:

    Apotheek online bestellen: Online apotheek Nederland zonder recept – ApotheekMax

  13. Billynot表示:

    Mist and microlightning
    solflare wallet
    To recreate a scenario that may have produced Earth’s first organic molecules, researchers built upon experiments from 1953 when American chemists Stanley Miller and Harold Urey concocted a gas mixture mimicking the atmosphere of ancient Earth. Miller and Urey combined ammonia (NH3), methane (CH4), hydrogen (H2) and water, enclosed their “atmosphere” inside a glass sphere and jolted it with electricity, producing simple amino acids containing carbon and nitrogen. The Miller-Urey experiment, as it is now known, supported the scientific theory of abiogenesis: that life could emerge from nonliving molecules.
    For the new study, scientists revisited the 1953 experiments but directed their attention toward electrical activity on a smaller scale, said senior study author Dr. Richard Zare, the Marguerite Blake Wilbur Professor of Natural Science and professor of chemistry at Stanford University in California. Zare and his colleagues looked at electricity exchange between charged water droplets measuring between 1 micron and 20 microns in diameter. (The width of a human hair is 100 microns.)

    “The big droplets are positively charged. The little droplets are negatively charged,” Zare told CNN. “When droplets that have opposite charges are close together, electrons can jump from the negatively charged droplet to the positively charged droplet.”
    The researchers mixed ammonia, carbon dioxide, methane and nitrogen in a glass bulb, then sprayed the gases with water mist, using a high-speed camera to capture faint flashes of microlightning in the vapor. When they examined the bulb’s contents, they found organic molecules with carbon-nitrogen bonds. These included the amino acid glycine and uracil, a nucleotide base in RNA.

    “We discovered no new chemistry; we have actually reproduced all the chemistry that Miller and Urey did in 1953,” Zare said. Nor did the team discover new physics, he added — the experiments were based on known principles of electrostatics.

    “What we have done, for the first time, is we have seen that little droplets, when they’re formed from water, actually emit light and get this spark,” Zare said. “That’s new. And that spark causes all types of chemical transformations.”

  14. HerbertDrilk表示:

    A tiny rainforest country is growing into a petrostate. A US oil company could reap the biggest rewards
    swell
    Guyana’s destiny changed in 2015. US fossil fuel giant Exxon discovered nearly 11 billion barrels of oil in the deep water off the coast of this tiny, rainforested country.

    It was one of the most spectacular oil discoveries of recent decades. By 2019, Exxon and its partners, US oil company Hess and China-headquartered CNOOC, had started producing the fossil fuel.? They now pump around 650,000 barrels of oil a day, with plans to more than double this to 1.3 million by 2027.

    Guyana now has the world’s highest expected oil production growth through 2035.

    This country — sandwiched between Brazil, Venezuela and Suriname — has been hailed as a climate champion for the lush, well-preserved forests that carpet nearly 90% of its land. It is on the path to becoming a petrostate at the same time as the impacts of the fossil fuel-driven climate crisis escalate.

    While the government says environmental protection and an oil industry can go hand-in-hand, and low-income countries must be allowed to exploit their own resources, critics say it’s a dangerous path in a warming world, and the benefits may ultimately skew toward Exxon — not Guyana.

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

  16. Michaeltor表示:

    Apoteket online: Apotek hemleverans idag – apotek pa nett

  17. Carlospoogy表示:

    Mindful wellness challenges
    If you’re the type of person who thrives on challenges and pushing your limits, this doesn’t mean you need to shy away from wellness challenges altogether. But before diving in, take a step back and ask yourself if you’re pursuing the challenge for the right reasons, McGregor said.
    velodrome finance
    Some people want to try these challenges because they believe something is missing from their life, and they’re looking to attain “worth” or receive validation, McGregor noted.

    A good way to assess your motivation is by considering whether the challenge will benefit your health or if it’s about showcasing your accomplishments on social media or some other reason.

    Before trying any new trend, make sure you have the foundation to handle it and be aware of any potential risks, McGregor said.

    For casual runners, this might mean signing up for a 5K but building your endurance gradually while incorporating other strength training exercises into your routine. For more intense challenges, such as a marathon, McGregor encourages people to consult with professionals or a coach who can monitor your progress and condition along the way.

    Focusing on sustainable habits
    Both McGregor and Curran emphasize the importance of fostering sustainable health habits before embarking on more extreme challenges.

    Rather than chasing the idea of being “healthy,” McGregor suggests focusing on actual healthful behaviors and starting small.

    If you’re a highly sedentary person and want to add more movement to your day, try doing lunges while brushing your teeth or taking short walks throughout your typical routine.

  18. Michaeltor表示:

    de online drogist kortingscode: Betrouwbare online apotheek zonder recept – Beste online drogist

發佈留言

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